用最少的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 表格隔行颜色
Dec 02 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 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实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
Vue异步加载about组件
2017/10/31 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python中的自省(反射)详解
2015/06/02 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python创建学生成绩管理系统
2019/11/22 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
英国高街电视:High Street TV
2018/05/22 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
内容编辑个人求职信
2013/12/10 职场文书
揭牌仪式主持词
2014/03/19 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
个人自查自纠材料
2014/10/14 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
感谢信范文大全
2015/01/23 职场文书
如何写辞职书
2015/02/26 职场文书
Python机器学习之逻辑回归
2021/05/11 Python