JavaScript貪吃蛇小組件實(shí)例代碼

1 寫(xiě)在前面

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),江安企業(yè)網(wǎng)站建設(shè),江安品牌網(wǎng)站建設(shè),網(wǎng)站定制,江安網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,江安網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

看來(lái)《JavsScript高級(jí)編程》，想做一個(gè)小demo練練自己的手，選擇了貪吃蛇游戲。由于以前都是用c#寫(xiě)的，將貪吃蛇寫(xiě)到一個(gè)類里面，然后一個(gè)一個(gè)小方法的拆分，只向外提供需要提供的方法。這樣就可以將貪吃蛇作為一個(gè)模塊，任何地方都可以復(fù)用的。然而，用js進(jìn)行編寫(xiě)的時(shí)候，由于不能很好的利用js語(yǔ)言的特性進(jìn)行模塊化編程，所以第一版的實(shí)現(xiàn)完全采用面向過(guò)程的方式，將函數(shù)中所需要的變量全部聲明為全局變量。雖然這樣也能夠?qū)崿F(xiàn)功能，但是做不到復(fù)用，而且定義非常多的最頂層變量，污染了全局變量。寫(xiě)完之后，總想將自己寫(xiě)的重新封裝一次，達(dá)到只向外提供必須要提供的變量、或者功能函數(shù)接口。查了一些許多資料，對(duì)于js的封裝可以采用閉包的方式來(lái)進(jìn)行實(shí)現(xiàn)。通過(guò)在函數(shù)內(nèi)部聲明局部變量和閉包函數(shù)來(lái)當(dāng)做類型的私有變量和函數(shù)，然后通過(guò)this給對(duì)象向外提供需要開(kāi)發(fā)的接口。

2 貪吃蛇組件的使用

2.1 初級(jí)示例

示例代碼1如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>貪吃蛇組件</title>
</head>
<body>
 <canvas width="600" height="600" id="gameScense"></canvas>
</body>
<script src="SnakeGame.js"></script>
<script>
 var snakeGame = new SnakeGame("gameScense",{
 });
 snakeGame.startGame();
</script>
</html>

首先引入SnakeGame.js組件，然后通過(guò)實(shí)例化 SnakeGame對(duì)象，并向SnakeGame構(gòu)造函數(shù)傳入兩個(gè)參數(shù)。第一參數(shù)是canvas的id，第二個(gè)參數(shù)游戲配置的對(duì)象，如果為空的話，那么采用默認(rèn)的配置。最后，調(diào)用對(duì)象的startGame()方法，即可實(shí)現(xiàn)貪吃蛇的邏輯。默認(rèn)的方向控制鍵為上下左右按鍵、暫停為空格，效果如下：

JavaScript貪吃蛇小組件實(shí)例代碼

我們可以通過(guò)更改實(shí)例化時(shí)傳入的配置對(duì)象來(lái)實(shí)現(xiàn)對(duì)游戲的更多控制。

示例代碼2：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>貪吃蛇組件</title>
</head>
<body>
 <canvas width="600" height="600" id="gameScense"></canvas>
</body>
<script src="SnakeGame.js"></script>
<script>
 var snakeGame = new SnakeGame("gameScense",{
  snakeColor:"red",
  foodColor:"green",
  scenseColor:"blue",
  directionKey:[68,83,65,87],
 });
 snakeGame.startGame();
</script>
</html>

通過(guò)參數(shù)的名字可以知道，配置蛇、食物、游戲背景的顏色，以及控制游戲的方向鍵。配置方向順序?yàn)椤咀?，下，右，上】。效果如下?/p>

JavaScript貪吃蛇小組件實(shí)例代碼

當(dāng)然還有更加多的配置。還能夠定義分?jǐn)?shù)改變的回調(diào)的函數(shù)，以及游戲結(jié)束時(shí)的回調(diào)函數(shù)等。下面介紹一下配置參數(shù)，以及SnakeGame對(duì)象共有的方法。

2.2 公有方法

•startGame() ：開(kāi)始游戲。在該方法內(nèi)，會(huì)初始化各種設(shè)置。如，重置分?jǐn)?shù)，蛇身，速度等。

