摘要：用 canvas 做小游戏或者特效，碰撞检测是少不了的。本文将会涉及普通的碰撞检测，以及像素级的碰撞检测。（本文的碰撞检测均以 矩形 为例） 普通碰撞检测 普通的矩形碰撞检测比较简单。即已知两个矩形的各顶点坐标，判断是否相交，如相交，则为碰撞。 leetcode 有道题是给出两个矩形的坐标，求其相交 阅读全文

摘要：基本骨骼 var ctx = document.getElementById('canvas').getContext('2d'); 矩形 实心： // 填充色 (默认为黑色) ctx.fillStyle = 'darkSlateBlue'; // 规定画布左上角坐标为 (0, 0) // 矩形左上 阅读全文

摘要：最近针对粒子化作了一点点的探究，决定结合其做个小游戏，于是这个简单的打字游戏出世了。 试玩地址：Typewriter game 仅在chrome下测试，请谨慎使用其他浏览器（特别是ff）；加载速度有点慢，请耐心等待5~10秒。因为需要加载的粒子太多了... 游戏概况 游戏逻辑和代码其实是很简单的，都 阅读全文

摘要：之前写了谈谈文字图片像素化，主要是为了将文字和图片像素化后的坐标提取出来，而本篇所讲即为像素化后的粒子化过程。 先上一个简单的demo -> 粒子化demo，本篇的目的就是为了讲解怎样做这样的简单demo（大牛请无视）；同时会介绍一些优秀的demo供大家参考。 主要思路 首先我们谈谈粒子化的主要思路 阅读全文

摘要：基础 看了岑安大大的教程学习了3d基础，之前写了篇总结，觉得写的太散废话太多，重写一篇。 本文需要实现的效果如下：3d球 岑安的两篇教程写的很棒，但我感觉改变下顺序或许会更好理解。 我们把画布（此文所讲所见所得均基于canvas）的中心当做是一个空间三维系的中心，画布的x和y轴正方向分别当做... 阅读全文

摘要：或许连小游戏都算不上，可以叫做mini游戏。 没有任何框架或者稍微有点深度的东西，所以有js基础的或者要追求炫酷效果的可以直接ctrl+w了。 先贴出两个游戏的试玩地址： 是男人就走30步 是男人就忍30秒 基础 基础 接下来简单说说怎样开发这样的基础游戏。 首先你要懂得canvas上的基本api， 阅读全文

摘要：最终demo -> 3d魔方 体验方法： 浮动鼠标找到合适的位置，按空格键暂停 选择要翻转的3*3模块，找到相邻两个正方体，鼠标点击第一个正方体，并且一直保持鼠标按下的状态直到移到第二个正方体后放开，比如下图： （鼠标点击1处，然后一直移动到2处松开，中间一行的3*3模块绕图示方向发生转动） 按空格 阅读全文

摘要：事情的起因 之前写了篇谈谈文字图片粒子化 I，并且写了个简单的demo -> 粒子化。正当我在为写 谈谈文字图片粒子化II 准备demo时，突然想到能不能用正方体代替demo中的球体粒子。我不禁被自己的想法吓了一跳，球体的实现仅仅是简单的画圆，因为球体在任意角度任意距离的视图都是圆（如果有视图的话） 阅读全文

摘要：先来看个简单的demo-> 像素粒子化 demo是基于3d旋转算法+像素粒子化实现的，尚有一些bug和性能问题，我们不做深究。本篇主要谈谈如何将文字和图片的像素粒子化。针对这个demo，也就是如何实现如下两个图片的转换。 无论文字还是图片，本篇所讲都是针对画布，这点要清楚。如果是文字，用fillTe 阅读全文