一点沙 发表于 2024-1-27 14:34:00

使用html5编写的贪吃蛇

本帖最后由 一点沙 于 2024-1-27 14:35 编辑

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>贪吃蛇晓铀袭</title>
   <style>
       body {
         display: flex;
         height: 100vh;
         margin: 0;
         padding: 0;
         justify-content: center;
         align-items: center;
       }
   </style>
</head>
<body>
   <canvas id="can" width="400" height="400" style="background-color: black">对不起，您的浏览器不支持canvas</canvas>
   <script>
       var snake = ,       //snake队列表示蛇身，初始节点存在但不显示
         direction = 1,          //1表示向右，-1表示向左，20表示向下，-20表示向上
         food = 43,            //食物的位置
         n,                      //与下次移动的位置有关
         box = document.getElementById('can').getContext('2d');
                                 //从0到399表示box里*的所有节点，每20px一个节点

       function draw(seat, color) {
         box.fillStyle = color;
         box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
                                 //用color填充一个矩形，以前两个参数为x，y坐标，后两个参数为宽和高。
       }

       document.onkeydown = function(evt) {   
                                 //当键盘上下左右键摁下的时候改变direction
         direction = snake - snake == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
       };

       !function() {
         snake.unshift(n = snake + direction);   
                                 //此时的n为下次蛇头出现的位置，n进入队列
         if(snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 39) {
                                 //if语句判断贪吃蛇是否撞到自己或者墙壁，碰到时返回，结束程序
               return alert("GAME OVER!");
         }
         draw(n, "lime");      //画出蛇头下次出现的位置
         if(n == food) {         //如果吃到食物时，产生一个蛇身以外的随机的点，不会去掉蛇尾
               while (snake.indexOf(food = ~~(Math.random() * 400)) > 0);
               draw(food, "yellow");
         } else {                //没有吃到食物时正常移动，蛇尾出队列
               draw(snake.pop(),"black");
         }
         setTimeout(arguments.callee, 150);      
                                 //每隔0.15秒执行函数一次，可以调节蛇的速度
       }();
   </script>
</body>
</html>

在记事本里复制进去，把后缀名改成.html，然后双击运行。
如果好玩麻烦评个分谢谢{:5_109:}

ZhihanXing 发表于 2024-1-27 16:36:01

{:9_232:}厉害

cjjJasonchen 发表于 2024-1-27 16:41:32

看起来不错哦，学习亿下

python爱好者. 发表于 2024-2-3 11:29:27

{:10_275:}

熊_熊 发表于 2024-4-21 22:33:31

赞不错哟
页: [1]
查看完整版本: 使用html5编写的贪吃蛇