糊糊的前端学习笔记——25行代码实现一个贪吃蛇小游戏【Day06】
2017-07-06 16:26
615 查看
<!doctype html> <html> <body> <canvas id="can" width="400" height="400" style="background:Black"></canvas> <script> var sn = [42, 41], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d"); function draw(t, c) { ctx.fillStyle = c; ctx.fillRect(t % 20 * 20 + 1, ~ ~(t / 20) * 20 + 1, 18, 18); } document.onkeydown = function (e) { fx = sn[1] - sn[0] == (n = [-1, -20, 1, 20][(e || event).keyCode - 37] || fx) ? fx : n }; !function () { sn.unshift(n = sn[0] + fx); if (sn.indexOf(n, 1) > 0 || n < 0 || n > 399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19) return alert("GAME OVER"); draw(n, "Lime"); if (n == dz) { while (sn.indexOf(dz = ~ ~(Math.random() * 400)) >= 0); draw(dz, "Yellow"); } else draw(sn.pop(), "Black"); setTimeout(arguments.callee, 130); } (); </script> </body> </html>
相关文章推荐
- 前端攻城狮学习笔记一:实现一个遍历数组或对象里所有成员的迭代器
- web前端学习笔记-瀑布流的算法分析与代码实现
- 前端攻城狮学习笔记二:实现一个叫Man的类,包含attr, words, say三个方法。
- 怎样实现一个图层的运动(可实现贪吃蛇小游戏,代码现不完善,请关注本人,今日完善)
- 前端攻城狮学习笔记三:实现一个URI解析方法,把url里#之后的参数解析成指定的数据结构。
- 前端学习笔记一:关于一个新页面的开发
- 一个无聊男人的疯狂《数据结构与算法分析-C++描述》学习笔记 习题2.8 随机数组的三种生成算法(补) 将bash的实现翻译成比较纯正的bash风格
- C/C++中strlen(),strcpy(),strcat()以及strcmp()的代码实现--学习笔记
- 学习笔记:一个操作系统的实现--认识保护模式
- jQuery学习笔记之控制页面实现代码
- 学习笔记:一个操作系统的实现--搭建你的工作环境
- JavaScript学习笔记之获取当前目录的实现代码
- 一个无聊男人的疯狂《数据结构与算法分析-C++描述》学习笔记 用C++/lua/python/bash的四重实现(5)欧几里得算法欧几里得算法求最大公约数
- 学习笔记:一个操作系统的实现--马上动手写一个最小的“操作系统”
- linux0.11学习笔记-技术铺垫-简单AB任务切换程序(1)-实现一个简单的bootloader
- jQuery学习笔记之控制页面实现代码
- Silverlight学习笔记一(理解一下机制,使用一下布局,实现一个简单的用户登录)
- WPF and Silverlight 学习笔记(二十二):使用代码实现绑定、绑定数据的验证
- 一个无聊男人的疯狂《数据结构与算法分析-C++描述》学习笔记 用C++/lua/python/bash的四重实现(4)二分搜索算法
- 一个无聊男人的疯狂《数据结构与算法分析-C++描述》学习笔记 用C++/lua/python/bash的四重实现(7)习题2.8 随机数组的三种生成算法