用最少的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学习笔记5 类和对象
Jan 11 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
原生JS实现记忆翻牌游戏
Jul 31 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时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
php简单压缩css样式示例
2016/09/22 PHP
javascript新手语法小结
2008/06/15 Javascript
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python语言进阶知识点总结
2019/05/28 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
怎么写好自荐信
2013/10/30 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
平面设计岗位职责
2013/12/14 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
走进科学观后感
2015/06/18 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技