bxm0927/canvas-special

:octocat::alien::star2:超多经典 Canvas 实例，动态离子背景、炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等。

超多经典 canvas 实例

普及：<canvas> 元素用于在网页上绘制图形。这是一个 HTML 图形容器，必须使用脚本来绘制图形。

注意：IE 8 以及更早的版本不支持 <canvas> 元素。

1. 尤雨溪个人主页炫彩三角纽带效果，点击可变换

[ 源码 | 演示 ]

2. 知乎登录注册页动态离子背景效果

[ 源码 | 演示 ]

3. 基于 canvas 的五子棋完整功能实现

[ 源码 | 演示 ]

4. 基于 canvas 的《是男人就下100层》小游戏完美实现

[ 源码 | 演示 ]

5. 毛笔字书写田字格，可以写字

[ 源码 | 演示 ]

6. 随心而动，随刃而行。输入文字显示动画粒子特效

[ 源码 | 演示 ]

7. 鼠标移动炫彩小球

[ 源码 | 演示 ]

8. 2048

[ 源码 | 演示 ]

9. 贪吃蛇

[ 源码 | 演示 ]

10. 看你有多色

[ 源码 | 演示 ]

11. 坦克大战

[ 源码 | 演示 ]

12. 宇宙行星旋转特效

[ 源码 | 演示 ]

13. 支付宝咻咻咻动画特效

[ 源码 | 演示 ]

14. 程序员表白代码

[ 源码 | 演示 ]

15. 心形文字

[ 源码 | 演示 ]

16. 照片墙

[ 源码 | 演示 ]

License

The code is available under the MIT license.

部分收集于网络，侵删。

canvas-special's Issues

666

感谢分享！！！！

nb

大佬，作品很炫酷

动画粒子特效显示有点问题

强无敌

five chess

//判定食物是否出现在蛇身上，如果是重合，则重新生成一遍
var isOnSnake = true;
//设置食物出现的随机位置
while (isOnSnake) {
//执行后先将判定条件设置为false，如果判定不重合，则不会再执行下列语句
isOnSnake = false;
var indexX = getNumberInRange(0, canvas.width / 20 - 1);
var indexY = getNumberInRange(0, canvas.height / 20 - 1);
var rect = new Rect(indexX * 20, indexY * 20, 20, 20, "green");
for (var i = 0; i < snake.snakeArray.length; i++) {
if (snake.snakeArray[i].x == rect.x && snake.snakeArray[i].y == rect.y) {
//如果判定重合，将其设置为true，使随机数重给
isOnSnake = true;
break;
}
}
}
//返回rect，使得实例化对象food有draw的方法
return rect;

这段代码怎么避免食物出现在蛇上的

优秀

挺好的东西为什么没有留言

作者好样的，不错

一个小bug

《是男人就下一百层》有一个小bug：踩到钉子上没有反应（和踩到平地一样）
希望能修复一下~ 感谢！ QAQ