在該游戲中，玩家操縱一條貪吃的蛇在長方形場地里行走，貪吃蛇按玩家所按的方向鍵折行，蛇頭吃到食物(豆)后，分數(shù)加10分，蛇身會變長，如果貪吃蛇碰上墻壁或者自身的話，游戲就結束了(當然也可能是減去一條生命)。
貪吃蛇游戲的運行界面如上圖所示。
01、貪吃蛇游戲設計的思路
把游戲畫面看成40×30的方格。食物（豆）和組成蛇的塊均在屏幕上占據(jù)一個方格。游戲設計中主要用到的4個類如下。
Farm類：主要用來顯示場地，隨機生成食物，初始化一條蛇。
Food類：抽象了食物(豆)的屬性和動作。
Snake類：抽象了貪吃蛇的屬性和動作，調用Block類來組成蛇，并處理鍵盤輸入事件和蛇的移動。
Block類：表示組成蛇的塊(實心圓)。一條蛇可以看成由許多“塊”(或稱節(jié))拼湊而成，塊是蛇身上最小的單位。
02、貪吃蛇游戲設計的步驟
游戲頁面index.html
<!DOCTYPE html>
<html lang = "en">
< head >
<meta charset ="UTF - 8"
< title>小游戲之貪吃蛇</title>
< style>
# canvas{border: 3px solid red;</style>
</head>
< body>
<canvas id='canvas'width=800'height =00'></canvas><div id="textmsg">分數(shù)</div>
</body 設計腳本
1． 食物(豆)類(Food)設計
在此游戲中，首先會在場地的特定位置出現(xiàn)一個豆，豆要不斷被蛇吃掉，當豆被吃掉后，原豆消失，又在新的位置出現(xiàn)新的豆。這些豆都是由豆(Food)類創(chuàng)建的對象。
foodInit()函數(shù)用于在屏幕上顯示一個豆(實心圓)，設計方法是直接在場地(canvas)上畫一個實心圓。
equal()函數(shù)用于判斷是否與蛇身“塊”node重合，也就是蛇吃到食物。
//食物類
function Food(x，y，w) {
var t= this;
t.x=x;
t.y=y;
t.w=w;//食物
//X坐標
//Y坐標
//大小
t.foodInit = function() [
//畫一個實心圓
ctx.beginPath();
ctx.arc(x+w/2，y+w/2，w/2，0，360，false);ctx.fillStyle="red";
//填充顏色，默認是黑色
//畫實心圓
ctx.fill();
ctx.closePath();
//判斷是否重合
t.equal = function(node)
if(this.x == node.x && this.y== node.y) return true;else(
return false;
}
}
}?
2． 塊類(Block)
在貪吃蛇游戲中，塊用來構成蛇，在蛇出現(xiàn)時，要把構成蛇的塊一個個地輸出(顯示)，在蛇消失時，要把塊消除掉，顯示和消除哪一個塊都要由位置決定，并且由于蛇是由多個塊構成的，每個塊要填到snakes數(shù)組中。
//蛇塊類
function Block(x,Y,w)(
var t = this;
t.x= x;
t.y=y;
t.w= w;
//畫一個蛇塊
t.drawBlock = function()
ctx.beginPath();
ctx.arc(x+w/2，y+w/2，w/2，0，360，false);
//填充顏色,默認是黑色
ctx.fillStyle="blue";
ctx.fill();
//畫實心圓
//清除蛇塊
t.clear = function()!
ctx.fillStvle=white';
ctx.strokeStyle = white';
ctx.fillRect(x,Y,w,w);
ctx.strokeRect(x,Y, w,w);
//判斷是否重合
t.equal = function(node)
if(this.x== node.x && this.y== node.y){return true;
else
return false;
}
}?
3． 蛇類(Snake)設計
現(xiàn)在到了最難的步驟，就是處理蛇，一條完整的貪吃蛇是由一塊一塊組成的。snakes數(shù)組用于存放組成蛇的所有塊；其中保存的第一個元素是蛇的頭部，最后一個元素是蛇的尾巴。當蛇運動的時候，它頭部增加一塊而尾部減少一塊。如果它吃到了豆，頭部增加一塊而尾部不減少。也就是說，蛇是從頭部開始長的。蛇運行過程中要不斷地改變方向；如果蛇頭碰到了它自身，蛇就要死亡，即程序結束。
首先，畫一條蛇并移動它。
//蛇類
function Snake(x，y len，speed) {
var t = this;
t.x=x;
t.y=y;
t.dir='R';
t.len = len;
//dir 方向，R'向右
var nx = x;ny =y;
//初始蛇最初 len(5)塊，并啟動定時
t.init = function()
for(var i=0;i< len; i++){
var tempBlock = new Block(nx，ny，gridWidth);tempBlock.drawBlock();nx-= gridWidth;
snakes.push(tempBlock);
snake interval = setInterval(t.move，speed);//定時移動蛇
}?然后，識別鍵盤事件，修改移動方向dir，初始移動dir方向為'R'(向右)。
//取得鍵盤方向
document.onkevdown = function(e)
var code = e.keyCode;
t.odir = t.dir;
switch(code)
case 37:
t.dir='L';
break;case 38:
t.dir='u';break;
case 39:
t.dir='R';break;case 40 :
t.dir='D';
//向左鍵
//向上鍵
//向右鍵
//向下鍵
break;
}
}
?
以下主要是讓蛇動的move()函數(shù)。主要是根據(jù)原來蛇頭snakes［0］的位置和移動方向確定新的蛇頭位置，繪制新的蛇頭，并清除原來的蛇尾即達到移動效果。
在蛇移動時，判斷蛇頭是否和食物相撞，是否碰撞到了場地的壁以及是否與自己相撞。
//移動蛇
t.move = function()
var newHead;
//是否碰撞到了場地的壁
if(snakes0].x+ snakes0].w >= canvas.width snakes0].x- snakes0].w<0snakes[0].y- snakes[0].w < 0 snakes[0].y + snakes[0].w > canvas.height)(gameover();
else{//根據(jù)原來蛇頭 snakes[0]的位置和移動方向確定新的蛇頭位置
if(t.dir=='R'){newHead= new Block(snakes[0].x + gridWidth,snakes[0].y，gridWidth);) else if (t.dir =='L')(
newHead = new Block(snakes[0].x- gridWidth,snakes[0].y，gridWidth);else if (t.dir==D') !
newHead = new Block(snakes[0].x，snakes[0].y + gridWidth,gridWidth);else if (t.dir==u') !
newHead= new Block(snakes[0].x，snakes[0].y- gridwidth,gridWidth)
//禁止反向跑
if(newHead.x == snakes[1].x && newHead.y == snakes[1].y)t.dir = t.odir;return;
//畫新的蛇頭newHead.drawBlock();//追加到數(shù)組中(長度會自動加)snakes.unshift(newHead);//清除原來尾部snakes[snakes.length - 17.clear();//并從數(shù)組中移除(長度會自動減)snakes.pop()
//清除(蛇尾)塊
/判斷食物是否和蛇頭相撞
for(var i=0;i< foods.length; i++)if(foods[ i].equal( snakes[0]))
//給蛇增加長度
t.growth();
score= score +10:
textmsq.innerHTML = score +“分”
t.len = t.len + 1;
//蛇生長方法
//增加 10 分
//顯示分數(shù)
clearInterval(snake interval);
//速度加快snake interval = setInterval(t.move，speed);
speed = speed < 20 ? speed : speed -10;
//判斷是否與自己相撞
for(var i=1;i< snakes.length; i++)if(snakesil.equal(snakes[0T)) gameover();
)//move()函數(shù)結束
用于實現(xiàn)蛇生長growth()函數(shù)的具體功能是當蛇吃到一個豆后，蛇就要在它的尾巴上增加一塊即蛇增長。設計思路是找到蛇尾snakes［snakes．length-1］，根據(jù)蛇尾與蛇的倒數(shù)第2塊snakes［snakes．length-2］的位置關系，計算出蛇尾新增一塊的位置。
?
//給蛇增加長度(在尾巴加)
t.growth = function()
var tail1 = snakes[ snakes.length - 1]；
var tai12 = snakes[snakes.ength - 2];
var addBlock;
if(tai11.x== tai12.x)
{
if(tail1.y>= tail2.y）
}
addBlock =new Block(tail1.x，tail1.y + gridWidth，gridWidth);
else
addBlock =new Block(tail1.x，tail1.y-gridWidth，gridWidth);
else
if(tai11.x>= tail2.x)
addBlock =new Block(tail1.x + gridWidth，tail1.y，gridWidth);
else
addBlock =new Block(tail1.x-gridWidth，tail1.y，gridWidth);
//數(shù)組加入尾部
snakes.push(addBlock);addBlock.drawBlock();
console.log(snakes.length);
)//growth()函數(shù)
* snake 類結束 */?
4． 場地類(Farm)設計
為游戲的主場地，豆要在此范圍內出現(xiàn)，蛇要在此范圍內運行，顯示場地內的所有對象、場地邊框、豆和蛇。
//場地類,生成一個畫布和豆、蛇
function Farm()
var t = this;
ctx.fillStyle ='white';
ctx.fillRect(0，0，canvas.width,canvas.height);foods =l;//有環(huán)蓮浮墩甘伴榜機鄖扒唉癌挨膊鞍皚傲卑唉扮誠成一個食物t.addfood = function()var x= parseInt(canvas.width / gridWidth * Math.random()) * gridWidth;var y=parseInt(canvas.height / gridWidth * Math.random()) * gridWidth;var food = new Eood(x，y，gridWidth);food把椽斌新foodInit();
//重新初始化豆數(shù)組，不要把前一次游戲的數(shù)組元素遺留
foods.push(food);
//重新初始化蛇身(塊)數(shù)組，不要把前一次游戲的數(shù)組元素遺留snakes =;//更新速度 500 毫秒(即移動速度)
t.snake= new Snake(100，100，5，500); //初始 5 節(jié)長度,位置(100,100)處//*彼啊畫鉆班等滁癌報蛇t.snake.init();
}?
5． 主程序
在游戲開始后，要首先初始化場地Farm類，顯示場地內的所有對象，場地邊框、豆和蛇。同時要2秒隨機產(chǎn)生一個新豆并顯示。文章來源：http://www.zghlxwxcb.cn/news/detail-515467.html
var canvas = document.getElementById("canvas”)
var ctx = canvas.getContext( 2d');
var gridWidth = 20;
var score = 0;
var foods = new Array()，snakes = new Array();//開始游戲
function gameStart(
var farm = new Farm();
//放豆和蛇的數(shù)組
//2 秒產(chǎn)生一個豆
food interval = setInterval(farm.addfood，2000);
gameStart();
//結束
function gameover()var judge = confirm("游戲結束，是否重新開始”);score =0;
textmsg.innerHTML = score +“分clearInterval(snake interval);
//清除產(chǎn)生蛇移動定時
//清除產(chǎn)生新豆定時
clearInterval(food interval);
if(!judge){
//選擇不重新開始
return false;
gameStart();
}至此，貪吃蛇游戲編寫完成。?文章來源地址http://www.zghlxwxcb.cn/news/detail-515467.html
到了這里，關于HTML5 游戲開發(fā)實戰(zhàn) ｜ 貪吃蛇的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
