用最少的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创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 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中for循环语句的几种变型
2007/03/16 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
jQuery示例收集
2010/11/05 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
Python里隐藏的“禅”
2014/06/16 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
python 产生token及token验证的方法
2018/12/26 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
Python如何将字符串转换为日期
2020/07/31 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
教育课题研究自我鉴定范文
2013/12/28 职场文书
药店主任岗位责任制
2014/02/10 职场文书
电子商务求职信
2014/06/15 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server