用最少的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 读书笔记索引贴
Jan 11 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
js随机生成一个验证码
2017/06/01 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
python中eval与int的区别浅析
2019/08/11 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
教师自我剖析材料(四风问题)
2014/09/30 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
企业宣传语大全
2015/07/13 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android