•changeGameStatus()：改變游戲狀態(tài)，即暫停和開(kāi)始，SnakeGame對(duì)象里面有一個(gè)私有變量，作為游戲的狀態(tài)變量。

2.3 配置游戲參數(shù)的對(duì)象gameConfigObj屬性、

gameConfigObj 對(duì)象一共該有10個(gè)屬性，3個(gè)回調(diào)函數(shù)

屬性

•size : 蛇塊和食物的大小，默認(rèn)20
•rowCount ：行，默認(rèn)30行
•colCount : 列，默認(rèn)30列
•snakeColor : 蛇身顏色，默認(rèn)green
•foodColor : 食物顏色，默認(rèn)yellow
•scenseColor : 游戲場(chǎng)景背景色，默black
•directionKey : 方向鍵，默認(rèn)[39, 40, 37, 38] 上下左右
•pasueKey : 暫停鍵，默認(rèn)32，空格鍵
•levelCount : 速度等級(jí)控制，默認(rèn)10.
•curSpeed ：初始速度，默認(rèn)200毫秒

回調(diào)函數(shù)

•onCountChange : 事件，每一個(gè)食物，分?jǐn)?shù)改變，并調(diào)用該方法，帶有一個(gè)參數(shù)（count)

•onGamePause : 事件，游戲狀態(tài)改變時(shí)，調(diào)用該方法，帶有一個(gè)參數(shù) 1，代表暫停，0 ，代表游戲在進(jìn)行。

•onGameOver : 事件，游戲結(jié)束時(shí)，調(diào)用該方法。

２.４使用進(jìn)階

通過(guò)上面的屬性我們可以設(shè)計(jì)一個(gè)交互性更加強(qiáng)的程序。代碼如下。

示例3

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>貪吃蛇組件</title>
 <style type="text/css">
  *{
   margin:0px;
   padding:0px;
  }
  #gamebd{
   width:850px;
   margin:50px auto;
  }
  #gameScense{
   background-color:green;
   float:left;
  }
  #gameSet{
   margin-left:10px;
   float:left;
  }
  .gameBoxStyle{
   margin-bottom:7px;
   padding:5px 10px;
  }
  .gameBoxStyle h4{
   margin-bottom:7px;
  }
  .gameBoxStyle p{
   line-height: 1.7em;
  }
  .gameBoxStyle input{
   margin-top:7px;
   background-color: white;
   border:1px gray solid;
   padding:3px 9px;
   margin-right:9px;
  }
  .gameBoxStyle input[type=text]{
   width:90px;
  }
  .gameBoxStyle input:hover{
   background-color: #e2fff2;
  }
  .gameBoxStyle #txtValue{
   color:red;
  }
 </style>
</head>
<body>
<div id="gamebd">
 <canvas id="gameScense" width="600" height="600">
 </canvas>
 <div id="gameSet">
  <div id="gameControl" class="gameBoxStyle">
   <h4>游戲控制</h4>
   <p>方向鍵：上,下,左,右</p>
   <p>開(kāi)始/暫停：空格</p>
  </div>
  <div id="gameStatus" class="gameBoxStyle">
   <h4>游戲狀態(tài)</h4>
   <p>用戶名：<input type="text" placeholder="輸入用戶名:" id="txtUserName" value="游客123"/> </p>
   <p>當(dāng)前用戶1得分：<span id="txtValue">0</span></p>
   <input type="button" value="開(kāi)始游戲" id="btnStart"/>
   <input type="button" value="暫停" id="btnPause"/>
  </div>
  <div id="game" class="gameBoxStyle">
   <h4>游戲記錄</h4>
   <a href="#" rel="external nofollow" rel="external nofollow" >查看歷史記錄</a>
  </div>
 </div>
