JAVASCRIPT贪吃蛇

来源：互联网发布：米拓cms 编辑：程序博客网时间：2024/04/29 12:57

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
#container{
width:800px;
margin:auto;
margin_top:60px;
}
#map{
width:800px;
height:400px;
background-color:#ccc;
overflow:hidden;
position:absolute;
}
</style>

<script type="text/javascript">
function Food(){
this.w = 20;
this.h = 20;
this.color = 'red';
//显示食物
this.display = function(){
//我们显示一个食物，首先要知道，大小，位置，属性
var new_div = document.createElement('div');
new_div.style.width = this.w+'px';
new_div.style.height = this.h+'px';
//位置我们采用0,1,2....
//还要求出有多少个空格
this.x = Math.round(Math.random()*39);
this.y = Math.round(Math.random()*19);

new_div.style.left = (this.w*this.x)+'px';
new_div.style.top = (this.h*this.y)+'px';
new_div.style.backgroundColor = this.color;
new_div.style.position = 'absolute';
document.getElementById('map').appendChild(new_div);

}
}

//显示蛇
function Snake(){
this.w = 20;
this.h = 20;
this.direct = 'right';

this.display = function(){
//通过数组来保存蛇身，一个元素代表一个蛇节，
this.body = [
{x:5,
y:3,
color:"blue"
},
{x:4,
y:3,
color:"red"
},
{x:3,
y:3,
color:'red'
}
]
for(var i = 0;i<this.body.length;i++){
var snake_div = document.createElement('div');

snake_div.style.width =this.w+'px';
snake_div.style.height =this.h+'px';

snake_div.style.left = (this.w*this.body[i].x)+'px';
snake_div.style.top = (this.h*this.body[i].y)+'px';

snake_div.style.position = 'absolute';
snake_div.style.backgroundColor = this.body[i].color;
document.getElementById('map').appendChild(snake_div);
}
}
}
function init(){
food = new Food();
food.display();

snake = new Snake();
snake.display();
}
</script>

</head>

<body onload="init();">
<div id="container">
<input type="button" onclick="start()" value="开始">
<div id="map"></div>
</div>

</body>
</html>