贪食蛇小游戏

最新推荐文章于 2025-04-01 11:04:06 发布

原创最新推荐文章于 2025-04-01 11:04:06 发布 · 408 阅读

CC 4.0 BY-SA版权

学习制作贪食蛇小游戏的部分代码，今天学习了一部分

<!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.position ='absolute';
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.backgroundColor = this.body[i].color;
document.getElementById('map').appendChild(snake_div);

}

}
}
function init(){
food = new Food();
food.display();
snake = new snake();
snake.display();
}

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