JS實(shí)現(xiàn)的貪吃蛇游戲完整實(shí)例

更新時(shí)間：2019年01月18日 09:54:29 作者：snow_small

這篇文章主要介紹了JS實(shí)現(xiàn)的貪吃蛇游戲,結(jié)合完整實(shí)例形式分析了javascript實(shí)現(xiàn)貪吃蛇游戲的具體步驟、原理與相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的貪吃蛇游戲。分享給大家供大家參考，具體如下：

思想：

1、設(shè)計(jì)蛇：屬性有寬、高、方向、狀態(tài)（有多少節(jié)），方法：顯示，跑

2、設(shè)計(jì)食物：屬性寬、高

3、顯示蛇：根據(jù)狀態(tài)向地圖里加元素

4、蛇跑起來(lái)：下一節(jié)到前一節(jié)的位置，蛇頭根據(jù)方向變，刪除原來(lái)的蛇，新建蛇；當(dāng)出界時(shí)，死亡，初始化；當(dāng)蛇頭吃到自己的時(shí)候，死亡，初始化

5、食物被吃掉，蛇加一節(jié)，去掉原來(lái)的食物，生成新的食物

6、添加定時(shí)器，綁定按鍵

完整示例：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
    .main {
      width: 800px;
      height: 400px;
      margin: 50px auto;
    }
    .btn {
      width: 100px;
      height: 40px;
    }
    .map {
      position: relative;
      width: 800px;
      height: 400px;
      background: #ccc;
    }
  </style>
