初学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;
if(snake[0].posX == food.posX && snake[0].posY == food.posY){
eat();
}
for(var i=1;i<snake.length;i++){
formerX_temp = snake[i].posX;
formerY_temp = snake[i].posY;
snake[i].posX = formerX;
snake[i].posY = formerY;
formerX = formerX_temp;
formerY = formerY_temp;
}
}
/*Draw the game to the canvas.*/
function draw(){
cxt.clearRect(0, 0, canvas.width, canvas.height);
cxt.fillStyle="#999999";
cxt.fillRect(snake[0].posX,snake[0].posY,snake_width,snake_height);
for(var i=1;i<snake.length;i++){
cxt.fillRect(snake[i].posX,snake[i].posY,snake_width,snake_height);
}
cxt.fillStyle="#ff0000";
cxt.fillRect(food.posX,food.posY,snake_width,snake_height);
document.getElementById("score").innerHTML = score;
document.getElementById("highest").innerHTML = highest;
}
/*Moving the game use recursion. The frame is decide by the level.*/
function moving(){
if(isStart){
draw();
resetPos();
}
var t=setTimeout("moving()",speed/level);
}
/*Change direction where player press the up/down/left/right key on
the keybord.*/
function turn(event){
switch(event.keyCode) {
case 37: //Left
if(faceY != 0){
faceX = -1;
faceY = 0;
}
break;
case 38: //Up
if(faceX != 0){
faceX = 0;
faceY = 1;
}
break;
case 39: //Right
if(faceY != 0){
faceX = 1;
faceY = 0;
}
break;
case 40: //Down
if(faceX != 0){
faceX = 0;
faceY = -1;
}
break;
}
}
/*Eat food action.Score increase, snake length increase,
reset food.*/
function eat(){
score += 10;
level += 0.05;
if(highest < score)
highest = score;
snake[snake.length] = new body(snake[snake.length-1].posX,snake[snake.length-1].posY);
var tempX = Math.round(Math.random()*10);
var tempY = Math.round(Math.random()*10);
food.posX = (snake[0].posX+tempX*20)%600;
food.posY = (snake[0].posY+tempY*20)%500;
}
/*Die action*/
function die(){
start();
alert("You Lose!");
}
/*Start or stop the game.*/
function start(){
if(isStart){
document.getElementById("start").value = "Start";
isStart = false;
}
else{
document.getElementById("start").value = "Stop";
isStart = true;
}
}
/*Restart the game.*/
function restart(){
delete localStorage.snake;
snake = [];
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.posX = 300;
food.posY = 40;
faceX = 1;
faceY = 0;
level = 1;
score = 0;
isStart = false;
document.getElementById("start").value = "Start";
draw();
}
/*Record the game status when exits the game.*/
function exit(){
if(score >= highest)
localStorage.highest = score;
localStorage.snake = JSON.stringify(snake);
localStorage.food = JSON.stringify(food);
localStorage.faceX = faceX;
localStorage.faceY = faceY;
localStorage.level = level;
localStorage.highest = highest;
localStorage.score = score;
}
</script>
</body>
</html>
分享到：
相关推荐
在本项目中，我们探讨的是一个使用前端技术实现的经典游戏——贪吃蛇。这个程序是用JavaScript（JS）、层叠样式表（CSS）和超文本标记语言（HTML）编写的，充分展示了前端开发的基本要素。下面我们将深入解析这些...
这个“HTML5 canvas简单贪吃蛇小游戏特效代码”就是一个利用canvas实现的经典游戏——贪吃蛇的示例。下面将详细解释这个项目中涉及的技术点。 1. **HTML5 canvas基础**： - `canvas`元素是HTML5的一个新特性，它是...
这个文件可能是基于HTML和JavaScript实现的一个经典游戏——贪吃蛇。JavaScript用于控制游戏逻辑，包括蛇的移动、食物生成以及碰撞检测，而HTML则提供游戏界面的基本结构。贪吃蛇游戏的实现可以帮助开发者理解如何用...
"snake"项目就是这样一个例子，它将经典的贪吃蛇游戏带入了网页环境，利用HTML（超文本标记语言）来构建游戏的基础结构。HTML是网页设计的基石，它定义了网页的布局、内容和结构，让信息以可读的形式呈现给用户。 ...
《网页版贪吃蛇——深度解析snakegame.zip》 在当今互联网世界中，游戏不再仅仅局限于桌面应用或手机应用，而是越来越广泛地出现在网页上。"snakegame.zip"就是一个很好的例子，它是一款利用HTML、CSS、JavaScript...
在这个例子中，我们可以了解JavaScript如何控制定时器来实现游戏循环，以及如何用HTML5的Canvas API进行图形绘制，创建游戏场景和动态元素。此外，还会涉及到碰撞检测、计分系统和用户交互的实现。 3. **JS正则...
《Snakegame.js——HTML5经典贪吃蛇游戏的JavaScript实现》 在网页开发领域，HTML5的出现极大地丰富了网页的交互性和娱乐性。其中，使用JavaScript编写的“Snakegame.js”就是一个很好的例子，它实现了经典的贪吃蛇...
在这个"phaser-game-snake"项目中，作者利用 Phaser.js 实现了一个经典的游戏——Snake（贪吃蛇）。这个小游戏展示了如何使用 JavaScript 和 Phaser.js 进行游戏开发。 首先，我们要了解 Phaser.js 的基本结构。...
2012-06-11 09:51 105,472 30902382_高谦一-贪吃蛇游戏设计.doc 2012-06-11 09:59 232 79套经典网页设计模版.zip 2012-06-11 10:18 373,373 ADO数据组件精解示例.rar 2012-06-11 10:31 2,314,224 ArcGIS Engine开发...