快捷導(dǎo)航

JavaScript面向?qū)ο缶幊绦∮螒?--貪吃蛇代碼實(shí)例

更新時(shí)間：2019年05月15日 11:34:21 作者：邢晉宇

這篇文章主要介紹了JavaScript貪吃蛇的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1 面向?qū)ο缶幊趟枷朐诔绦蝽?xiàng)目中有著非常明顯的優(yōu)勢(shì):
1- 1 代碼可讀性高.由于繼承的存在，即使改變需求，那么維護(hù)也只是在局部模塊
1-2 維護(hù)非常方便并且成本較低。

2 這個(gè)demo是采用了面向?qū)ο蟮木幊趟枷? 用JavaScript 語(yǔ)言編寫(xiě)的游戲小程序--貪吃蛇.
代碼注釋詳細(xì),邏輯清晰 . 非常適合新手前端開(kāi)發(fā)者, 鍛煉JavaScript語(yǔ)言的面向?qū)ο蟮木幊趟枷?
該小Demo已上傳GitHub,歡迎下載! 覺(jué)得好的話,隨手給個(gè)star, 您的star是我最大的動(dòng)力!

https://github.com/XingJYGo/snakePlay#javascript-經(jīng)典面向?qū)ο骴emo-貪吃蛇

代碼展示:
代碼結(jié)構(gòu):
--index.html 地圖頁(yè)面,展示蛇和食物,進(jìn)行游戲
--food.js 構(gòu)造食物對(duì)象
--game.js 構(gòu)造游戲?qū)ο?br /> --snake.js 構(gòu)造蛇對(duì)象
--tool.js 常用數(shù)據(jù)工具封裝

--index.html 地圖頁(yè)面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  #map{
   width: 500px;
   height: 500px;
   background-color: lightblue;
   position: relative;
  }
  
 </style>
</head>
<body>
<div id="map">
 
</div>
<button id="btn">模擬蛇吃到食物</button>
<script src="tool.js"></script>
<script src="food.js"></script>
<script src="snake.js"></script>
<script src="game.js"></script>
<script>
 
////==========前后方向設(shè)定后 ==================
var game = new Game();
game.start();
 
 
 
</script>
 
</body>
</html>

--food.js 構(gòu)造食物對(duì)象

// 封裝一個(gè)食物對(duì)象
//沙箱模式
(function(){
 var container; //用于存儲(chǔ)之前的食物
 function Food(option) {
  //防止用戶不傳參數(shù)會(huì)報(bào)錯(cuò)
  option = option || {};
  this.width = option.width || 20;
  this.height = option.height || 20;
  this.bgc = option.bgc || 'orange';
  this.x = option.x || 0;
  this.y = option.y || 0;
  this.borderRadius = option.borderRadius |10;
 }
 
 Food.prototype.render = function () {
  //每一次渲染新的之前就把原來(lái)的移除掉
  if(container){
   map.removeChild(container);
  }
  // 創(chuàng)建食物對(duì)象
  var food = document.createElement('div');
  //存到全局變量里
  container = food;
  food.style.width = this.width + 'px';
  food.style.height = this.height + 'px';
  food.style.backgroundColor = this.bgc;
  food.style.position = 'absolute';
   //獲得隨機(jī)位置
   //由于要讓食物的位置在每一個(gè)格子里面,所有獲取隨機(jī)數(shù)的算法要重新計(jì)算
  this.x = Tool.getRandom(0, (map.offsetWidth/ this.width-1)) * this.width;
  this.y = Tool.getRandom(0, (map.offsetHeight/ this.height-1)) * this.height;
  food.style.left = this.x + 'px';
  food.style.top = this.y + 'px';
  food.style.borderRadius = this.borderRadius + 'px';
  //渲染上食物
  map.appendChild(food);
 }
 
 //因?yàn)橐谌质褂肍ood,需要把Food拿到全局中
 window.Food = Food;
})();

--game.js 構(gòu)造游戲?qū)ο?/p>

