jQuery實現貪吃蛇遊戲

時間  2019-12-02
標籤 jquery 實現 貪吃 遊戲 欄目 JQuery 简体版
原文   原文鏈接

  貪吃蛇的遊戲相信你們都玩過。在那個水果機尚未流行，人手一部諾基亞的時代，貪吃蛇是手機中的必備遊戲。筆者閒的無聊的時候就拿出手機來玩上幾局，挑戰一下本身的記錄。   後來上大學了，用c語言作過貪吃蛇的遊戲，不過主要是經過函數來控制（PS：如今讓我看代碼都看不懂(⊙﹏⊙)）。如今學習前端框架以後，經過jQuery來實現一個貪吃蛇的遊戲效果，雖然遊戲界面比（bu）較（ren）簡（zhi）陋（shi），可是主要學習一下游戲中面向對象和由局部到總體的思想。javascript

設計思想

  在開始寫代碼前首先讓咱們來構思一下總體遊戲的實現過程： css

Snake

須要的對象

  首先既然是貪吃蛇，那麼遊戲中確定要涉及到兩個對象，一個是蛇的對象，另外一個是食物的對象。食物對象確定要有一個屬性就是食物的座標點，蛇對象有一個屬性是一個數組，用來存放蛇身體全部的座標點。html

如何移動

  另外全局須要有一個定時器來週期性的移動蛇的身體。因爲蛇的身體彎彎曲曲有各類不一樣的形狀，所以咱們只處理蛇的頭部和尾部，每次移動都根據移動的方向的不一樣來添加新的頭部，再把尾部擦去，看起來就像蛇在向前爬行同樣。前端

方向控制

  因爲蛇有移動的方向，所以咱們也須要在全局定義一個方向對象，對象中有上下左右所表明的值。同時，在蛇對象的屬性中咱們也須要定義一個方向屬性，用來表示當前蛇所移動的方向。java

碰撞檢測

  在蛇向前爬行的過程當中，會遇到三種不一樣的狀況，須要進行不一樣的判斷檢測。第一種狀況是吃到了食物，這時候就須要向蛇的數組中添加食物的座標點；第二種狀況是碰到了本身的身體，第三種是碰到了邊界，這兩種狀況都致使遊戲結束；若是不是上面的三種狀況，蛇就能夠正常的移動。git

開始編程

  總體構思有了，下面就開始寫代碼了。github

搭建幕布

  首先整個遊戲須要一個搭建活動的場景，咱們經過一個表格佈局來做爲整個遊戲的背景。編程

<style type="text/css"> #pannel table{ border-collapse:collapse; } #pannel td{ width: 10px; height: 10px; border: 1px solid #000; } #pannel td.food{ background: green; } #pannel td.body{ background: #f60; } </style>
<div id="pannel">
</div>
<select name="" id="palSize">
  <option value="10">10*10</option>
  <option value="20">20*20</option>
  <option value="40">30*30</option>
</select>
<select name="" id="palSpeed">
  <option value="500">速度-慢</option>
  <option value="250">速度-正常</option>
  <option value="100">速度-快</option>
</select>
<button id="startBtn">開始</button>
複製代碼

  pannel就是咱們的幕布，咱們在這個裏面用td標籤來畫上一個個的「像素點」。咱們用兩種樣式來表現不一樣的對象，.body表示蛇的身體的樣式，.food表示食物的樣式。數組

var settings = {
  // pannel面板的長度
  pannelSize: 10,
  // 貪吃蛇移動的速度
  speed: 500,
  // 貪吃蛇工做線程
  workThread: null,
};
function setPannel(size){
  var content = [];
  content.push('<table>');
  for(let i=0;i<size;i++){
    content.push('<tr>');
    for(let j=0;j<size;j++){
      content.push('<td class="td_'+i+'_'+j+'"></td>');
    }
    content.push('</tr>');
  }
  content.push('</table>');
  $('#pannel').html(content.join(''));
}
setPannel(settings.pannelSize);
複製代碼

  咱們定義了一個全局的settings用來存放全局性的變量，好比幕布的大小、蛇移動的速度和工做的線程。而後經過一個函數把幕布畫了出來，最後的效果就是這樣： bash

curtain

方向和定位

  既然咱們的「舞臺」已經搭建完了，怎麼來定義咱們「演員」的位置和移動的方向呢。首先定義一個全局的方向變量，對應的數值就是咱們的上下左右方向鍵所表明的keyCode。

