用最少的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 相关文章推荐
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
js实现随机点名小功能
Aug 17 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
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 SQLite类
2009/05/07 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
php中的依赖注入实例详解
2019/08/14 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
python多线程同步之文件读写控制
2021/02/25 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
Python列表list操作相关知识小结
2020/01/29 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
浅谈Python __init__.py的作用
2020/10/28 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
自动化专业本科毕业生求职信
2013/10/20 职场文书
公司董事长岗位职责
2014/06/08 职场文书
格林童话读书笔记
2015/06/30 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python