首先建立一個二維類
function Class_Dim(cx, cy){
var x = cx;
var y = cy;
this.getx = function(){
return x;
};
this.gety = function(){
return y;
};
this.setx = function(tx){
x = tx;
};
this.sety = function(ty){
y = ty;
};
};然後設置一些全局變量
var gameRunning = true;//遊戲是否進行中
var canvas = document.getElementById('scen');//獲取canvas
var sceneWidth = 10;//格子列數
var sceneHeight = 10;//格子行數
var canvasWidth = canvas.width;//canvas寬度
var canvasHeight = canvas.height;//canvas長度
var unitWidth = canvasWidth / sceneWidth;//
var unitHeight = canvasHeight / sceneHeight;
var snake = new Array();
var addBlocks = new Class_Dim(Math.floor((sceneWidth-1) * Math.random()) + 1, Math.floor(((sceneHeight-1) * Math.random()) + 1));//食物
var snakeDir = new Class_Dim(0, -1);//貪喫蛇移動方向
snake.unshift(new Class_Dim(sceneWidth / 2, sceneHeight / 2));//初始化下面是繪製蛇的函數
function drawSnake(){
var context = canvas.getContext('2d');
context.fillStyle = '#223344';
for(var i=0;i<snake.length;i++){
context.fillRect(snake[i].getx() * unitWidth, snake[i].gety() * unitHeight, unitWidth, unitHeight);
};
};然後是繪製食物（可以考慮做成數組）
function drawAddBlocks(){
var context = canvas.getContext('2d');
context.fillStyle = '#66FF99';
context.fillRect(addBlocks.getx() * unitWidth, addBlocks.gety() * unitHeight, unitWidth, unitHeight);
}然後是貪喫蛇根據方向移動，蛇身每一段都存放在一個有序列內
首先第一個元素根據方向移動，下一個元素繼承上一個元素的位置，即是貪喫蛇整體的移動方式。
判斷蛇是否移動後死亡，只需判斷蛇頭位置。
function moveSnake(){
var rememberx = snake[0].getx();
var remembery = snake[0].gety();
var isEated = false;
var eatedBlockPointer;
if(addBlocks.getx() == rememberx + snakeDir.getx() && addBlocks.gety() == remembery + snakeDir.gety()){
isEated = true;
};
if(isEated){
snake.unshift(new Class_Dim(addBlocks.getx(), addBlocks.gety()));
do{
var isLoop = false;
addBlocks = new Class_Dim(Math.floor((sceneWidth-1) * Math.random()) + 1, Math.floor(((sceneHeight-1) * Math.random()) + 1));
for(var i = 0; i < snake.length; i++){
if(addBlocks.getx() == snake[i].getx() && addBlocks.gety() == snake[i].gety()) isLoop = true;
}
}while(isLoop);
}
else{
snake[0].setx(rememberx + snakeDir.getx());
snake[0].sety(remembery + snakeDir.gety());
if(snake[0].getx() < 0 || snake[0].getx() >= sceneWidth || snake[0].gety() < 0 || snake[0].gety() >= sceneHeight){
gameRunning = false;
};
for(var i=1;i<snake.length;i++){
var tmpx = snake[i].getx();
var tmpy = snake[i].gety();
if(snake[0].getx() == tmpx && snake[0].gety() == tmpy){
gameRunning = false;
};
snake[i].setx(rememberx);
snake[i].sety(remembery);
rememberx = tmpx;
remembery = tmpy;
};
};
};下面是完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>貪喫蛇</title>
</head>
<body>
<canvas id="scen" width='600' height='600'></canvas>
<script>
function Class_Dim(cx, cy){
var x = cx;
var y = cy;
this.getx = function(){
return x;
};
this.gety = function(){
return y;
};
this.setx = function(tx){
x = tx;
};
this.sety = function(ty){
y = ty;
};
};
var gameRunning = true;
var canvas = document.getElementById('scen');
var sceneWidth = 10;
var sceneHeight = 10;
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var unitWidth = canvasWidth / sceneWidth;
var unitHeight = canvasHeight / sceneHeight;
var snake = new Array();
var addBlocks = new Class_Dim(Math.floor((sceneWidth-1) * Math.random()) + 1, Math.floor(((sceneHeight-1) * Math.random()) + 1));
var snakeDir = new Class_Dim(0, -1);
snake.unshift(new Class_Dim(sceneWidth / 2, sceneHeight / 2));
function drawSnake(){
var context = canvas.getContext('2d');
context.fillStyle = '#223344';
for(var i=0;i<snake.length;i++){
context.fillRect(snake[i].getx() * unitWidth, snake[i].gety() * unitHeight, unitWidth, unitHeight);
};
};
function drawAddBlocks(){
var context = canvas.getContext('2d');
context.fillStyle = '#66FF99';
context.fillRect(addBlocks.getx() * unitWidth, addBlocks.gety() * unitHeight, unitWidth, unitHeight);
}
function clearAll(){
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvasWidth, canvasWidth);
}
function moveSnake(){
var rememberx = snake[0].getx();
var remembery = snake[0].gety();
var isEated = false;
var eatedBlockPointer;
if(addBlocks.getx() == rememberx + snakeDir.getx() && addBlocks.gety() == remembery + snakeDir.gety()){
isEated = true;
};
if(isEated){
snake.unshift(new Class_Dim(addBlocks.getx(), addBlocks.gety()));
do{
var isLoop = false;
addBlocks = new Class_Dim(Math.floor((sceneWidth-1) * Math.random()) + 1, Math.floor(((sceneHeight-1) * Math.random()) + 1));
for(var i = 0; i < snake.length; i++){
if(addBlocks.getx() == snake[i].getx() && addBlocks.gety() == snake[i].gety()) isLoop = true;
}
}while(isLoop);
}
else{
snake[0].setx(rememberx + snakeDir.getx());
snake[0].sety(remembery + snakeDir.gety());
if(snake[0].getx() < 0 || snake[0].getx() >= sceneWidth || snake[0].gety() < 0 || snake[0].gety() >= sceneHeight){
gameRunning = false;
};
for(var i=1;i<snake.length;i++){
var tmpx = snake[i].getx();
var tmpy = snake[i].gety();
if(snake[0].getx() == tmpx && snake[0].gety() == tmpy){
gameRunning = false;
};
snake[i].setx(rememberx);
snake[i].sety(remembery);
rememberx = tmpx;
remembery = tmpy;
};
};
};
function drawNet(){
var context = canvas.getContext('2d');
for(var loopPointer = 0; loopPointer <= sceneWidth; loopPointer++)
{
context.beginPath();
context.moveTo(loopPointer * unitWidth, 0);
context.lineTo(loopPointer * unitWidth, canvasHeight);
context.lineWidth = 1.0;
context.strokeStyle = '#9988CC';
context.stroke();
};
for(var loopPointer = 0; loopPointer <= sceneHeight; loopPointer++){
context.beginPath();
context.moveTo(0, loopPointer * unitHeight);
context.lineTo(canvasWidth, loopPointer * unitHeight);
context.lineWidth = 1.0;
context.strokeStyle = '#9988CC';
context.stroke();
};
};
function run(){
moveSnake();
if(gameRunning){
clearAll();
drawNet();
drawSnake();
drawAddBlocks();
}
}
document.onkeypress = function(e){
switch(e.which){
case 119:
if(snakeDir.gety() != 1){
snakeDir = new Class_Dim(0, -1);
}
break;
case 115:
if(snakeDir.gety() != -1){
snakeDir = new Class_Dim(0, 1);
}
break;
case 97:
if(snakeDir.getx() != 1){
snakeDir = new Class_Dim(-1, 0);
}
break;
case 100:
if(snakeDir.getx() != -1){
snakeDir = new Class_Dim(1, 0);
}
break;
}
}
setInterval("run()",300);
</script>
</body>
</html>