devbox
码创造者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS实现的贪吃蛇游戏完整实例_基于js的贪吃蛇小游戏

作者：码创造者 | 2024-08-19 08:35:44

赞

踩

基于js的贪吃蛇小游戏

这篇文章主要介绍了JS实现的贪吃蛇游戏,结合完整实例形式分析了javascript实现贪吃蛇游戏的具体步骤、原理与相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS实现的贪吃蛇游戏。分享给大家供大家参考，具体如下：

思想：

1、设计蛇：属性有宽、高、方向、状态（有多少节），方法：显示，跑

2、设计食物：属性宽、高

3、显示蛇：根据状态向地图里加元素

4、蛇跑起来：下一节到前一节的位置，蛇头根据方向变，删除原来的蛇，新建蛇；当出界时，死亡，初始化；当蛇头吃到自己的时候，死亡，初始化

5、食物被吃掉，蛇加一节，去掉原来的食物，生成新的食物

6、添加定时器，绑定按键

完整示例：

  1.  
  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport"
  7.      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9.   <title>Document</title>
  10.   <style type="text/css">
  11.     body {
  12.       margin: 0;
  13.       padding: 0;
  14.     }
  15.     .main {
  16.       width: 800px;
  17.       height: 400px;
  18.       margin: 50px auto;
  19.     }
  20.     .btn {
  21.       width: 100px;
  22.       height: 40px;
  23.     }
  24.     .map {
  25.       position: relative;
  26.       width: 800px;
  27.       height: 400px;
  28.       background: #ccc;
  29.     }
  30.   </style>
  31. </head>
  32. <body>
  33. <div class="main">
  34.   <button class="btn" id="begin">开始游戏</button>
  35.   <div class="map" id="map"></div>
  36.   <script type="text/javascript">
  37.     var map = document.getElementById('map');
  38.     // 使用构造方法创建蛇，
  39.     function Snake()
  40.     {
  41.       // 设置蛇的宽、高、默认走的方向
  42.       this.width = 10;
  43.       this.height = 10;
  44.       this.direction = 'right';
  45.       // 记住蛇的状态，当吃完食物的时候，就要加一个，初始为3个小点为一个蛇，
  46.       this.body = [
  47.         {x:2, y:0},  // 蛇头，第一个点
  48.         {x:1, y:0},  // 蛇脖子，第二个点
  49.         {x:0, y:0}  // 蛇尾，第三个点
  50.       ];
  51.       // 显示蛇
  52.       this.display = function() {
  53.         // 创建蛇
  54.         for (var i=0; i<this.body.length; i++) {
  55.           if (this.body[i].x != null) {  // 当吃到食物时，x==null，不能新建，不然会在0，0处新建一个
  56.             var s = document.createElement('div');
  57.             // 将节点保存到状态中，以便于后面删除
  58.             this.body[i].flag = s;
  59.             // 设置宽高
  60.             s.style.width = this.width + 'px';
  61.             s.style.height = this.height + 'px';
  62.             s.style.borderRadius = "50%";
  63.             s.style.background = "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";
  64.             // 设置位置
  65.             s.style.position = 'absolute';
  66.             s.style.left = this.body[i].x * this.width + 'px';
  67.             s.style.top = this.body[i].y * this.height + 'px';
  68.             // 添加进去
  69.             map.appendChild(s);
  70.           }
  71.         }
  72.       };
  73.       // 让蛇跑起来,后一个元素到前一个元素的位置
  74.       // 蛇头根据方向处理，所以i不能等于0
  75.       this.run = function() {
  76.         // 后一个元素到前一个元素的位置
  77.         for (var i=this.body.length-1; i>0; i--) {
  78.           this.body[i].x = this.body[i-1].x;
  79.           this.body[i].y = this.body[i-1].y;
  80.         }
  81.         // 根据方向处理蛇头
  82.         switch(this.direction)
  83.         {
  84.           case "left":
  85.             this.body[0].x -= 1;
  86.             break;
  87.           case "right":
  88.             this.body[0].x += 1;
  89.             break;
  90.           case "up":
  91.             this.body[0].y -= 1;
  92.             break;
  93.           case "down":
  94.             this.body[0].y += 1;
  95.             break;
  96.         }
  97.         // 判断是否出界,一蛇头判断,出界的话，
  98.         if (this.body[0].x < 0 || this.body[0].x > 79 || this.body[0].y < 0 || this.body[0].y > 39) {
  99.           clearInterval(timer);  // 清除定时器，
  100.           alert("你瞎吗？撞死了！");
  101.           // 删除旧的
  102.           for (var i=0; i<this.body.length; i++) {
  103.             if (this.body[i].flag != null) {  // 如果刚吃完就死掉，会加一个值为null的
  104.               map.removeChild(this.body[i].flag);
  105.             }
  106.           }
  107.           this.body = [  // 回到初始状态，
  108.             {x:2, y:0},
  109.             {x:1, y:0},
  110.             {x:0, y:0}
  111.           ];
  112.           this.direction = 'right';
  113.           this.display();  // 显示初始状态
  114.           return false;  // 结束
  115.         }
  116.         // 判断蛇头吃到食物，xy坐标重合，
  117.         if (this.body[0].x == food.x && this.body[0].y == food.y) {
  118.           // 蛇加一节，因为根据最后节点定，下面display时，会自动赋值的
  119.           this.body.push({x:null, y:null, flag: null});
  120.           // 清除食物,重新生成食物
  121.           map.removeChild(food.flag);
  122.           food.display();
  123.         }
  124.         // 吃到自己死亡，从第五个开始与头判断，因为前四个永远撞不到
  125.         for (var i=4; i<this.body.length; i++) {
  126.           if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
  127.             clearInterval(timer);  // 清除定时器，
  128.             alert("傻子！你怎么能吃自己呢？");
  129.             // 删除旧的
  130.             for (var i=0; i<this.body.length; i++) {
  131.               if (this.body[i].flag != null) {  // 如果刚吃完就死掉，会加一个值为null的
  132.                 map.removeChild(this.body[i].flag);
  133.               }
  134.             }
  135.             this.body = [  // 回到初始状态，
  136.               {x:2, y:0},
  137.               {x:1, y:0},
  138.               {x:0, y:0}
  139.             ];
  140.             this.direction = 'right';
  141.             this.display();  // 显示初始状态
  142.             return false;  // 结束
  143.           }
  144.         }
  145.         // 先删掉初始的蛇，在显示新蛇
  146.         for (var i=0; i<this.body.length; i++) {
  147.           if (this.body[i].flag != null) {  // 当吃到食物时，flag是等于null，且不能删除
  148.             map.removeChild(this.body[i].flag);
  149.           }
  150.         }
  151.         // 重新显示蛇
  152.         this.display();
  153.       }
  154.     }
  155.     // 构造食物
  156.     function Food()
  157.     {
  158.       this.width = 10;
  159.       this.height = 10;
  160.       this.display = function() {
  161.         var f = document.createElement('div');
  162.         this.flag = f;
  163.         f.style.width = this.width + 'px';
  164.         f.style.height = this.height + 'px';
  165.         f.style.background = 'red';
  166.         f.style.borderRadius = '50%';
  167.         f.style.position = 'absolute';
  168.         this.x = Math.floor(Math.random()*80);
  169.         this.y = Math.floor(Math.random()*40);
  170.         f.style.left = this.x * this.width + 'px';
  171.         f.style.top = this.y * this.height + 'px';
  172.         map.appendChild(f);
  173.       }
  174.     }
  175.     var snake = new Snake();
  176.     var food = new Food();
  177.     snake.display();  // 初始化显示
  178.     food.display();
  179.     // 给body加按键事件，上下左右
  180.     document.body.onkeydown = function(e) {
  181.       // 有事件对象就用事件对象，没有就自己创建一个，兼容低版本浏览器
  182.       var ev = e || window.event;
  183.       switch(ev.keyCode)
  184.       {
  185.         case 38:
  186.           if (snake.direction != 'down') {  // 不允许返回，向上的时候不能向下
  187.             snake.direction = "up";
  188.           }
  189.           break;
  190.         case 40:
  191.           if (snake.direction != "up") {
  192.             snake.direction = "down";
  193.           }
  194.           break;
  195.         case 37:
  196.           if (snake.direction != "right") {
  197.             snake.direction = "left";
  198.           }
  199.           break;
  200.         case 39:
  201.           if (snake.direction != "left") {
  202.             snake.direction = "right";
  203.           }
  204.           break;
  205.       }
  206.     };
  207.     // 点击开始时，动起来
  208.     var begin = document.getElementById('begin');
  209.     var timer;
  210.     begin.onclick = function() {
  211.       clearInterval(timer);
  212.       // timer = setInterval(snake.run(), 500);  // 先执行run函数，把执行得到的结果，每500毫秒执行一次，不会在执行内部代码
  213.       timer = setInterval("snake.run()", 500); // 小技巧，每500毫秒执行字符串，字符串执行内部代码
  214.     };
  215.   </script>
  216. </div>
  217. </body>
  218. </html>

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得到如下运行效果：希望本文所述对大家JavaScript程序设计有所帮助。

希望本文所述对大家JavaScript程序设计有所帮助。 谢谢

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/1001530
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号