用最少的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 相关文章推荐
js 幻灯片的实现
Dec 06 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
jquery实现倒计时功能
Dec 28 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
js实现随机圆与矩形功能
Oct 29 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插入排序实现代码
2013/04/04 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
PHP之短标签开启设置
2013/06/17 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
关于php开启错误提示的总结
2019/09/24 PHP
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
javascript闭包入门示例
2014/04/30 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Zabbix实现微信报警功能
2016/10/09 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
心理健康心得体会
2014/01/02 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
2015年度保密工作总结
2015/04/24 职场文书
质检员工作总结2015
2015/04/25 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书