核心提示：简易的贪吃蛇小游戏代码实现htmlhtmlhead lang=enmeta charset=UTF-8title贪吃蛇titlescriptfunction Map(){this.width=1200...
简易的贪吃蛇小游戏代码实现
html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>贪吃蛇title>
<script>
function Map(){
this.width=1200;
this.height=600;
this.background="pink";
this.position="relative";
this._map=null;
}
Map.prototype.createMap=function(){
if(this._map==null){
this._map=document.createElement('p');
this._map.style.width=this.width+"px";
this._map.style.height=this.height+"px";
this._map.style.backgroundColor=this.background;
this._map.style.position=this.position;
document.body.appendChild(this._map);
}
}
function Snake(){
this.width=30;
this.height=30;
this.direct="right";
this.position="absolute";
this._snake=[[null,1,1,"#f1f1f1"],[null,2,1,"#f1f1f1"],[null,3,1,"red"]];
}
Snake.prototype.createSnake=function(){
for (var i in this._snake){
if (this._snake[i][0]==null){
this._snake[i][0]=document.createElement('p');
this._snake[i][0].style.width=this.width+"px";
this._snake[i][0].style.height=this.height+"px";
this._snake[i][0].style.position=this.position;
this._snake[i][0].style.backgroundColor=this._snake[i][3];
this._snake[i][0].style.zIndex=3;
map._map.appendChild(this._snake[i][0]);
}
this._snake[i][0].style.left=this._snake[i][1]*this.width+"px";
this._snake[i][0].style.top=this._snake[i][2]*this.height+"px";
this._snake[i][0].style.border="1px solid black";
}
}
Snake.prototype.snakeMove=function(){
for(var i=0;i<this._snake.length-1;i++)
{
this._snake[i][1]=this._snake[i+1][1];
this._snake[i][2]=this._snake[i+1][2];
}
switch(this.direct) {
case "left":
this._snake[this._snake.length - 1][1] -= 1;break;
case "right":
this._snake[this._snake.length - 1][1] += 1;break;
case "top":
this._snake[this._snake.length - 1][2] -= 1;break;
case "bottom":
this._snake[this._snake.length - 1][2]+=1;
}
if(!((this._snake[this._snake.length - 1][1]<40&&
this._snake[this._snake.length - 1][1]>=0)&&
(this._snake[this._snake.length - 1][2]<20&&
this._snake[this._snake.length - 1][2]>=0))
)
{
clearInterval(timer);
alert("你输了！~_~");
return;
}
this.createSnake();
}
Snake.prototype.snakeEat=function(){
this.snakeMove();
if(this._snake[this._snake.length-1][1]==box._box[1]&&
this._snake[this._snake.length-1][2]==box._box[2])
{
this._snake.unshift(box._box);
switch(this.direct){
case "left":this._snake[0][1]=this._snake[1][1]+1;
this._snake[0][2]=this._snake[1][2];
break;
case "right":this._snake[0][1]=this._snake[1][1]-1;
this._snake[0][2]=this._snake[1][2];
break;
case "top":this._snake[0][1]=this._snake[1][1];
this._snake[0][2]=this._snake[1][2]+1;
break;
case "bottom":this._snake[0][1]=this._snake[1][1];
this._snake[0][2]=this._snake[1][2]-1;
}
this._snake[0][3]=this._snake[1][3];
this._snake[0][0].style.backgroundColor=this._snake[0][3];
box.createBox();
}
}
function Box(){
this.width=30;
this.height=30;
this.background="orange";
this.position="absolute";
this._box=[];
}
Box.prototype.createBox=function(){
this._box=[null,0,0,"orange"];
this._box[0] = document.createElement('p');
this._box[0].style.width = this.width + "px";
this._box[0].style.height = this.height + "px";
this._box[0].style.position = this.position;
this._box[0].style.backgroundColor=this._box[3];
this._box[1] = Math.floor(Math.random()*40);
this._box[2]=Math.floor(Math.random()*20);
this._box[0].style.left=this._box[1]*this.width+"px";
this._box[0].style.top=this._box[2]*this.height+"px";
map._map.appendChild(this._box[0]);
}
var map=null;
var snake=null;
var box=null;
var timer=null;
var direction=39;
window.onload=function(){
map=new Map();
map.createMap();
snake=new Snake();
snake.createSnake();
timer=setInterval("snake.snakeEat()",500);
document.onkeydown=function(e){
switch(e.keyCode){
case 37:
if(direction!=39){
snake.direct="left";
direction=37;
}
break;
case 38:
if(direction!=40) {
snake.direct = "top";
direction=38;
}
break;
case 39:
if(direction!=37){
snake.direct="right";
direction=39;
}
break;
case 40:
if(direction!=38){
snake.direct="bottom";
direction=40;
}
break;
}
}
box=new Box();
box.createBox();
}
script>
head>
<body>
body>
html>
