项目经理辛兴涛老师带领 贪吃蛇完工，看看效果吧 代码比较简单 功能比较齐全
2012-11-25 10:24
288 查看
<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';
this.div=new_div;
document.getElementById('map').appendChild(this.div);
}
this.reDisplay=function(){
document.getElementById('map').removeChild(this.div);
this.display();
}
}
//显示蛇
function Snake(){
this.w = 20;
this.h = 20;
this.direct = 'right';//方向
this.body = [
{x:5,
y:3,
color:"blue"
},
{x:4,
y:3,
color:"red"
},
{x:3,
y:3,
color:'red'
}
];
this.display = function(){
//通过数组来保存蛇身，一个元素代表一个蛇节，
//遍历蛇身，根据每节 产生一个div
for(var i=0; i<this.body.length; i++) {
//得到当前的蛇节，显示
//创建一个div
var snake_div = document.createElement('div');
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.width = this.w + 'px';
snake_div.style.height = this.h + 'px';
snake_div.style.backgroundColor = this.body[i].color;
document.getElementById('map').appendChild(snake_div);
//将显示的div记录下来
this.body[i].div = snake_div;
//alert('hello');
}
}
this.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;
}
//移动蛇头
switch(this.direct){
case 'up':
this.body[0].y -=1;
break;
case 'down':
this.body[0].y +=1;
break;
case 'left':
this.body[0].x -=1;
break;
case 'right':
this.body[0].x +=1;
break;
}
//alert(this.body[0].x);
//把旧的蛇节删除
this.removeSnake();
//按照新的位置属性重新显示一下
this.display();
if(this.body[0].x<0||this.body[0].x>39||this.body[0].y<0||this.body[0].y>19){
alert('游戏结束！');
clearInterval(snake_id);
}
for(var i=this.body.length-1;i>=4;i--){
if(this.body[0].x==this.body[i].x&&this.body[0].y==this.body[i].y){
alert('游戏结束！');
clearInterval(snake_id);
break;
}
}
//判断头部位置和事物的坐标重合蛇身长长
if(this.body[0].x==food.x&&this.body[0].y==food.y){
this.body[this.body.length]={x:0,y:0,color:'red',div:null};
food.reDisplay();
}
}
this.removeSnake = function(){
//先找到他的父元素
var map = document.getElementById('map');
for(var i=0;i<this.body.length;i++){
if(this.body[i].div !=null){
map.removeChild(this.body[i].div);
}
}
}
//判断方向
this.setDirect = function(keycode){
switch(keycode){
case 37:
if(this.direct != 'right'){
this.direct = 'left';
}
break;
case 38:
if(this.direct != 'down'){
this.direct = 'up';
}
break;
case 39:
if(this.direct !='left'){
this.direct = 'right';
}
break;
case 40:
if(this.direct != 'up'){
this.direct = 'down';
}
break;
}
}
}
function init(){
food = new Food();
food.display();
snake = new Snake();
snake.display();
}
function start(){
snake_id = setInterval("snake.move()",300);
}
function changeDirect(evt){
snake.setDirect(evt.keyCode);
}
</script>
</head>
<body onload="init();" onkeydown="changeDirect(event)">
<div id="container">
<input type="button" onclick="start();" value="开始">
<div id="map"></div>
</div>
</body>
#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';
this.div=new_div;
document.getElementById('map').appendChild(this.div);
}
this.reDisplay=function(){
document.getElementById('map').removeChild(this.div);
this.display();
}
}
//显示蛇
function Snake(){
this.w = 20;
this.h = 20;
this.direct = 'right';//方向
this.body = [
{x:5,
y:3,
color:"blue"
},
{x:4,
y:3,
color:"red"
},
{x:3,
y:3,
color:'red'
}
];
this.display = function(){
//通过数组来保存蛇身，一个元素代表一个蛇节，
//遍历蛇身，根据每节 产生一个div
for(var i=0; i<this.body.length; i++) {
//得到当前的蛇节，显示
//创建一个div
var snake_div = document.createElement('div');
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.width = this.w + 'px';
snake_div.style.height = this.h + 'px';
snake_div.style.backgroundColor = this.body[i].color;
document.getElementById('map').appendChild(snake_div);
//将显示的div记录下来
this.body[i].div = snake_div;
//alert('hello');
}
}
this.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;
}
//移动蛇头
switch(this.direct){
case 'up':
this.body[0].y -=1;
break;
case 'down':
this.body[0].y +=1;
break;
case 'left':
this.body[0].x -=1;
break;
case 'right':
this.body[0].x +=1;
break;
}
//alert(this.body[0].x);
//把旧的蛇节删除
this.removeSnake();
//按照新的位置属性重新显示一下
this.display();
if(this.body[0].x<0||this.body[0].x>39||this.body[0].y<0||this.body[0].y>19){
alert('游戏结束！');
clearInterval(snake_id);
}
for(var i=this.body.length-1;i>=4;i--){
if(this.body[0].x==this.body[i].x&&this.body[0].y==this.body[i].y){
alert('游戏结束！');
clearInterval(snake_id);
break;
}
}
//判断头部位置和事物的坐标重合蛇身长长
if(this.body[0].x==food.x&&this.body[0].y==food.y){
this.body[this.body.length]={x:0,y:0,color:'red',div:null};
food.reDisplay();
}
}
this.removeSnake = function(){
//先找到他的父元素
var map = document.getElementById('map');
for(var i=0;i<this.body.length;i++){
if(this.body[i].div !=null){
map.removeChild(this.body[i].div);
}
}
}
//判断方向
this.setDirect = function(keycode){
switch(keycode){
case 37:
if(this.direct != 'right'){
this.direct = 'left';
}
break;
case 38:
if(this.direct != 'down'){
this.direct = 'up';
}
break;
case 39:
if(this.direct !='left'){
this.direct = 'right';
}
break;
case 40:
if(this.direct != 'up'){
this.direct = 'down';
}
break;
}
}
}
function init(){
food = new Food();
food.display();
snake = new Snake();
snake.display();
}
function start(){
snake_id = setInterval("snake.move()",300);
}
function changeDirect(evt){
snake.setDirect(evt.keyCode);
}
</script>
</head>
<body onload="init();" onkeydown="changeDirect(event)">
<div id="container">
<input type="button" onclick="start();" value="开始">
<div id="map"></div>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 项目经理辛兴涛老师带领 贪吃蛇完工，看看效果吧 代码比较简单
- 贪吃蛇完工，看看效果吧 代码比较简单
- [导入]AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- JS 拖动效果实现代码 比较简单
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- JavaScript图片放大镜效果代码[代码比较简单]
- 看看一个朋友写的代码，大家发表发表意见，比较简单的代码
- [导入]AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 看看一个朋友写的代码，大家发表发表意见，比较简单的代码
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- JS 拖动效果实现代码 比较简单
- 看看一个朋友写的代码，大家发表发表意见，比较简单的代码
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 看看一个朋友写的代码，大家发表发表意见，比较简单的代码
- apache的项目nets项目--commons-net-1.2.2.jar功能齐全，例子代码如下：
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- JavaScript图片放大镜效果代码[代码比较简单]
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 张孝祥老师交通灯管理系统的学习笔记 在做一件事时，首先要明确要达到什么效果。有目的性。就软件项目来说就是，首先要看的就是项目所提出的项目要求。做项目，不急于写代码，先把问题搞清楚，把要求分