</div>
<script src="js/SnakeGame.js"></script>
</body>
<script src="SnakeGame.js"></script>
<script>
 var btnStart=document.getElementById("btnStart");
 var btnPasue=document.getElementById("btnPause");
 var gameSnake = new SnakeGame("gameScense",{
  snakeColor:"red",
  onCountChange:function(count){
   var txtScore=document.getElementById("txtValue");
   txtScore.innerText=count.toString( );
   txtScore=null;
  },
  onGamePause:function(status){
   if(status){
    btnPasue.value = "開(kāi)始";
   }else {
    btnPasue.value = "暫停"
   }
  },
  onGameOver:function (status) {
   alert("游戲結(jié)束");
  }
 });
 btnStart.onclick=function(event){
  if(checkUserName()){
   gameSnake.startGame();
   btnStart.blur();
  }
 }
 btnPasue.onclick=function(event) {
  gameSnake.changeGameStatus();
  btnStart.blur();
 }
 function checkUserName(){
  var txtUserName = document.getElementById("txtUserName");
  if(txtUserName.value.length==0){
   alert("用戶名不能為空");
   return false;
  }else {
   return true;
  }
 }
</script>
</html>

上面的代碼通過(guò)設(shè)置OnChangeCount、onGamePause、onGameOver，三個(gè)回調(diào)函數(shù)，實(shí)現(xiàn)界面與組件的交互。效果如下：

JavaScript貪吃蛇小組件實(shí)例代碼

在《JavaScript高級(jí)編程》這本書(shū)中說(shuō)道一個(gè)模塊模式，但是這種模式是單例模式，也就是閉包最后返回一個(gè)字面量的對(duì)象。但是我需要在一個(gè)頁(yè)面中能夠同時(shí)開(kāi)啟兩個(gè)貪吃蛇的窗口，兩個(gè)游戲通過(guò)設(shè)置配置不同的方向鍵和按鈕操作，實(shí)現(xiàn)兩個(gè)人同時(shí)一起玩。所以，在實(shí)現(xiàn)SnakeGame組件時(shí)，沒(méi)有采用道格拉斯所說(shuō)的模塊模式。下面演示一下，如何在一個(gè)頁(yè)面中，讓兩個(gè)人同時(shí)一起玩游戲。代碼如下：

示例4

首先建立一個(gè)html文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Jaume's貪吃蛇</title>
 <link rel="stylesheet" href="css/gameStyle.css" rel="external nofollow" >
</head>
<body>
<div id="gamebd">
 <canvas id="gameScense" width="600" height="600">
 </canvas>
 <canvas id="gameScense1" width="600" height="600" >
 </canvas>
 <div id="gameSet">
  <div id="gameControl" class="gameBoxStyle">
   <h4>游戲控制</h4>
   <p>方向鍵：上,下,左,右</p>
   <p>開(kāi)始/暫停：空格</p>
  </div>
  <div id="gameStatus" class="gameBoxStyle">
   <h4>游戲狀態(tài)</h4>
   <p>當(dāng)前用戶1得分：<span id="txtValue">0</span></p>
   <p>當(dāng)前用戶2得分：<span id="txtValue1">0</span></p>
   <input type="button" value="開(kāi)始游戲" id="btnStart"/>
  </div>
  <div id="game" class="gameBoxStyle">
   <h4>游戲記錄</h4>
   <a href="#" rel="external nofollow" rel="external nofollow" >查看歷史記錄</a>
  </div>
 </div>
</div>
<script src="js/SnakeGame.js"></script>
<script src="js/UIScript.js"></script>
</body>
</html>

樣式文件如下：

*{
 margin:0px;
 padding:0px;
}
#gamebd{
 /*width:850px;*/
 /*margin:50px auto;*/
 width:100%;
}
#gameScense{
 background-color:green;
 float:left;
}
#gameSet{
 margin-left:10px;
 float:left;
}
.gameBoxStyle{
 margin-bottom:7px;
 padding:5px 10px;
}
.gameBoxStyle h4{
 margin-bottom:7px;
}
.gameBoxStyle p{
 line-height: 1.7em;
}
.gameBoxStyle input{
 margin-top:7px;
 background-color: white;
 border:1px gray solid;
 padding:3px 9px;
 margin-right:9px;
}
.gameBoxStyle input[type=text]{
 width:90px;
}
.gameBoxStyle input:hover{
 background-color: #e2fff2;
}
.gameBoxStyle #txtValue{
 color:red;
}

