• 技术文章 >web前端 >js教程

    如何使用JS代码写出贪吃蛇游戏(详细教程)

    亚连亚连2018-06-12 14:41:15原创1101
    本篇文章给大家分享了用嘴简单的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>

    上面是我整理给大家的,希望今后会对大家有帮助。

    相关文章:

    在zTree树插件中如何实现全国五级地区点击后加载

    如何实现node+express个性化聊天室?

    vue如何制作自动建站项目(详细教程)

    以上就是如何使用JS代码写出贪吃蛇游戏(详细教程)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:JS代码 贪吃蛇游戏
    上一篇:在HTTP中gzip压缩问题 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 一文详解多版本node的安装和管理• Angular学习之聊聊Http ( 错误处理 / 请求拦截 )• 浅析Angular中的Change Detection机制• 实战学习:聊聊Node.js怎么操作数据库• 浅析Angular变更检测中的订阅异步事件
    1/1

    PHP中文网