js如何實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲

這篇文章主要講解了js如何實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

創(chuàng)新互聯(lián)主要從事網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、成都響應(yīng)式網(wǎng)站建設(shè)、程序開發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、小程序制作等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計(jì)、營(yíng)銷、管理等多方位專業(yè)化運(yùn)作于一體。

運(yùn)行截圖：

源碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>貪吃蛇小游戲</title>
 
  <style>
    body {
      margin:0px;
      padding:0px;
 
    }
 
    #main {
      margin:100px;
    }
 
    .btn {
      width:100px;
      height:40px;
    }
 
    .gtitle {
      font-size:25px;
      font-weight: bold;
 
    }
 
    #gnum {
      color:red;
    }
  </style>
</head>
 
<body>
 
<div id="main">
  <h2>貪吃蛇</h2>
  <input class="btn" type="button" value="開始游戲" id="begin" />
  <input class="btn" type="button" value="暫停游戲" id="pause" />
  <span class="gtitle">第 <span id="gnum">1</span> 關(guān)</span>
 
  <script>
    var main = document.getElementById('main');
    var showcanvas = true; //是否開啟畫布格子
    /**
     * 地圖對(duì)象的構(gòu)造方法
     * @param atom 原子大小寬和高是一樣的 10
     * @param xnum 橫向原子的數(shù)量
     * @param ynum 縱向原子的數(shù)量
     * @constructor
     */
    function Map(atom, xnum, ynum){
      this.atom = atom; // 20x20
      this.xnum = xnum; //
      this.ynum = ynum;
 
      this.canvas = null;
 
      //創(chuàng)建畫布的方法
      this.create = function(){
        this.canvas = document.createElement('div');
        this.canvas.style.cssText="position:relative;top:40px;border:1px solid darkred; background:#FAFAFA";
        this.canvas.style.width = this.atom * this.xnum + 'px'; //畫布的寬
        this.canvas.style.height = this.atom * this.ynum + 'px'; //畫布的高
        main.appendChild(this.canvas);
 
        if(showcanvas) {
          for(var y=0; y<ynum; y++) {
            for (var x = 0; x < xnum; x++) {
              var a = document.createElement('div');
              a.style.cssText = "border:1px solid yellow";
              a.style.width = this.atom + 'px';
              a.style.height = this.atom + 'px';
              a.style.backgroundColor = "LightSkyBlue";
              this.canvas.appendChild(a);
              a.style.position = 'absolute';
              a.style.left = x * this.atom + 'px';
              a.style.top = y*this.atom+'px';
            }
          }
        }
 
      }
 
    }
 
    /**
     * 創(chuàng)建食物的構(gòu)造方法
     * @param map 地圖對(duì)象
     * @constructor
     */
    function Food(map){
      this.width = map.atom;
      this.height = map.atom;
      this.bgcolor= "rgb("+Math.floor(Math.random()*200)+", "+Math.floor(Math.random()*200)+", " + Math.floor(Math.random() * 200) +")";
      this.x = Math.floor(Math.random()*map.xnum);
      this.y = Math.floor(Math.random()*map.ynum);
      this.flag = document.createElement('div');
      this.flag.style.width = this.width + 'px';
      this.flag.style.height = this.height + 'px';
      this.flag.style.backgroundColor = this.bgcolor;
      // this.flag.style.borderRadius = '50%';
      this.flag.style.position = 'absolute';
      this.flag.style.left = this.x * this.width +'px';
      this.flag.style.top = this.y * this.height + 'px';
 
      map.canvas.appendChild(this.flag);
    }
    function Snake(map) {
      //設(shè)置寬，高
      this.width=map.atom;
      this.height = map.atom;
      //默認(rèn)走的方向
      this.direction = 'right';
 
      this.body = [
        {x:2, y:0}, //蛇頭， 第一點(diǎn) 0
        {x:1, y:0}, //蛇脖子, 第二點(diǎn) 1
        {x:0, y:0} //蛇尾， 第三點(diǎn)  2
        //{x:null, y:null, flag:null} 3
      ];
      //顯示蛇
      this.display = function(){
        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)保存到一個(gè)狀態(tài)變量中， 以便以后刪除使用
            this.body[i].flag = s;
 
            //設(shè)置蛇的樣式
            s.style.width = this.width + 'px';
            s.style.height = this.height + 'px';
            s.style.backgroundColor="rgb("+Math.floor(Math.random()*200)+", "+Math.floor(Math.random()*200)+", " + Math.floor(Math.random() * 200) +")";
            //s.style.borderRadius = '50%';
            //設(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';
            //添加到地圖中
            map.canvas.appendChild(s);
          }
 
        }
      }
      //讓蛇運(yùn)動(dòng)起來
      this.run = function() {
 
        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;
        }
        //默認(rèn)是right left up down
        // 根據(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;
        }
 
        //判斷蛇頭吃到食物， xy和食物的XY重合
        if(this.body[0].x ==food.x && this.body[0].y == food.y ){
          //蛇加一節(jié)， 根據(jù)最后節(jié)點(diǎn)定
          this.body.push({x:null, y:null, flag:null});
 
          //判讀一下設(shè)置級(jí)別
          if(this.body.length > l.slength) {
            l.set();
          }
 
          map.canvas.removeChild(food.flag);
          food = new Food(map);
 
        }
        //判斷是否出界， 蛇頭
        if(this.body[0].x <0 || this.body[0].x > map.xnum-1 || this.body[0].y <0 || this.body[0].y > map.ynum -1) {
          clearInterval(timer); //清除定時(shí)器
 
          alert("怎么這么不小心撞墻了呢，摸摸頭");
 
          //重新開始游戲
          restart(map, this)
 
          return false;
        }
 
        //判讀是否和自己重合
        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("呀，怎么喜歡咬自己的肉肉");
 
            //重新開始游戲
            restart(map, this)
 
            return false;
          }
 
        }        
 
        for(var i=0; i<this.body.length; i++){
          if(this.body[i].flag != null) { //當(dāng)吃到食物， flag是等null, 且不能刪除
            map.canvas.removeChild(this.body[i].flag)
          }
        }
 
        this.display();
      }
 
    }
    //重新開始游戲
    function restart(map, snake) {
      for(var i=0; i<snake.body.length; i++) {
        map.canvas.removeChild(snake.body[i].flag);
      }
 
      snake.body = [
        {x:2, y:0}, //蛇頭， 第一點(diǎn) 0
        {x:1, y:0}, //蛇脖子, 第二點(diǎn) 1
        {x:0, y:0} //蛇尾， 第三點(diǎn)  2
 
      ];
      snake.direction = 'right';
      snake.display();
      map.canvas.removeChild(food.flag);
      food = new Food(map);
 
    }
    //設(shè)置級(jí)別對(duì)象
    function Level() {
      this.num = 1; //第幾級(jí)別
      this.speed= 300; //毫秒， 每升一關(guān)， 數(shù)量減少20， 速度就加快了
      this.slength = 8; //每個(gè)關(guān)的長(zhǎng)度判斷
 
      this.set = function() {
        this.num++;
        if(this.speed <= 50) {
          this.speed = 50;
        }else{
          this.speed -=50;
        }
        this.slength += 10; //這個(gè)可以自己定義
        this.display();
        start(); //重新開始， 速度加快
      }
 
      this.display = function() {
        document.getElementById('gnum').innerHTML = this.num;
      }
    }
    var l = new Level();
    l.display();
 
    //創(chuàng)建地圖對(duì)象
    var map = new Map(20, 40, 20);
    map.create(); //顯示畫布
 
    //構(gòu)造食物對(duì)象
    var food = new Food(map);
 
    //構(gòu)造蛇對(duì)象
    var snake = new Snake(map);
    snake.display();
 
    // 組body加鍵盤事件， 上下左右
    window.onkeydown = function(e){
      var event = e || window.event;
 
      // console.log(event.keyCode);
 
      switch(event.keyCode) {
        case 38:
          if(snake.direction != "down") {
            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;
      }
    }
 
    var timer; //變量可以提升
 
    function start() {
      clearInterval(timer);
      timer = setInterval(function(){
        snake.run();
      },l.speed);
    }
 
    document.getElementById('begin').onclick=function(){
      start();
    }
 
    document.getElementById('pause').onclick=function() {
      clearInterval(timer);
    }
  </script>
</div>
 
</body>
</html>

看完上述內(nèi)容，是不是對(duì)js如何實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)標(biāo)題：js如何實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲
文章源于：http://jinyejixie.com/article28/gpeijp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站排名、、做網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

js如何實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