用最少的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函数获取html中className所在的内容并去除标签
Sep 08 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
vue路由缓存的几种实现方式小结
Feb 02 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
JS 实现Json查询的方法实例
2013/04/12 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
Vue实现路由跳转和嵌套
2017/06/20 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python+django实现文件上传
2016/01/17 Python
python处理xml文件的方法小结
2017/05/02 Python
python编写分类决策树的代码
2017/12/21 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
如何教少儿学习Python编程
2020/07/10 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
审计班子对照检查材料
2014/08/27 职场文书
美术教师个人工作总结
2015/02/06 职场文书
《称赞》教学反思
2016/02/17 职场文书
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python