</head>
<body>
<div class="main">
  <button class="btn" id="begin">開(kāi)始游戲</button>
  <div class="map" id="map"></div>
  <script type="text/javascript">
    var map = document.getElementById('map');
    // 使用構(gòu)造方法創(chuàng)建蛇，
    function Snake()
    {
      // 設(shè)置蛇的寬、高、默認(rèn)走的方向
      this.width = 10;
      this.height = 10;
      this.direction = 'right';
      // 記住蛇的狀態(tài)，當(dāng)吃完食物的時(shí)候，就要加一個(gè)，初始為3個(gè)小點(diǎn)為一個(gè)蛇，
      this.body = [
        {x:2, y:0},  // 蛇頭，第一個(gè)點(diǎn)
        {x:1, y:0},  // 蛇脖子，第二個(gè)點(diǎn)
        {x:0, y:0}  // 蛇尾，第三個(gè)點(diǎn)
      ];
      // 顯示蛇
      this.display = function() {
        // 創(chuàng)建蛇
        for (var i=0; i<this.body.length; i++) {
          if (this.body[i].x != null) {  // 當(dāng)吃到食物時(shí)，x==null，不能新建，不然會(huì)在0，0處新建一個(gè)
            var s = document.createElement('div');
            // 將節(jié)點(diǎn)保存到狀態(tài)中，以便于后面刪除
            this.body[i].flag = s;
            // 設(shè)置寬高
            s.style.width = this.width + 'px';
            s.style.height = this.height + 'px';
            s.style.borderRadius = "50%";
            s.style.background = "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";
            // 設(shè)置位置
            s.style.position = 'absolute';
            s.style.left = this.body[i].x * this.width + 'px';
            s.style.top = this.body[i].y * this.height + 'px';
            // 添加進(jìn)去
            map.appendChild(s);
          }
        }
      };
      // 讓蛇跑起來(lái),后一個(gè)元素到前一個(gè)元素的位置
      // 蛇頭根據(jù)方向處理，所以i不能等于0
      this.run = function() {
        // 后一個(gè)元素到前一個(gè)元素的位置
        for (var i=this.body.length-1; i>0; i--) {
          this.body[i].x = this.body[i-1].x;
          this.body[i].y = this.body[i-1].y;
        }
        // 根據(jù)方向處理蛇頭
        switch(this.direction)
        {
          case "left":
            this.body[0].x -= 1;
            break;
          case "right":
            this.body[0].x += 1;
            break;
          case "up":
            this.body[0].y -= 1;
            break;
          case "down":
            this.body[0].y += 1;
            break;
        }
        // 判斷是否出界,一蛇頭判斷,出界的話(huà)，
        if (this.body[0].x < 0 || this.body[0].x > 79 || this.body[0].y < 0 || this.body[0].y > 39) {
          clearInterval(timer);  // 清除定時(shí)器，
          alert("！");
          // 刪除舊的
          for (var i=0; i<this.body.length; i++) {
            if (this.body[i].flag != null) {
              map.removeChild(this.body[i].flag);
            }
          }
          this.body = [  // 回到初始狀態(tài)，
            {x:2, y:0},
            {x:1, y:0},
            {x:0, y:0}
          ];
          this.direction = 'right';
          this.display();  // 顯示初始狀態(tài)
          return false;  // 結(jié)束
        }
        // 判斷蛇頭吃到食物，xy坐標(biāo)重合，
        if (this.body[0].x == food.x && this.body[0].y == food.y) {
          // 蛇加一節(jié)，因?yàn)楦鶕?jù)最后節(jié)點(diǎn)定，下面display時(shí)，會(huì)自動(dòng)賦值的
          this.body.push({x:null, y:null, flag: null});
          // 清除食物,重新生成食物
          map.removeChild(food.flag);
          food.display();
        }
        // 吃到自己死亡，從第五個(gè)開(kāi)始與頭判斷，因?yàn)榍八膫€(gè)永遠(yuǎn)撞不到
        for (var i=4; i<this.body.length; i++) {
          if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
            clearInterval(timer);  // 清除定時(shí)器，
            alert("你怎么能吃自己呢？");
            // 刪除舊的
            for (var i=0; i<this.body.length; i++) {
              if (this.body[i].flag != null) {  // 如果剛吃完就死掉，會(huì)加一個(gè)值為null的
                map.removeChild(this.body[i].flag);
              }
            }
            this.body = [  // 回到初始狀態(tài)，
              {x:2, y:0},
              {x:1, y:0},
              {x:0, y:0}
            ];
            this.direction = 'right';
            this.display();  // 顯示初始狀態(tài)
            return false;  // 結(jié)束
          }
        }
        // 先刪掉初始的蛇，在顯示新蛇
        for (var i=0; i<this.body.length; i++) {
          if (this.body[i].flag != null) {  // 當(dāng)吃到食物時(shí)，flag是等于null，且不能刪除
            map.removeChild(this.body[i].flag);
          }
        }
        // 重新顯示蛇
        this.display();
      }
    }
    // 構(gòu)造食物
    function Food()
    {
      this.width = 10;
      this.height = 10;
      this.display = function() {
        var f = document.createElement('div');
        this.flag = f;
        f.style.width = this.width + 'px';
        f.style.height = this.height + 'px';
        f.style.background = 'red';
        f.style.borderRadius = '50%';
        f.style.position = 'absolute';
        this.x = Math.floor(Math.random()*80);
        this.y = Math.floor(Math.random()*40);
        f.style.left = this.x * this.width + 'px';
        f.style.top = this.y * this.height + 'px';
        map.appendChild(f);
      }
    }
    var snake = new Snake();
    var food = new Food();
    snake.display();  // 初始化顯示
    food.display();
    // 給body加按鍵事件，上下左右
    document.body.onkeydown = function(e) {
      // 有事件對(duì)象就用事件對(duì)象，沒(méi)有就自己創(chuàng)建一個(gè)，兼容低版本瀏覽器
      var ev = e || window.event;
      switch(ev.keyCode)
      {
        case 38:
          if (snake.direction != 'down') {  // 不允許返回，向上的時(shí)候不能向下
            snake.direction = "up";
          }
          break;
        case 40:
          if (snake.direction != "up") {
            snake.direction = "down";
          }
          break;
        case 37:
          if (snake.direction != "right") {
            snake.direction = "left";
          }
          break;
        case 39:
          if (snake.direction != "left") {
            snake.direction = "right";
          }
          break;
      }
    };
    // 點(diǎn)擊開(kāi)始時(shí)，動(dòng)起來(lái)
    var begin = document.getElementById('begin');
    var timer;
    begin.onclick = function() {
      clearInterval(timer);
      // timer = setInterval(snake.run(), 500);  // 先執(zhí)行run函數(shù)，把執(zhí)行得到的結(jié)果，每500毫秒執(zhí)行一次，不會(huì)在執(zhí)行內(nèi)部代碼
      timer = setInterval("snake.run()", 500); // 小技巧，每500毫秒執(zhí)行字符串，字符串執(zhí)行內(nèi)部代碼
    };
  </script>
</div>
</body>
</html>

使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得到如下運(yùn)行效果：