游戏规则：
1.初始分数为=0、初始速度为1！
2.操作蛇移动，使蛇可以吃到红色的食物!
3.每当我的分数每次达到100分时，当前速度就会提高一个等级！
4.最高速度为10.相信能力强的人可以达到最高速度！
5.当蛇的碰到墙体或者自己的身子的时候，会宣布游戏失败！
开发需求：
需求⼤家玩过贪吃蛇应该都了解，⽤上下左右控制蛇的⽅向移动，吃到闪动的⼩⾍就增长⼀段并加分。直到撞到四壁或吃到⾃⼰游戏结束。
设计思路：
⾸先要有⼀个地图供蛇爬⾏。由于蛇的形状长度均会改变，如果⽤图⽚表⽰的话肯定不⾏，其实蛇的移动可以看做是背景⾊的⿊⽩变化，蛇
头的前⼀个html元素变⿊，蛇为变⽩，则可看成是向前移动了⼀步。你整个地图的移动则需将整个地图分为多个⼩的html元素，这⾥我们
选择table做地图框架，⾥⾯包含的td做蛇的位移就可以了。我们可以做⼀个30*30的表格做地图。然后通过改变900个td的背景⾊的变化
来控制蛇的位移。
初始构思是这样画出⽅格阵做地图，然后3个⽅格是⿊⾊背景表⽰的蛇。第四个变⿊，第⼀个变⽩则可看做是向前移动了⼀步。怎样控制前
后变⾊呢？开始我想到的是⽤js获取当前元素的前后兄弟元素的⽅法控制⾸尾的td背景颜⾊改变，但这种⽅法后来失败，只能适⽤于直线前
⾏的移动，如果向下掉头的户js获取下⽅的td就难了。其实等把整个地图画出来就想到了，应该⽤⼆维数组。⼆维数组的⼀维表⽰tr⾏，⼆
维表⽰每⾏的td，这样把地图的每个元素都存⼊⼆维数组，可以按a[x][y]的x,y算法很快的调⽤到要移动的位置。
其它的蛇怎么动怎么吃⾍⼦先不考虑，先做出这个table和数组。
不多说了，代码很简单，直接上代码。
代码部分：
直接copy就可以用，html放在贪吃蛇.html里，js文件copy到贪吃蛇.js里，运行html文件即可运行。
html部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="utf-8">
<title>html5贪吃蛇小游戏</title>
<script type="text/javascript" src="贪吃蛇.js"></script>
<script>
</script>
</head>
<body>
<h1>html5贪吃蛇小游戏</h1>
<div align="left" class="a">
游戏规则：<br>
1.初始分数为=0、初始速度为1！<br>
2.操作蛇移动，使蛇可以吃到红色的食物!<br>
3.每当我的分数每次达到100分时，当前速度就会提高一个等级！<br>
4.最高速度为10.相信能力强的人可以达到最高速度！<br>
5.当蛇的碰到墙体或者自己的身子的时候，会宣布游戏失败！<br>
</div>
<style>
body{
text-align: center;
background-color: aqua;
}
#snake{
margin-top: 20px;
}
.a{
margin-top: 50px;
margin-left: 680px;
width: 600px;
font-size: 20px;
}
</style>
<canvas id="snake" width="" height=""></canvas>
<h3 id="score">我的得分：0</h3>
<h3 id="speed">当前速度：1</h3>
<script>
var snake = new Snake("snake","score","speed",36,36);
snake.init();
</script>
</body>js部分：
var Snake = function(ele,scoreele,speedele,x,y){
this.cellWidth = 15;//格子的大小
this.ele = document.getElementById(ele);
this.cxt = this.ele.getContext("2d");
this.x=x;
this.y=y;
this.scoreele = document.getElementById(scoreele);
this.speedele = document.getElementById(speedele);
//生成canvas大小。边框。
this.ele.width = this.cellWidth * this.x;
this.ele.height = this.cellWidth * this.y;
this.ele.style.border ="2px solid #000";
this.changeDiretion();//绑定方向事件。
}
Snake.prototype = {
init:function(){
//初始化，重置。恢复js数据以及dom。
this.direction = 1;//向右 2下 3左 4 上
this.nextDirection = '';
this.snakeArr = [[0,parseInt(this.y/2)],[1,parseInt(this.y/2)]];
this.speed = 1;
this.score = 0;
this.cxt.fillStyle ='#fff';
this.cxt.fillRect(0,0,this.cellWidth*this.x,this.cellWidth*this.y);
this.scoreele.innerHTML="我的得分：0";
this.speedele.innerHTML="当前速度：1";
this.createCoolPoint();
this.drawCell(this.coolPoint,2);
this.drawSnake();
this.setTimer();
},
getCellArea:function(pos){//返回一个格子左上角的像素坐标[32,666];
return [(pos[0]-1)*this.cellWidth+1,(pos[1]-1)*this.cellWidth+1];
},
setTimer:function(){
var speedArr = [180,160,140,120,100,80,60,40,20];
var speed = this.speed;
if(speed>8){
speed = 8;
}
(function(theThis){
var that = theThis;
that.timer = setTimeout(function() {
that.moveSnake();
}, speedArr[speed]);
})(this);
},
moveSnake:function(){
//移动蛇的逻辑。数组处理。
this.direction = this.nextDirection == ''?this.direction:this.nextDirection;//当前移动方向，和下一个移动方向。这样处理能避免一个bug.
var direction = this.direction;
var snakeArr = this.snakeArr;
var snakeHead = snakeArr[snakeArr.length-1];
switch(direction){
case 1 ://向右
snakeHead = [snakeHead[0]+1,snakeHead[1]];
break;
case 2 ://向下
snakeHead = [snakeHead[0],snakeHead[1]+1];
break;
case 3 ://向左
snakeHead = [snakeHead[0]-1,snakeHead[1]];
break;
case 4 ://向上
snakeHead = [snakeHead[0],snakeHead[1]-1];
break;
}
//超界，或撞上自己。结束，重置。
if(in_array(snakeHead,snakeArr) || snakeHead[0]<0 || snakeHead[0]>this.x || snakeHead[1]<0 || snakeHead[1]>this.y){
window.clearInterval(this.timer);
alert('虽然失败了，不过没关系，还可以再来一局！本局得分：'+this.score);
this.init();
return;
}
snakeArr.push(snakeHead);//将蛇头放入数组
this.drawCell(snakeHead,1);
if(snakeHead.toString() != this.coolPoint.toString()){
var tail = snakeArr.shift();//移除蛇尾。
this.drawCell(tail,0);
}else{//撞到coolPoint
this.createCoolPoint();
this.drawCell(this.coolPoint,2);
this.score = this.score + 10;
this.scoreele.innerHTML="我的得分："+this.score;
this.speed = Math.ceil((this.score + 1)/100);
this.speedele.innerHTML="当前速度："+this.speed;
}
this.setTimer();
},
createCoolPoint:function(){//随机生成coolPoint,不在代表snakeArr的数组中。
do{
this.coolPoint = [getRandom(this.x),getRandom(this.y)];
}while(in_array(this.coolPoint,this.snakeArr));
},
changeDiretion:function(){
//更换移动方向。下一步的移动方向。
var that = this;
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
var direction = that.direction;
var keyCode = e.keyCode;
switch(keyCode){
case 39://右
if(direction!=1 && direction !=3){
that.nextDirection = 1;
}
break;
case 40://下
if(direction!=2 && direction !=4){
that.nextDirection = 2;
}
break;
case 37://左
if(direction!=1 && direction !=3){
that.nextDirection = 3;
}
break;
case 38://上
if(direction!=2 && direction !=4){
that.nextDirection = 4;
}
break;
default:
break;
}
};
},
drawSnake:function(){
//绘制初始小蛇。
var snakeArr = this.snakeArr;
for (var i = 0,sLen=snakeArr.length; i < sLen; i++) {
this.drawCell(snakeArr[i],1);
};
},
drawCell:function(pos,type){//绘制会用到的几种颜色的图。
var colorArr = ['#fff','rgb(0, 0, 0)',"red"];
var cxt = this.cxt;
var area;
cxt.fillStyle = colorArr[type];
area = this.getCellArea(pos);
cxt.fillRect(area[0],area[1],this.cellWidth-1,this.cellWidth-1);
}
}
function moveClock() {
moveSnake(head.d);
}
var isMove = false;
function beginGame() {
!isMove && setInterval(moveClock, 300);
isMove = true;
}
//生成随机正整数 1到n之间。
function getRandom(n){
return Math.floor(Math.random()*n+1)
}
//判断一个数组是否在另一个数组中。注意toString()
function in_array(stringToSearch, arrayToSearch) {
for (s = 0; s < arrayToSearch.length; s++) {
thisEntry = arrayToSearch[s].toString();
if (thisEntry == stringToSearch.toString()) {
return true;
}
}
return false;
}
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