(function () {
//  1 由于游戲?qū)ο笠刂粕吆褪澄?
//   所以游戲?qū)ο髴?yīng)該擁有蛇的實(shí)例和食物的實(shí)例
  //存儲(chǔ)定時(shí)器的id
  var timeid;
  function Game() {
    this.snake = new Snake();
    this.food = new Food();
  }
 
  //2 開(kāi)始游戲
  Game.prototype.start = function () {
    this.snake.render();
    this.food.render();
 
    // 2-1 游戲一開(kāi)始,蛇和食物就渲染出來(lái)
    timeid = setInterval(function () {
      //2-2 -1 蛇的數(shù)據(jù)改變
      this.snake.move();
      // 2-3 判斷蛇是否到達(dá)邊界
      var snakeHead = this.snake.body[0];
      //2-3-1 求蛇頭可以移動(dòng)的水平/垂直坐標(biāo)的最大位置
      var maxX = map.offsetWidth/this.snake.width -1;
      var maxY = map.offsetHeight/this.snake.height -1;
      if (snakeHead.x <0 ||snakeHead.x > maxX ||snakeHead.y <0 ||snakeHead.y > maxY){
        clearInterval(timeid);
        alert("gave over");
        //注:當(dāng)X超出范圍,代碼應(yīng)立即終止,
        // 防止2-2-2 渲染出下一個(gè)盒子.展示出來(lái)
        return;
      }
 
 
      //2-4 蛇吃食物
      //依據(jù): 蛇頭的坐標(biāo) 和 食物的坐標(biāo)重合
      var snakeX = snakeHead.x * this.snake.width;
      var snakeY = snakeHead.y * this.snake.height;
      var foodX = this.food.x;
      var foodY = this.food.y;
 
      //如果符合條件, 證明吃到了食物
       if (snakeX === foodX && snakeY === foodY){
         // 2-4-1 食物消失, 渲染新食物
         this.food.render();
         // 2-4-2 蛇,變長(zhǎng)
         //  其實(shí)就是往snake.body.push個(gè)新對(duì)象
         //  bug: 為了解決新添加蛇節(jié)閃下的問(wèn)題, 把蛇的最后一節(jié)對(duì)象,作為新的對(duì)象.
         var last = this.snake.body[this.snake.body.length -1];
         this.snake.body.push({
           x:last.x,
           y:last.y,
           col:last.col
         })
         // this.snake.body.push(last);
         // 注:last本身已經(jīng)在數(shù)組中了,
       }
      //2-2 -2渲染到頁(yè)面上,真正看到的蛇動(dòng)起來(lái)
      this.snake.render();
 
    }.bind(this), 150)
 
    // 3 給頁(yè)面注冊(cè)鍵盤(pán)按下的事件
    // 3-1 監(jiān)聽(tīng)用戶是否按下了上,下,左,右的按鍵
 
    document.onkeydown = function(e){
      // console.log(this);
      e = e || window.event;
      console.log(e.keyCode);
      // 左37 上38 右39  下40
      switch(e.keyCode){
 
        case 37:
          //3-11 需要找到蛇,修改蛇的direction屬性
          //防止原地掉頭
          if(this.snake.direction === 'right'){
            return;
          }
          this.snake.direction = 'left';
          break;
        case 38:
          if(this.snake.direction === 'bottom'){
            return;
          }
          this.snake.direction = 'top';
          break;
        case 39:
          if(this.snake.direction === 'left'){
            return;
          }
          this.snake.direction = 'right';
          break;
        case 40:
          if(this.snake.direction === 'top') return; //如果if中只有一行代碼就可以不寫(xiě)花括號(hào),然后這一行代碼要緊跟在if后面記得加分號(hào)
          this.snake.direction = 'bottom';
          break;
 
      }
    }.bind(this);
 
 
 
  };
 
  //2-2 蛇變量賦予全局
  window.Game = Game;
 
})();

--snake.js 構(gòu)造蛇對(duì)象

(function () {
  var arr = []; //用于存儲(chǔ)蛇的每一節(jié)數(shù)據(jù)
 
  // 1 創(chuàng)建蛇對(duì)象
  function Snake(option) {
    option = option || {};
    this.width = option.width || 20;
    this.height = option.height || 20;
    this.body = [
      {x: 3, y: 2, col: 'green'},//蛇頭的位置和顏色
      {x: 2, y: 2, col: 'orange'},//蛇頭身體的位置和顏色
      {x: 1, y: 2, col: 'orange'}];
    this.direction = option.direction || 'right';
  }
 
 
  //2 渲染蛇的方法
  Snake.prototype.render = function () {
    // 2-3 為了防止多個(gè)sanke渲染到頁(yè)面上,一渲染之前先清除掉原來(lái)的
    for (var i = 0; i < arr.length; i++) {
      map.removeChild(arr[i]);//移除頁(yè)面上的蛇節(jié)
    }
    arr.splice(0,arr.length);//蛇節(jié)都被移除掉了,那么數(shù)組中也應(yīng)該都移除.
 
    //2-1 根據(jù)body中的個(gè)數(shù),動(dòng)態(tài)的創(chuàng)建蛇節(jié)
    this.body.forEach(function (item, index) {
      //2-0 動(dòng)態(tài)的創(chuàng)建蛇節(jié)
      var snakeNode = document.createElement('div');
      //2-4 遍歷添加蛇節(jié)新數(shù)據(jù)
      arr.push(snakeNode);
      snakeNode.style.width = this.width + 'px';
      snakeNode.style.height = this.height + 'px';
      snakeNode.style.position = 'absolute';
      snakeNode.style.left = item.x * this.width + 'px';
      snakeNode.style.top = item.y * this.height + 'px';
      snakeNode.style.backgroundColor = item.col;
      map.appendChild(snakeNode);
 
    }.bind(this))
    //  2-2 上面的this是在snake里面,指向snake.`
    //  否則,默認(rèn)指向window
  };
 
 
 
  //3 蛇移動(dòng)的方法:body 頭數(shù)組賦值給身體.
  Snake.prototype.move = function () {
    //3-1 蛇后面的數(shù)據(jù)給前面
    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;
    }
  //  3-2暫時(shí)蛇頭往右走
  //   this.body[0].x +=1;
  //
  //3-2蛇頭一定的位置,要根據(jù)蛇的方向來(lái)決定
    switch(this.direction){
 
      case 'left':
        this.body[0].x -= 1;
        break;
      case 'right':
        this.body[0].x += 1;
        break;
      case 'top':
        this.body[0].y -= 1;
        break;
      case 'bottom':
        this.body[0].y += 1;
        break;
    }
  };
 
 
 
  //賦予全局變量
  window.Snake = Snake;
})();

--tool.js 常用數(shù)據(jù)工具封裝

//用于存放一些常用的功能性的函數(shù)
 
//  function getRandom(){
//
// }
var Tool = {
 //獲取min - max之間的隨機(jī)整數(shù)
 getRandom: function(min, max){
  return Math.floor(Math.random() * (max - min + 1)) + min;
 }
}
 
// Tool.getRandom()

以上所述是小編給大家介紹的JavaScript貪吃蛇的實(shí)現(xiàn)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: