用最少的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 相关文章推荐
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
jquery常用操作小结
Jul 21 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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
Protoss魔法科技
2020/03/14 星际争霸
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
总结js函数相关知识点
2018/02/27 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python实现线程状态监测简单示例
2018/03/28 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
四好少年事迹材料
2014/01/12 职场文书
高中体育教学反思
2014/01/24 职场文书
房地产促销活动方案
2014/03/01 职场文书
年会主持词结束语
2014/03/27 职场文书
团队经理竞聘书
2014/03/31 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
出售房屋委托书范本
2014/09/24 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
分析Python list操作为什么会错误
2021/11/17 Python
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server