前几天，我在图书馆看到一本书叫HTML5 Canvas基础教程，于是马上花了两天时间把它看完了。今天就用了那本书里讲到的html5的知识做了一个贪吃蛇游戏。游戏比较简单，有点小缺点，蛇头的反应有点迟钝。
首先是html的代码：
<!DOCTYPE html> <html> <head> <title>Greedy snake</title> <meta charset="gb2312"> <link href="mygame.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="mygame.js"></script> </head> <body> <div id="game"> <div id="gameUI"> <div id="gameIntro"> <h1>Greedy snake</h1> <p>This is an awesome game.</p> <p><a id="gamePlay" class="button" href="">Play</a></p> </div> <div id="gameStats"> <p>Scores: <span class="gameScore"></span></p> <p><a class="gameReset" href="">Reset</a></p> </div> <div id="gameComplete"> <h1>Game over!</h1> <p>You got <span class="gameScore"></span> scores.</p> <p><a class="gameReset button" href="">Play again</a></p> </div> </div> <canvas id="gameCanvas" width="350" height="600"> <!-- Insert fallback content here --> </canvas> </div> </body> </html>
然后是css的代码
* { margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
canvas { display: block; }
body {
background: #000;
color: #fff;
font-family: Verdana, Arial, sans-serif;
font-size: 18px;
}
h1 {
font-size: 30px;
}
p {
margin: 0 20px;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.button {
background: #185da8;
border-radius: 5px;
display: block;
font-size: 30px;
margin: 40px 0 0 45px;
padding: 10px;
width: 200px;
}
a.button:hover {
background: #2488f5;
color: #fff;
text-decoration: none;
}
#game {
height: 600px;
left: 50%;
margin: -300px 0 0 -175px;
position: relative;
top: 50%;
width: 350px;
}
#gameCanvas {
background: #001022;
}
#gameUI {
height: 600px;
position: absolute; /* Places UI on top of the canvas */
width: 350px;
}
#gameIntro, #gameComplete {
background: rgba(0, 0, 0, 0.5);
margin-top: 100px;
padding: 40px 0;
text-align: center;
}
#gameStats {
font-size: 14px;
margin: 20px 0;
}
#gameStats .gameReset {
margin: 20px 20px 0 0;
position: absolute;
right: 0;
top: 0;
}
最后是js的代码
$(document).ready(function() {
var canvas = $("#gameCanvas");
var context = canvas.get(0).getContext("2d");
// Canvas dimensions
var canvasWidth = canvas.width();
var canvasHeight = canvas.height();
// Game settings
var playGame;
var score;
var platformX;
var platformY;
var platformWidth;
var platformLength;
var numX;
var numY;
var pWidth;
var pLength;
var snakes;
var food;
var sLength;
// Keyboard keycodes using descriptive variables (enumeration)
var arrowLeft = 37;
var arrowUp = 38;
var arrowRight = 39;
var arrowDown = 40;
// Game UI
var ui = $("#gameUI");
var uiIntro = $("#gameIntro");
var uiStats = $("#gameStats");
var uiComplete = $("#gameComplete");
var uiPlay = $("#gamePlay");
var uiReset = $(".gameReset");
var uiScore = $(".gameScore");
//snake
var cube = function(x, y) {
this.x = x;
this.y = y;
this.direction='right';
this.snake = true;
};
// Reset and start the game
function startGame() {
// Reset game stats
uiScore.html("0");
uiStats.show();
// Set up initial game settings
playGame = false;
score = 0;
platformWidth=300;
platformLength=500;
platformX=canvasWidth/2-platformWidth/2;
platformY=60;
numX=12;
numY=20;
pWidth=platformWidth/numX;
pLength=platformLength/numY;
snakes = null;
snakes = new Array();
//create sanke
snakes.push(new cube(0,0));
snakes.push(new cube(1,0));
snakes.push(new cube(2,0));
sLength=3;
//create food
disFood();
// Set up keyboard event listeners
$(window).keydown(function(e) {
var keyCode = e.keyCode;
if (playGame == false) {
playGame = true;
// Start the animation loop
animate();
};
var olddirection=snakes[sLength-1].direction;
if (keyCode == arrowLeft && olddirection!='right') {//new direction can not be opposite to old direction
snakes[sLength-1].direction = 'left';
} else if (keyCode == arrowRight && olddirection!='left') {
snakes[sLength-1].direction = 'right';
} else if (keyCode == arrowUp && olddirection!='down') {
snakes[sLength-1].direction = 'up';
} else if (keyCode == arrowDown && olddirection!='up') {
snakes[sLength-1].direction = 'down';
};
});
// Start the animation loop
animate();
};
// Inititialise the game environment
function init() {
uiStats.hide();
uiComplete.hide();
uiPlay.click(function(e) {
e.preventDefault();
uiIntro.hide();
startGame();
});
uiReset.click(function(e) {
e.preventDefault();
uiComplete.hide();
$(window).unbind("keydown");
startGame();
});
};
// Animation loop that does all the fun stuff
function animate() {
// Clear
context.clearRect(0, 0, canvasWidth, canvasHeight);
context.strokeStyle="rgb(255,255,255)";
for(var i=0;i<numX;i++)
{
for(var j=0;j<numY;j++)
{
context.strokeRect(platformX+i*pWidth,platformY+j*pLength,pWidth,pLength);
}
};
context.fillStyle="rgb(255,0,0)";
for(var i=0;i<sLength;i++)
{
context.fillRect(platformX+snakes[i].x*pWidth,platformY+snakes[i].y*pLength,pWidth,pLength);
};
context.fillStyle="rgb(0,255,0)";
context.fillRect(platformX+food.x*pWidth,platformY+food.y*pLength,pWidth,pLength);
var x=y=0;
if(snakes[sLength-1].direction=='left')
{
x = -1;
y = 0;
}else if(snakes[sLength-1].direction=='right')
{
x = 1;
y = 0;
}else if(snakes[sLength-1].direction=='up')
{
x = 0;
y = -1;
}else if(snakes[sLength-1].direction=='down')
{
x = 0;
y = 1;
};
nx = snakes[sLength-1].x + x;
ny = snakes[sLength-1].y + y;
if(nx<0 || nx>=numX || ny<0 || ny>=numY)//whether hit the border
{
gameover();
}
else if(isInSnake(nx,ny))//whether hit itself
{
gameover();
}else if(score==60)//when got 60 scores
{
gameover();
};
//move snake
var newone=new cube(nx,ny);
newone.direction=snakes[sLength-1].direction;
snakes.push(newone);
if(nx==food.x&&ny==food.y)//eat food
{
disFood();
sLength++;
uiScore.html(++score);
}else{
snakes.shift();
};
if (playGame){
// Run the animation loop again in 33 milliseconds
setTimeout(animate, 500);
};
};
function isInSnake(a,b)
{
for(var i=0;i<sLength;i++)
{
if(snakes[i].x == a&&snakes[i].y == b)
{
return true;
};
};
return false;
};
function disFood()
{
var x2,y2;
var flag=true;
while(flag)
{
x2=Math.floor(Math.random()*numX);
y2=Math.floor(Math.random()*numY);
flag = isInSnake(x2,y2);
};
food=new cube(x2,y2);
food.snake = false;
};
function gameover()
{
// Game over
playGame = false;
uiStats.hide();
uiComplete.show();
// Reset event handlers
$(window).unbind("keydown");
};
init();
});
有问题或者意见的可以联系下我。