用最少的JS代码写出贪吃蛇游戏


Posted in Javascript onJanuary 12, 2018

曾经诺基亚的贪吃蛇风靡一时,在游戏匮乏的年代,用java实现太难,现在网页制作20行代码就做成一个简单的demo了,时代在进步啊

用最少的JS代码写出贪吃蛇游戏

用最少的JS代码写出贪吃蛇游戏

完整脚本代码:

<!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>

以上就是三水点靠木为大家分享的最简代码写出贪吃蛇游戏的全部内容,如果大家有更好的方法可以在下方的留言区讨论,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
详解angular应用容器化部署
Aug 14 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
详解vue引入子组件方法
Feb 12 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
Ajax实现异步加载数据
Nov 17 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 #Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 #Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 #Javascript
详解VUE2.X过滤器的使用方法
Jan 11 #Javascript
Vuex提升学习篇
Jan 11 #Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 #Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 #Javascript
You might like
用PHP将数据导入到Foxmail
2006/10/09 PHP
phpize的深入理解
2013/06/03 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
jquery提升性能最佳实践小结
2010/12/06 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
理解javascript模块化
2016/03/28 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
python插入排序算法的实现代码
2013/11/21 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
python读写csv文件实例代码
2019/07/05 Python
python使用requests.session模拟登录
2019/08/09 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
python两种注释用法的示例
2020/10/09 Python
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
医学类个人求职信范文
2014/02/05 职场文书
音乐教师求职信
2014/06/28 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
红色故事汇观后感
2015/06/18 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA