在线预览
https://1024code.com/codecubes/gpsubu9
代码
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta http-equiv="refresh" content="1">-->
<title>无标题文档</title>
<script>
window.onload=function(){
map=new Map();
map.showMap();
food=new Food();
food.showfood();
snake=new Snake();
snake.showsnake();
snake.snakeMove();
document.getElementsByTagName('body')[0].onkeydown=function(event){
s1=snake.snakebody.length;
if(event.keyCode==39){
snake.snakebody[s1-1][2]="right";
}
if(event.keyCode==37){
snake.snakebody[s1-1][2]="left";
}
if(event.keyCode==38){
snake.snakebody[s1-1][2]="up";
}
if(event.keyCode==40){
snake.snakebody[s1-1][2]="down";
}
}
}
function Map(){
this.showMap=function(){
this.mapdiv=document.createElement('div');
this.mapdiv.style.width=840+'px';
this.mapdiv.style.height=440+'px';
this.mapdiv.style.backgroundColor='pink';
this.mapdiv.style.border="10px solid #666";
this.mapdiv.style.position='absolute';
document.getElementsByTagName('body')[0].appendChild(this.mapdiv);
}
}
function Food(){
this.foodWidth=20;
this.foodHeight=20;
this.foodX=Math.ceil(Math.random()*40);
this.foodY=Math.ceil(Math.random()*20);
this.showfood=function(){
this.fooddiv=document.createElement('div');
this.fooddiv.style.width=this.foodWidth+'px';
this.fooddiv.style.height=this.foodHeight+'px';
this.fooddiv.style.backgroundColor='green';
this.fooddiv.style.position='absolute';
this.fooddiv.style.left=this.foodX*this.foodWidth+'px';
this.fooddiv.style.top=this.foodY*this.foodHeight+'px';
map.mapdiv.appendChild(this.fooddiv);
}
}
function Snake(){
this.snakeWidth=20;
this.snakeHeight=20;
this.snakebody=[
[0,10,'right','blue',null],
[1,10,'right','blue',null],
[2,10,'right','blue',null],
[3,10,'right','blue',null],
[4,10,'right','red',null]
];
this.showsnake=function(){
for(var i=0;i<this.snakebody.length;i++)
{
if(this.snakebody[i][4]==null){
this.snakebody[i][4]=document.createElement('div');
this.snakebody[i][4].style.width=this.snakeWidth+'px';
this.snakebody[i][4].style.height=this.snakeHeight+'px';
this.snakebody[i][4].style.backgroundColor=this.snakebody[i][3];
this.snakebody[i][4].style.position='absolute';
this.snakebody[i][4].style.left=this.snakebody[i][0]*this.snakeWidth+"px";
this.snakebody[i][4].style.top=this.snakebody[i][1]*this.snakeHeight+"px";
this.snakebody[i][4].style.borderRadius=this.snakeWidth+'px';
map.mapdiv.appendChild(this.snakebody[i][4]);
}
}
}
this.snakeMove=function(){
for(var i=0;i<this.snakebody.length;i++)
{
if(this.snakebody[i][2]=='right')
{
this.snakebody[i][0]+=1;}
else if(this.snakebody[i][2]=='left')
{
this.snakebody[i][0]-=1;}
else if(this.snakebody[i][2]=='up')
{
this.snakebody[i][1]-=1;}
else if(this.snakebody[i][2]=='down')
{
this.snakebody[i][1]+=1;}
this.snakebody[i][4].style.left=this.snakebody[i][0]*this.snakeWidth+"px";
this.snakebody[i][4].style.top=this.snakebody[i][1]*this.snakeHeight+"px";}
for(var j=0;j<this.snakebody.length-1;j++)
{
this.snakebody[j][2]=this.snakebody[j+1][2];
}
if(this.snakebody[this.snakebody.length-1][1]<0
||this.snakebody[this.snakebody.length-1][1]>21
||this.snakebody[this.snakebody.length-1][0]<0
||this.snakebody[this.snakebody.length-1][0]>41)
{
alert("OVER");
return;}
if(this.snakebody[this.snakebody.length-1][0]==food.foodX
&&this.snakebody[this.snakebody.length-1][1]==food.foodY){
var newX;
var newY;
var newD=this.snakebody[0][2];
if(this.snakebody[0][2]=="right"){
newX=this.snakebody[0][0]-1;
newY=this.snakebody[0][1];
}
if(this.snakebody[0][2]=="left"){
newX=this.snakebody[0][0]+1;
newY=this.snakebody[0][1];
}
if(this.snakebody[0][2]=="up"){
newX=this.snakebody[0][0];
newY=this.snakebody[0][1]+1;
}
if(this.snakebody[0][2]=="down"){
newX=this.snakebody[0][0];
newY=this.snakebody[0][1]-1;
}
//unshift()加到数组的头部的方法
this.snakebody.unshift([newX,newY,newD,"black",null]);
this.showsnake();
//食物随机
food.foodX=Math.ceil(Math.random()*40);
food.foodY=Math.ceil(Math.random()*20);
food.fooddiv.style.left=food.foodX*food.foodWidth+"px";
food.fooddiv.style.top=food.foodY*food.foodHeight+"px";
}
setTimeout("snake.snakeMove()",200);
}
}
</script>
</head>
<body>
</body>
</html>