从零开始开发一款H5小游戏(五) 必要的包装，游戏规则和场景设计

本系列文章对应游戏代码已开源 Sinuous game到这里我们已经讲了游戏的整体设计和实现。一个游戏要完整，还需要给它制定一个评分机制，它是整个游戏的关键所在。就好比一部电影，特效再好看，如果剧情狗血，那也是一部烂片。相信大家都玩过一些简单但很吸引人的小游戏。比如很久以前微信上的打飞机，围住神经猫，还有前段时间大火的slither.io。他们都简单易玩，但却能让人肾上腺素

业界 2016年07月21日

《每周一点canvas动画》——碰撞检测(1)

每周一点canvas动画代码文件在前面的几章中我介绍了一些动画效果，这些动画效果都相对基础。但是通过这些基础的动画形式和概念，你可以设计出更复杂的动画。本章将介绍在动画中相对来说比较难的物理概念——碰撞检测，当然，我并不是说这个概念在理解上有多难，而是其实现的过程，以及实现的方式上，比较考验你的脑洞。言归正传，本章主要内容：碰撞检测的方法几何体碰撞检测方法基于距离的碰撞检测

业界 2016年07月13日

从零开始开发一款H5小游戏(一) 重温canvas的基础用法

本系列文章对应游戏代码已开源 Sinuous game。初衷从萌发写一个小游戏的想法到完成游戏开发用了大概一周的业余时间。这个过程积累了一些经验，也算是参透了一些游戏开发的原理。在这里打算写一个系列教程，讲述怎样从零开始开发一款小游戏。让新者少走弯路，快速入手。也能让自己总结反思，发现问题。在开始介绍如何写游戏前有必要重温一下canvas。它是本游戏的地基，建房子要快，首先

业界 2016年07月14日

从零开始开发一款H5小游戏(三) 攻守阵营，赋予粒子新的生命

本系列文章对应游戏代码已开源 Sinuous game。每个游戏都会包含场景和角色。要实现一个游戏角色，就要清楚角色在场景中的位置，以及它的运动规律，并能通过数学表达式表现出来。场景坐标canvas 2d的场景坐标系采用平面笛卡尔坐标系统，左上角为原点(0,0)，向右为x轴正方向，向下为y轴正方向，坐标系统的1个单位相当于屏幕的1个像素。这对我们进行角色定位至关重要。Ene

业界 2016年07月14日

Canvas入门－利用Canvas画国旗

在这之前需要你懂得以下方法的使用：beginPath()moveTo()lineTo()closePath()具体用法可以参考我的上一篇文章 canvas入门－利用canvas制作一个七巧板矩形的绘制canvas提供了三种绘制矩形的方法：fillRect(x, y, width, height)绘制一个填充的矩形strokeRect(x, y, width, height)

业界 2016年07月17日

《每周一点canvas动画》——桌球运动(1)

每周一点canvas动画代码文件一本好的技术书籍往往都是由浅入深，本系列文章基本上也遵循这个原理。在上一章中我们介绍了高级的坐标旋转，并且通过它，我们实现了任意角度的碰撞反弹效果，它让物体与非水平和非垂直的面产生合乎情理的碰撞成为了可能。那么在本章我们继续深入的介绍另一个问题——物体与物体发生碰撞后应该如何处理？也许你会说，在前面的章节中我们不是已经介绍过物体与物体之间的碰

业界 2016年07月16日

Canvas入门－利用Canvas绘制好玩的电子时钟

在这之前你需要了解一下方法的使用：beginPath()closePath()moveTo()lineTo()fill()stroke()fillRect()clearRect()这些我在前面的文章介绍过，可以看：canvas入门－利用 canvas 制作一个七巧板画个圆arc()方法arc(x, y, radius, startAngle, endAngle, antic

业界 2016年07月21日

从零开始开发一款H5小游戏(四) 撞击吧粒子，炫酷技能的实现

本系列文章对应游戏代码已开源 Sinuous game。本游戏有五种技能粒子，分别是 "护盾"，"重力场"，"时间变慢"，"使敌人变小"，"增加生命"。Player粒子吃了技能粒子后就能表现各种特殊效果。碰撞检测游戏中Player粒子可能会撞击到Enemy粒子，也可能吃到Skill粒子。我们怎么来判断呢？画布中两个粒子的碰撞检测其实很简单，如果是圆形粒子，只需要判断两个粒子

业界 2016年07月21日

《每周一点canvas动画》——从2D到3D

前面的章节我们介绍了2D层面的canvas动画，基本上如果你对原理和概念都理解了，一般的2D层面的动画对你来说都是小菜一碟。从这一章开始我们介绍如何使用2D的canvas来渲染3D系统。1.CSS3与webGL提到3D效果，你可能首先会想到css3中的3D动画。通过它，单个元素或是整个页面都可以通过动画，图片滤镜，以及2D或3D的变换变得生动起来。使用它来构建3D效果，一个

业界 2016年08月06日

(1/2)Canvas的交互&存为图片-基本篇

前言公司的产品同学看到朋友圈疯传的这场图后。一拍脑袋，决定做个H5版本的来推广一波。需求如下：文字变成可以点击的，而且还要能够变色（闪瞎有木有）中间的姓名换成用户的微信头像点击button后，将canvas的操作结果保存成图片，来现微信长按保存到本地的功能。难点总结：页面元素canvas基本的api画到画布上（要解决显示自适应的问题）；如何实现点击canvas，识别点击文字

业界 2016年08月04日