用最少的JS代码写出贪吃蛇游戏

 更新时间:2018年01月12日 08:57:31   转载 投稿:laozhang  
本篇文章给大家分享了用嘴简单的JS代码来实现经典贪吃蛇游戏的全部内容,有兴趣的朋友参考学习下。

曾经诺基亚的贪吃蛇风靡一时,在游戏匮乏的年代,用java实现太难,现在网页制作20行代码就做成一个简单的demo了,时代在进步啊

完整脚本代码:

<!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动态插入script的基本思路及实现函数

    JavaScript动态插入script的基本思路及实现函数

    偶尔需要动态插入javascript代码的需求,基本思路是动态创建一个script标签,设置其src属性,type属性等,需要的朋友可以参考下
    2013-11-11
  • JavaScript 学习点滴记录

    JavaScript 学习点滴记录

    HTML DOM (Document Object Model文档对象模型) DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件. DOM是以层次结构组织的节点或信息片断的集合.
    2009-04-04
  • JS验证全角与半角及相互转化的介绍

    JS验证全角与半角及相互转化的介绍

    全角:是一种电脑字符,是指一个全角字符占用两个标准字符(或两个半角字符)的位置。全角占两个字节。半角:是指一个字符占用一个标准的字符位置。半角占一个字节。接下来通过本文给大家介绍JS验证全角与半角及相互转化的知识,需要的朋友参考下吧
    2017-05-05
  • 深入理解javascript prototype的相关知识

    深入理解javascript prototype的相关知识

    这篇文章主要介绍了深入理解javascript prototype的相关知识,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • Boostrap入门准备之border box

    Boostrap入门准备之border box

    之前在学习Bootstrap的过程中,遇到各种奇葩的坑,如果在学习bootstrap之前,准备工作先做好,就可以或多或少的避开一些坑。下面小编开始给大家介绍border-box这个属性的知识。感兴趣的朋友一起学习吧
    2016-05-05
  • Javascript之this关键字深入解析

    Javascript之this关键字深入解析

    如我之前的文章所述(Javascript作用域),定义在全局的函数,函数的所有者就是当前页面,也就是window对象
    2013-11-11
  • 微信小程序中插入激励视频广告并获取收益(实例代码)

    微信小程序中插入激励视频广告并获取收益(实例代码)

    这篇文章主要介绍了微信小程序中插入激励视频广告并获取收益,通过代码给大家介绍了如何插入及注意事项,需要的朋友可以参考下
    2019-12-12
  • 微信内置浏览器图片查看器的代码实例

    微信内置浏览器图片查看器的代码实例

    这篇文章主要介绍了微信内置浏览器图片查看器的代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题

    解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题

    今天小编就为大家分享一篇解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序可滑动周日历组件使用详解

    微信小程序可滑动周日历组件使用详解

    这篇文章主要为大家详细介绍了微信小程序可滑动周日历组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10

最新评论