用最少的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 &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
jquery dialog键盘事件代码
Aug 01 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 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 上传文件的方法(类)
2009/07/30 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
php正则修正符用法实例详解
2016/12/29 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
ES6中字符串的使用方法扩展
2019/06/04 Javascript
vue3.0 上手体验
2020/09/21 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python pymongo模块用法示例
2018/03/31 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
大学生个人求职信范文
2013/09/21 职场文书
教师党性分析材料
2014/02/04 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
志愿者宣传口号
2014/06/17 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
辩论赛新闻稿
2015/07/17 职场文书