用最少的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 相关文章推荐
javascript跨浏览器的属性判断方法
Mar 16 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 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
浅谈ThinkPHP的URL重写
2014/11/25 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
JavaScript中的私有成员
2006/09/18 Javascript
JS 继承实例分析
2008/11/04 Javascript
通过隐藏option实现select的联动效果
2009/11/10 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
python 常见的反爬虫策略
2020/09/27 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
超市促销活动方案
2014/03/05 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2014年医务科工作总结
2014/12/18 职场文书
介绍信的格式
2015/01/30 职场文书
小升初自荐信范文
2015/03/05 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
初中运动会前导词
2015/07/20 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
Python 内置函数速查表一览
2021/06/02 Python