在html中拖入了兩個(gè)文件，一個(gè)是貪吃蛇組件，另一個(gè)是UIScript.js，其中的代碼如下：

/**
 * Created by tjm on 8/16/2017.
 */
var btnStart=document.getElementById("btnStart");
var gameSnake = new SnakeGame("gameScense",{
 snakeColor:"red",
 directionKey:[68,83,65,87],
 pauseKey:81,
 onCountChange:function(count){
  var txtScore=document.getElementById("txtValue");
  txtScore.innerText=count.toString( );
  txtScore=null;
 },
 onGameOver:function (status) {
  alert("游戲結(jié)束");
 }
});
var gameSnake1 = new SnakeGame("gameScense1",{
 snakeColor:"green",
 size:20,
 onCountChange:function(count){
  var txtScore=document.getElementById("txtValue1");
  txtScore.innerText=count.toString();
  txtScore=null;
 },
 onGameOver:function (status) {
  alert("游戲結(jié)束");
 }
});
btnStart.onclick=function(event){
  gameSnake.startGame();
  gameSnake1.startGame();
  btnStart.blur();
}

實(shí)例化兩個(gè)SnakeGame對(duì)象，一個(gè)對(duì)象使用默認(rèn)的上下左右鍵和空格鍵作為方向鍵和暫停鍵，而另一個(gè)使用了，W、A、S、D 以及 Q 作為方向鍵和暫停鍵。效果如下：

JavaScript貪吃蛇小組件實(shí)例代碼

嗯哼，沒(méi)錯(cuò)，完美實(shí)現(xiàn)了。使用SnakeGame這個(gè)組件，創(chuàng)建貪吃蛇游戲就是如此的簡(jiǎn)單。下面簡(jiǎn)單介紹一下，組件的實(shí)現(xiàn)方式。

３貪吃蛇組件實(shí)現(xiàn)方式

在上一節(jié)中就提到過(guò)，沒(méi)有采用過(guò)道哥拉斯的設(shè)計(jì)模式，下面給出貪吃蛇設(shè)計(jì)結(jié)構(gòu)。具體的源代碼，可以在后面的鏈接中進(jìn)行下載。代碼如下：

/**
 * Created by tjm on 8/18/2017.
 */
var SnakeGame = function () {
 /*蛇塊和食物組件類*/
 function SnakeBlock(row,col){
  this.row=row;
  this.col=col;
 }
 SnakeBlock.prototype.draw = function(graphic,color,size){
  graphic.fillStyle=color;
  graphic.fillRect(size*this.col,size*this.row,size-2,size-2);
 }
 SnakeBlock.prototype.clearDraw = function(graphic,color,size){
  graphic.fillStyle=color;
  graphic.fillRect(size*this.col,size*this.row,size,size);
 }
 SnakeBlock.prototype.equal = function(snakeBlock){
  if(snakeBlock.row==this.row && snakeBlock.col==this.col){
   return true;
  }else{
   return false;
  }
 }
 /*貪吃蛇組件類*/
 function SnakeGame(gameScenseId, gameConfigObj) {
  // 私有屬性
  var gameScense = document.getElementById(gameScenseId);
  var graphic = gameScense.getContext("2d");
  var count = 0;
  var snake;
  var curFood;
  var runId;
  var isMoved = false;//方向改變后，如果沒(méi)有移動(dòng)則方向鍵暫時(shí)失效。
  var gameStatus = false;
  var curDirection = 1;
  var size = gameConfigObj.size || 20;
  var rowCount = gameConfigObj.rowCount || 30;
  var colCount = gameConfigObj.colCount || 30;
  var snakeColor = gameConfigObj.snakeColor || "green";
  var foodColor = gameConfigObj.foodColor || "yellow";
  var scenseColor = gameConfigObj.scenseColor || "black";
  var directionKey = gameConfigObj.directionKey || [39, 40, 37, 38];
  var pauseKey = gameConfigObj.pauseKey || 32;
  var levelCount = gameConfigObj.levelCount || 10;
  var curSpeed = gameConfigObj.curSpeed || 200;
  //公開(kāi)事件
  var onCountChange = gameConfigObj.onCountChange || null; //帶有一個(gè)參數(shù)
  var onGamePause = gameConfigObj.onGamePause || null; //帶有一個(gè)參數(shù)
  var onGameOver = gameConfigObj.onGameOver || null;
  //判斷
  if(gameScense.width != size*rowCount || gameScense.height != size*colCount){
   throw "場(chǎng)景大小不等于行列大小*蛇塊大小";
  }
  //特權(quán)方法
  this.startGame = startGame;
  this.changeGameStatus = changeGameStatus;
  //注冊(cè) dom 鍵盤事件
  var preFunc = document.onkeydown;
  document.onkeydown = function (e) {
   var key = (e || event).keyCode;
   handleKeyInput(key);
   if (typeof preFunc == "function") {
    preFunc(e);
   }
  }
  //私有方法
  /*初始化蛇身*/
  function initSnake(){
   ···
  }
  /*繪制場(chǎng)景背景色*/
  function initScense(){
   ···
  }
  /*產(chǎn)生食物*/
  function genFood(){
   ···
  }
  /*吃食物*/
  function eatFood(snakeHead){
   ···
  }
  /*判斷游戲是否結(jié)束*/
  function gameOver(){
   ···
  }
  /*蛇移動(dòng)*/
  function snakeMove(){
   ···
  }
  function changeSpeed(){
   ···
  }
  function handleKeyInput(key){
   ···
  }
  function initGame(){
   ···
  }
  function triggerEvent(callback,argument){
   ···
  }
  function runGame(){
   ···
  }
  function pauseGame() {
   ···
  }
  function changeGameStatus(){
   ···
  }
  function startGame(){
   ···
  }
 }
 return SnakeGame; //最后返回一個(gè)組件構(gòu)造函數(shù)
}();

