贪吃蛇项目.docx
- 文档编号:11012096
- 上传时间:2023-02-24
- 格式:DOCX
- 页数:9
- 大小:16.38KB
贪吃蛇项目.docx
《贪吃蛇项目.docx》由会员分享,可在线阅读,更多相关《贪吃蛇项目.docx(9页珍藏版)》请在冰豆网上搜索。
贪吃蛇项目
贪吃蛇项目
做贪吃蛇游戏分为一下几个步骤。
1、布局
先把布局给做好。
把布局做成一个12x12的棋盘格,并对棋盘格的背景色做一下设置。
2、蛇身
好布局后要做的就是把开始时的蛇身做出来,使蛇身的颜色有别于背景色。
3、食物
再要做的就是食物,食物是随机出现的,可以用Math.Random()函数实现事物的随机出现。
4、开始
做一个开始按钮,按下按钮都蛇身可以移动,并且可以用方向键控制。
5、吃食物
当蛇身移动到食物的位置的时候,可以把食物加到舍身中,并再次调用食物函数。
6、判断是否结束
当蛇头撞到边框,或者往回走的时候游戏结束。
下面对游戏源代码做出详解:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
body/*规定整个游戏边框的宽和边框*/
{
width:
500px;
margin:
0pxauto;
}
table/*规定整个游戏边框的宽,高和边框*/
{
border:
1pxsolid#cccccc;
width:
500px;
height:
500px;
}
tabletd/*棋盘格的背景色*/
{
background-color:
#ccccff;
}
/*onload是一个加载方法的函数*/
/*开始按钮,并加载btnClick()方法*/
/*编辑框,并加载fen()函数,实现计分功能*/
varcellWidth=13,
cellHeight=13;
varcurrentFood;
varsnake=[];/*将蛇身放到一个数组中*/
vardirection="right";/*开始时默认的运动方向*/
varcurrentDirection;
varfen=0;
functioninit(){
creatFood();/*食物随机出现*/
Snake();/*蛇*/
document.onkeydown=function(event)/*方向控制*/{
vare=window.event||event;
/*if(currentDirection=="left"||currentDirection=="right"){
if(e.keyCode==38){direction="up";}
if(e.keyCode==40){direction="down";}
}
if(currentDirection=="up"||currentDirection=="down"){
if(e.keyCode==37){direction="left";}
if(e.keyCode==39){direction="right";}
}*/
if(e.keyCode==37){
direction="left";
}elseif(e.keyCode==38){
direction="up";
}elseif(e.keyCode==39){
direction="right";
}elseif(e.keyCode==40){
direction="down";/*上下左右都有一个编号,根据编号做出命名,针对命名再写出控制方法*/
}
}
}
functioncreatFood(){
varx=parseInt(Math.random()*cellWidth);
vary=parseInt(Math.random()*cellHeight);
/*利用随即函数得到食物的位置*/
varelement=GetElement(x,y);
currentFood=element;
element.style.backgroundColor="#0cff00";/*食物颜色*/
}
functionSnake(){
varfirstX=5
varfirstY=12;
for(vari=0;i<3;i++){
varid=firstY.toString()+"-"+firstX.toString();
snake.push(id);
varelement=GetElement(firstX,firstY);
element.style.backgroundColor="#0cff00";
firstX--;
}
}
functionbtnClick()/*移动的速度*/{
setInterval(MoveSnake,300);
/*用调用函数时间的间隔来控制蛇的移动速度*/
}
functionMoveSnake()/*根据方向键,控制移动方向*/
{
varsnakePosition=snake[0];
varnum=snakePosition.split("-");
varcurrent_x=num[1];
varcurrent_y=num[0];
if(direction=="right"){
direction!
=37;
current_x++;
}
elseif(direction=="left"){
current_x--;
}
elseif(direction=="up"){
current_y--;
}
elseif(direction=="down"){
current_y++;
}
varid=current_y.toString()+"-"+current_x.toString();
if(current_x<0||current_x>cellWidth||current_y<0||current_x>cellHeight)/*判断结束的函数*/
{
alert("你是铜头铁臂么?
?
?
")
}
for(vari=0;i if(id==snake[i]) { alert("GAMEOVER你是吃货自己吃自己! "); window.location.reload(); } } varelement=GetElement(current_x,current_y); //吃到食物重新加载食物 if(element.id==currentFood.id){ fenshu=fen+5;/*吃一个食物得5分*/ document.getElementById("Text1").value="分数: "+fen; snake.unshift(element.id); creatFood(); /*吃得一个食物后,再次调用食物函数,使游戏继续进行*/ } else{ element.style.backgroundColor="#00ff00"; snake.unshift(id); varendNum=snake.pop(); varendElement=document.getElementById(endNum); endElement.style.backgroundColor="#ccccff"; } } //通过x,y来拼接td的ID属性拼接的格式: “11-7” //并获取这个对象 functionGetElement(x,y){ varid=y.toString()+"-"+x.toString(); returndocument.getElementById(id); }