用最少的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简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
JS同步、异步、延迟加载的方法
May 05 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
Python 从列表中取值和取索引的方法
2018/12/25 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
python元组拆包实现方法
2021/02/28 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
报关简历自我评价怎么写
2013/09/19 职场文书
军训自我鉴定200字
2014/02/13 职场文书
分层教学实施方案
2014/03/19 职场文书
医药营销个人求职信
2014/04/12 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
小学教师师德承诺书
2014/05/23 职场文书
优秀党支部申报材料
2014/12/24 职场文书
大学生创业事迹材料
2014/12/30 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技