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

每周一点canvas动画代码文件在上一节，《每周一点canvas动画》——桌球运动(1)中我们介绍了如何运用动量守恒和能量守恒的概念，最为真实的模拟了物体与物体之间发生碰撞后的情况。那么这一节，我们在上一节的基础上我们继续深入研究，非水平和非垂直的情况下如何处理物体与物体之间碰撞后的情况，以及更为普适的多物体运动。本节主要内容：代码优化二维碰撞解析代码实现粒子系统总结1.代

业界 2016年07月23日

从零开始开发一款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日

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

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

业界 2016年07月21日

Vue+WebSocket+ES6+Canvas 制作【你画我猜】小游戏

项目地址：https://github.com/jrainlau/draw-something下载 & 运行git clone git@github.com:jrainlau/draw-something.gitcd draw-something && npm installnode ws-server.js // 开启websocket服务器npm run dev //

业界 2016年06月26日

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

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

业界 2016年08月06日