<html>
<head>
<title>贪吃蛇</title>
<style>
*{margin: 0px;}
div{border: 1px solid;}
p{font-size: 50px; position: absolute; left: 400px; top: 600px;}
p1{font-size: 50px; position: absolute; left: 400px;top: 500px;}
</style>
<script>
//描绘地图函数
function Map()
{
var ditu=document.createElement("div");
ditu.style.width=1000+"px";
ditu.style.height=500+"px";
ditu.style.background="url('image/bg1.png')";
document.body.appendChild(ditu);
}
//描绘食物函数
function Food()
{
//食物的横坐标
this.xFood;
//食物的纵坐标
this.yFood;
//食物属性
this.FOOD1;
this.showfood=function()
{
//如果该位置没有食物则创建食物
if(this.FOOD1==null)
{
this.FOOD1=document.createElement("div");
this.FOOD1.style.width=this.FOOD1.style.height=20+"px";
this.FOOD1.style.background="yellow";
this.FOOD1.style.position="absolute";
document.body.appendChild(this.FOOD1);
}
//食物位置的随机数
this.xFood=Math.floor(Math.random()*49);
this.yFood=Math.floor(Math.random()*24);
this.FOOD1.style.left=this.xFood*20+"px";
this.FOOD1.style.top=this.yFood*20+"px";
}
}
//描绘蛇函数
function Snake()
{
var len=20;
var zz=4;
//蛇的初始方向为右
this.direction="right";
//蛇的总长度以及各个蛇节，其中每个蛇节数组中的元素分别代表横纵坐标、背景颜色以及在该位置是否存在这个蛇节
this.snakebody=[[0,0,"lime",null],[1,0,"lime",null],[2,0,"lime",null],[3,0,"red",null]];
//显示蛇函数
this.showsnake=function()
{
for(var i=0; i<this.snakebody.length; i++)
{
//蛇在移动时，如果this.snakebody数组里有蛇节数组，并且蛇节数组第四个元素为空，则重新创建蛇节
if(this.snakebody[i][3]==null)
{
this.snakebody[i][3]=document.createElement("div");
this.snakebody[i][3].style.width=this.snakebody[i][3].style.height=20+"px";
this.snakebody[i][3].style.background=this.snakebody[i][2];
this.snakebody[i][3].style.position="absolute";
document.body.appendChild(this.snakebody[i][3]);
}
this.snakebody[i][3].style.left=this.snakebody[i][0]*len+"px";
this.snakebody[i][3].style.top=this.snakebody[i][1]*len+"px";
}
}
//移动蛇函数
this.movesnake=function()
{
//将每个蛇节的位置复制给下一个蛇节
for(var i=0; i<this.snakebody.length-1; i++)
{
this.snakebody[i][0]=this.snakebody[i+1][0];
this.snakebody[i][1]=this.snakebody[i+1][1];
}
//按左方向键蛇向左移动
if(this.direction=="left")
{
this.snakebody[this.snakebody.length-1][0]-=1;
}
//按上方向键蛇向上移动
if(this.direction=="up")
{
this.snakebody[this.snakebody.length-1][1]-=1;
}
//按右左方向键蛇向右移动
if(this.direction=="right")
{
this.snakebody[this.snakebody.length-1][0]+=1;
}
//按下方向键蛇向下移动
if(this.direction=="down")
{
this.snakebody[this.snakebody.length-1][1]+=1;
}
var X=this.snakebody[this.snakebody.length-1][0];
var Y=this.snakebody[this.snakebody.length-1][1];
//当蛇吃到食物
if(X==food.xFood && Y==food.yFood)
{
//重新显示食物
food.showfood();
//增加一个蛇节
var newjie=[this.snakebody[0][0],this.snakebody[0][1],"lime",null];
this.snakebody.unshift(newjie);
//增加分数
zz++;
document.getElementById("changdu").innerHTML="蛇的长度：<font color='red'>"+zz+"</font>";
}
//当蛇撞到地图边缘则游戏结束
if(X<0||X>49||Y<0||Y>24)
{
alert("Game Over");
clearInterval(timer);
return false;
}
//当蛇撞到自己则游戏结束
for(var k=0; k<this.snakebody.length-1; k++)
{
if(X==this.snakebody[k][0] && Y==this.snakebody[k][1])
{
alert("Game Over");
clearInterval(timer);
return false;
}
}
this.showsnake();
}
}
window.οnlοad=function()
{
//创建地图对象
map=new Map();
//创建食物对象
food=new Food();
//显示食物
food.showfood();
//创建蛇对象
snake=new Snake();
//显示蛇
snake.showsnake();
//使蛇移动起来
timer=setInterval("snake.movesnake()",100);
//键盘方向事件
document.οnkeydοwn=function(jianpan)
{
var evt=jianpan.keyCode;
switch(evt)
{
case 32: alert("游戏暂停"); break;
case 37:
if(snake.direction!="right")
{
snake.direction="left";
}
break;
case 38:
if(snake.direction!="down")
{
snake.direction="up";
}
break;
case 39:
if(snake.direction!="left")
{
snake.direction="right";
}
break;
case 40:
if(snake.direction!="up")
{
snake.direction="down";
}
break;
}
}
}
</script>
</head>
<body>
<p1>暂停：空格键</p1>
<p id="changdu">蛇的长度：<font color="red">4</font></p>
<audio controls="controls" height="100" width="100" autoplay= "autoplay" loop="loop" hidden="true">
<source src="music/bg.mp3" type="audio/wav"/>
</audio>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
