html代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
body{background: black}
#rong{width: 1000px;height: 500px;position: relative;margin :auto;
background: white;margin-top: 100px;}
</style>
<body>
<div id="rong"></div>
<script type="text/javascript">
var position='absolute';
var foods=[];
function Shiwu(x,y){
this.x=x;
this.y=y;
this.width=20;
this.height=20;
this.color='green';
}
var suiji={
getRandom:function(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
}
Shiwu.prototype.weizhi=function(map){
shan()
var shi=document.createElement('div');
map.appendChild(shi);
foods.push(shi)
this.x=suiji.getRandom(0,map.offsetWidth/this.width-1)*this.width;
this.y=suiji.getRandom(0,map.offsetHeight/this.height-1)*this.height;
shi.style.position=position;
shi.style.left=this.x+'px';
shi.style.top=this.y+'px';
shi.style.width=this.width+'px';
shi.style.height=this.height+'px';
shi.style.background=this.color;
}
function shan(){
for (var i = foods.length-1; i>=0; i--) {
foods[i].parentNode.removeChild(foods[i]);
foods.pop();
};
}
/*********************蛇对象********************/
(function(){
var elments=[];
function Snake(){
this.width=20;
this.height=20;
this.you='right';
this.body=[{x:3,y:2,color:'blue'},{x:2,y:2,color:'red'},{x:1,y:2,color:'red'}];
this.position='absolute';
}
Snake.prototype.render=function(map){
shan()
for (var i = 0; i < this.body.length; i++) {
var she=document.createElement('div');
map.appendChild(she);
elments.push(she)
she.style.width=this.width+'px';
she.style.height=this.height+'px';
she.style.left=this.body[i].x*this.width+'px';
she.style.top=this.body[i].y*this.height+'px';
she.style.background=this.body[i].color;
she.style.position=this.position;
};
map.children[1].style.zIndex=1000;
function shan(){
for(var i=elments.length-1;i>=0;i--){
elments[i].parentNode.removeChild(elments[i])
elments.pop()
}
}
}
Snake.prototype.move=function(){
for(var i=this.body.length-1;i>0;i--){
this.body[i].x=this.body[i-1].x;
this.body[i].y=this.body[i-1].y;
}
var head=this.body[0];
switch(this.you){
case'right':
head.x+=1;
break;
case'left':
head.x-=1;
break;
case'top':
head.y-=1;
break;
case'bottom':
head.y+=1;
break;
}
}
window.Snake=Snake;
})()
/*****************游戏对象*******************/
function Game(map){
this.time;
Game.prototype.start=function(map){
this.snake=new Snake()
this.snake.render(map)
this.snake.move()
this.snake.render(map)
this.food=new Shiwu();
this.food.weizhi(map);
}
Game.prototype.end=function(map){
this.a=this.snake.body[0].x*this.snake.width;
var b=window.getComputedStyle(map,null).width;
this.c=this.snake.body[0].y*this.snake.height;
var d=window.getComputedStyle(map,null).height;
if (this.a<0||this.a>=parseInt(b)||this.c<0||this.c>=parseInt(d) ){
clearInterval(this.time)
alert('游戏结束')
}
}
Game.prototype.sheChi=function(){
if (parseInt(this.a)==this.food.x&&parseInt(this.c)==this.food.y) {
this.food.weizhi(rong);
var last=this.snake.body[this.snake.body.length-1];
console.log(last);
this.snake.body.push({
x:last.x,
y:last.y,
color:last.color,
})
};
}
}
var rong=document.getElementById('rong')
var game=new Game()
game.start(rong)
function runshe(){
game.time=setInterval(function(map){
game.snake.move()
game.snake.render(map)
game.end(rong)
game.sheChi()
},200,rong)
document.addEventListener('keydown',function(e){
e=e||window.e;
if (e.keyCode==37) {
game.snake.you='left';
}else if (e.keyCode==38) {
game.snake.you='top';
}else if (e.keyCode==39) {
game.snake.you='right';
}else if (e.keyCode==40) {
game.snake.you='bottom';
};
},false)
}
runshe()
</script>
</body>
</html>
