HTML5学习事例——贪吃蛇
日期：2014-05-17 浏览次数：21246 次
HTML5学习例子——贪吃蛇
?
初学JS和HTML5，光看语法太闷，写了个贪吃蛇例子，测试一下localStorage和canvas。
写在这里标记一下留着以后参考。
参考了 http://www.iteye.com/topic/829287 这篇文章的部分逻辑。
没有使用面向对象的设计逻辑，只是简单实现功能。
?
代码：
?
?
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Snake</title>
<style type="text/css">
h3{
margin: 0;
padding:10px 5px;
background-color: gray;
color: white;
}
p{
color:red;
font-weight:bold;
}
input{
margin:40px 20px 0 20px;
width:70px;
height:30px;
}
</style>
</head>
<body onkeydown="turn(event)" onunload="exit()">
<div style="float:left;font-family:Arial;text-align:center;">
<div style="float:left">
<canvas id="pool" width="600" height="500" style="margin:40px 20px 0 200px;border:2px solid #c3c3c3;"></canvas>
</div>
<div style="float:left;margin:40px 20px 0 20px;">
<div style="border:2px solid #c3c3c3;">
<h3>Your Score</h3>
<p id="score">0</p>
<h3>Highest Score</h3>
<p id="highest">0</p>
</div>
<div>
<input type="button" value="Start" id="start" onclick="start()"></input>
</div>
<div>
<input type="button" value="Restart" id="restart" onclick="restart()"></input>
</div>
</div>
</div>
<script type="text/javascript">
var canvas = document.getElementById("pool"); //Canvas Container.
var cxt = canvas.getContext("2d"); //Canvas Context.
var snake_width = 15; //Snake body's width.
var snake_height = 15; //Snake body's height.
var step = 20; //Snake's step pixel.
var faceX; //Snake's face-to in X-axis.
var faceY; //Snake's face-to in Y-axis.
var speed = 400; //Snake's base speed.
var level; //Game level.
var formerX; //X-coordinate of former body.
var formerY; //Y-coordinate of former body.
var formerX_temp; //Temp parameter.
var formerY_temp; //Temp parameter.
var snake = new Array(); //Snake.
var food; //Food.
var score; //Score.
var highest; //Highest score.
var isStart = false; //If game is started or stop.
initial();
moving();
/* Body class. Memeber posX/postY record the left/top position of
the body rectangle. */
function body(x,y){
this.posX = x;
this.posY = y;
}
/* Initial the environment.If localStorage records the last play status,
then use the status. Else use the initial environment.*/
function initial(){
if(localStorage.highest){
snake = JSON.parse(localStorage.snake);
food = JSON.parse(localStorage.food);
faceX = Number(localStorage.faceX);
faceY = Number(localStorage.faceY);
level = Number(localStorage.level);
score = Number(localStorage.score);
highest = Number(localStorage.highest);
}else{
snake[0] = new body(80,40);
snake[1] = new body(60,40);
snake[2] = new body(40,40);
snake[3] = new body(20,40);
food = new body(300,40);
faceX = 1;
faceY = 0;
level = 1;
score = 0;
highest = 0;
}
document.getElementById("score").innerHTML = score;
document.getElementById("highest").innerHTML = highest;
draw();
resetPos();
}
/*Re-calculate every body's position of the snake, and check
if it eats food,hits the boder or hits itself.*/
function resetPos(){
//Hit border.
if(snake[0].posX < 0 || snake[0].posX > 580 ||
snake[0].posY < 0 || snake[0].posY > 480){
die();
return;
}
//Hit self.
for(var i=1;i<snake.length;i++){
if(snake[0].posX==snake[i].posX && snake[0].posY==snake[i].posY){
die();
return;
}
}
//Re-calculate position and check eat.
formerX = snake[0].posX;
formerY = snake[0].posY;
snake[0].posX = snake[0].posX + step*faceX;
snake[0].posY = snake[0].posY - step*faceY
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