上面有一個(gè)很重要的地方，就是鍵盤注冊(cè)的代碼,單獨(dú)列出來(lái)分析一下。

var preFunc = document.onkeydown;
  document.onkeydown = function (e) {
   var key = (e || event).keyCode;
   handleKeyInput(key);
   if (typeof preFunc == "function") {
    preFunc(e);
   }
  }

該段代碼的邏輯是，首先判斷在 document 上是否注冊(cè)了onkeydown 事件，如果注冊(cè)了該事件，則保存所引用的事件處理程序，然后重置onkeydown事件程序，然后在新的事件處理程序中，調(diào)用先前的事件處理程序，這樣就實(shí)現(xiàn)了事件觸發(fā)后，調(diào)用所有監(jiān)聽(tīng)該事件處理程序，而不是直接覆蓋。

另外關(guān)于貪吃蛇的設(shè)計(jì)邏輯，可以參看我另外一篇文章，個(gè)人覺(jué)得講的非常詳細(xì)了，文章：基于控制臺(tái)實(shí)現(xiàn)貪吃蛇游戲

3 小結(jié)

通過(guò)這次貪吃蛇組件的設(shè)計(jì)，對(duì) js 的模塊化設(shè)計(jì)稍微了解了一下，但是，我也不知道上文所實(shí)現(xiàn)的貪吃蛇模塊有哪些缺陷，希望有大神看到這篇文章，能給一些指導(dǎo)。當(dāng)然了，該組件還可以進(jìn)行進(jìn)一步的擴(kuò)展，比如將游戲的方塊，替換成圖片。有興趣的可以從下面的鏈接進(jìn)行下載，更改后別忘了分享哦。

源碼下載鏈接：https://github.com/StartAction/SnakeGame

以上所述是小編給大家介紹的JavaScript貪吃蛇小組件實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

網(wǎng)頁(yè)名稱：JavaScript貪吃蛇小組件實(shí)例代碼
網(wǎng)址分享：http://aaarwkj.com/article28/igjojp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、面包屑導(dǎo)航、靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、小程序開(kāi)發(fā)、網(wǎng)站策劃

聲明：本網(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í)需注明來(lái)源：創(chuàng)新互聯(lián)

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

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

JavaScript貪吃蛇小組件實(shí)例代碼