var Direction = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39,
};
複製代碼

  咱們在上面畫幕布的時候經過兩次遍歷畫出了一個相似於中學裏學的座標系，有X軸和Y軸。若是每次都用{x:x,y:y}來表示會很（mei）麻（bi）煩（ge），咱們能夠定義一個座標點對象。

function Position(x,y){
  // 距離X軸長度，取值範圍0~pannelSize-1
  this.X = x || 0;
  // 距離Y軸長度，取值範圍0~pannelSize-1
  this.Y = y || 0;
}
複製代碼

副咖--食物

  既然定義好了座標點對象，那麼能夠先來看一下簡單的對象，就是咱們的食物（Food）對象，上面說了，它有一個重要的屬性就是它的座標點。

function Food(){
  this.pos = null;
  // 隨機產生Food座標點，避開蛇身
  this.Create = function(){
    if(this.pos){
      this.handleDot(false, this.pos, 'food');
    }
    let isOk = true;
    while(isOk){
      let x = parseInt(Math.random()*settings.pannelSize),
          y = parseInt(Math.random()*settings.pannelSize);
      if(!$('.td_'+x+'_'+y).hasClass('body')){
        isOk = false;
        let pos = new Position(x, y);
        this.handleDot(true, pos, 'food');
        this.pos = pos;
      }
    }
  };
  // 畫點
  this.handleDot = function(flag, dot, className){
    if(flag){
      $('.td_'+dot.X+'_'+dot.Y).addClass(className);
    } else {
      $('.td_'+dot.X+'_'+dot.Y).removeClass(className);
    }
  };
}
複製代碼

  既然食物有了座標點這個屬性，那麼咱們何時給他賦值呢？咱們知道Food是隨機產生的，所以咱們定義了一個Create函數用來產生Food的座標點。可是產生的座標點又不能在蛇的身體上，因此經過一個while循環來產生座標點，若是座標點正確了，就終止循環。此外爲了方便咱們統一處理座標點的樣式，所以定義了一個handleDot函數。

主咖--蛇

  終於到了咱們的主咖，蛇。首先定義一下蛇基本的屬性，最重要的確定是蛇的body屬性，每次移動時，都須要對這個數組進行一些操做。其次是蛇的方向，咱們給它一個默認向下的方向。而後是食物，在蛇的構造函數中咱們傳入食物對象，在後續移動時須要判斷是否吃到食物。

function Snake(myFood){
  // 蛇的身體
  this.body = [];
  // 蛇的方向
  this.dir = Direction.DOWN;
  // 蛇的食物
  this.food = myFood;
  // 創造蛇身
  this.Create = function(){
    let isOk = true;
    while(isOk){
      let x = parseInt(Math.random()*(settings.pannelSize-2))+1,
          y = parseInt(Math.random()*(settings.pannelSize-2))+1;
      console.log(x,y)
      if(!$('.td_'+x+'_'+y).hasClass('food')){
        isOk = false;
        let pos = new Position(x, y);
        this.handleDot(true, pos, 'body')
        this.body.push(pos);
      }
    }
  };
  this.handleDot = function(flag, dot, className){
    if(flag){
      $('.td_'+dot.X+'_'+dot.Y).addClass(className);
    } else {
      $('.td_'+dot.X+'_'+dot.Y).removeClass(className);
    }
  };
}
複製代碼

移動函數處理

  下面對蛇移動的過程進行處理，因爲咱們每次都採用添頭去尾的方式移動，所以咱們每次只須要關注蛇的頭和尾。咱們約定數組的第一個元素是頭，最後一個元素是尾。

this.Move = function(){
  let oldHead = Object.assign(new Position(), this.body[0]),
      oldTail = Object.assign(new Position(), this.body[this.body.length - 1]),
      newHead = Object.assign(new Position(), oldHead);
  switch(this.dir){
    case Direction.UP:
      newHead.X = newHead.X - 1;
      break;
    case Direction.DOWN:
      newHead.X = newHead.X + 1;
      break;
    case Direction.LEFT:
      newHead.Y = newHead.Y - 1;
      break;
    case Direction.RIGHT:
      newHead.Y = newHead.Y + 1;
      break;
    default:
      break;
  }
  // 數組添頭
  this.body.unshift(newHead);
  // 數組去尾
  this.body.pop();
};
複製代碼

檢測函數處理

  這樣咱們對蛇身數組就處理完了。可是咱們還須要對新的頭（newHead）進行一些碰撞檢測，判斷新頭部的位置上是否有其餘東西（碰撞檢測）。

// 食物檢測
this.eatFood = function(){
  let newHead = this.body[0];
  if(newHead.X == this.food.pos.X&&newHead.Y == this.food.pos.Y){
    return true;
  } else {
    return false;
  }
};
// 邊界檢測
this.konckWall = function(){
  let newHead = this.body[0];
  if(newHead.X == -1 || 
     newHead.Y == -1 || 
     newHead.X == settings.pannelSize || 
     newHead.Y == settings.pannelSize ){
    return true;
  } else {
    return false;
  }
};
// 蛇身檢測
this.konckBody = function(){
  let newHead = this.body[0],
      flag = false;
  this.body.map(function(elem, index){
    if(index == 0)
      return;
    if(elem.X == newHead.X && elem.Y == newHead.Y){
      flag = true;
    }
  });
  return flag;
};
複製代碼

從新繪製

  所以咱們須要對Move函數進行一些擴充：

this.Move = function(){
  // ...數組操做
  if(this.eatFood()){
    this.body.push(oldTail);
    this.food.Create();
    this.rePaint(true, newHead, oldTail);
  } else if(this.konckWall() || this.konckBody()) {
    this.Over();
  } else {
    this.rePaint(false, newHead, oldTail);
  }
};
this.Over = function(){
  clearInterval(settings.workThread);
  console.log('Game Over');
};
this.rePaint = function(isEatFood, newHead, oldTail){
  if(isEatFood){
    // 加頭
    this.handleDot(true, newHead, 'body');
  } else {
    // 加頭
    this.handleDot(true, newHead, 'body');
    // 去尾
    this.handleDot(false, oldTail, 'body');
  }
};
複製代碼

  由於在Move函數處理數組的後咱們的蛇身尚未從新繪製，所以咱們很巧妙地判斷若是是吃到食物的狀況，在數組中就把原來的尾部添加上，這樣就達到了吃食物的效果。同時咱們定義一個rePaint函數進行頁面的重繪。

Repaint

遊戲控制器

  咱們的「幕布」、「演員」和「動做指導」都已經到位，那麼，咱們如今就須要一個「攝影機」進行拍攝，讓它們都開始「幹活」。

function Control(){
  this.snake = null;
  // 按鈕的事件綁定
  this.bindClick = function(){
    var that = this;
    $(document).on('keydown', function(e){
        if(!that.snake)
          return;
        var canChangrDir = true;
        switch(e.keyCode){
          case Direction.DOWN:
            if(that.snake.dir == Direction.UP){
              canChangrDir = false;
            }
            break;
          case Direction.UP:
            if(that.snake.dir == Direction.DOWN){
              canChangrDir = false;
            }
            break;
          case Direction.LEFT:
            if(that.snake.dir == Direction.RIGHT){
              canChangrDir = false;
            }
            break;
          case Direction.RIGHT:
            if(that.snake.dir == Direction.LEFT){
              canChangrDir = false;
            }
            break;
          default:
            canChangrDir = false;
            break;
        }
        if(canChangrDir){
          that.snake.dir = e.keyCode;
        }
    });
    $('#palSize').on('change',function(){
      settings.pannelSize = $(this).val();
      setPannel(settings.pannelSize);
    });
    $('#palSpeed').on('change',function(){
      settings.speed = $(this).val();
    });
    $('#startBtn').on('click',function(){
      $('.food').removeClass('food');
      $('.body').removeClass('body');
      that.startGame();
    });
  };
  // 初始化
  this.init = function(){
    this.bindClick();
    setPannel(settings.pannelSize);
  };
  // 開始遊戲
  this.startGame = function(){
    var food = new Food();
    food.Create();
    var snake = new Snake(food);
    snake.Create();
    this.snake =snake;
    settings.workThread = setInterval(function(){
      snake.Move();
    },settings.speed);
  }
  this.init();
}
複製代碼

  咱們給document綁定一個keydown事件，當觸發按鍵時改變蛇的移動方向，可是若是和當前蛇移動方向相反時就直接return。最後的效果以下：

effect
能夠戳這裏查看 實現效果

總結

  實現了貪吃蛇的一些基本功能，好比移動、吃點、控制速度等，頁面也比較的簡單，就一個table、select和button。後期能夠添加一些其餘的功能，好比有計分、關卡等，也能夠添加多個點，有的點吃完直接GameOver等等。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程