js开发实现简单贪吃蛇游戏（20行代码）

最新推荐文章于 2023-11-15 08:27:13 发布

放肆青春的博客

最新推荐文章于 2023-11-15 08:27:13 发布

阅读量883

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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

代码：

[html]view plaincopy 
   
 <!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>  

这是开始游戏：

这是游戏结束：

转载来自：http://blog.csdn.net/hj7jay/article/details/51011269

放肆青春的博客

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js开发实现简单贪吃蛇游戏（20行代码）

曾经诺基亚的贪吃蛇风靡一时，在游戏匮乏的年代，用java实现太难，现在网页制作20行代码就做成一个简单的demo了，时代在进步啊代码：[html] view plain copy> html> body> canvas id="can" width="400" height="400" style="backgrou
复制链接

扫一扫