怎样实现一个图层的运动（可实现贪吃蛇小游戏，代码现不完善，请关注本人，今日完善）

最新推荐文章于 2021-10-15 01:06:39 发布

持之以恒

最新推荐文章于 2021-10-15 01:06:39 发布

阅读量1k

点赞数

分类专栏：学习文章标签： button div function 浏览器游戏

本文链接：https://blog.csdn.net/qq1355541448/article/details/8194089

版权

学习专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<!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>

  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.body = [
  {x:5,
  y:3,
  color:"blue"
  },
  {x:4,
  y:3,
  color:"red"
  },
  {x:3,
  y:3,
  color:'red'
  }
]
this.display = function(){
//通过数组来保存蛇身，一个元素代表一个蛇节，

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);
  this.body[i].di=snake_div;
}
}

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;
}
if(this.body[i].x<0){alert('GAME OVER');clearInterval(id); }
if(this.body[i].x>39){alert('GAME OVER');clearInterval(id); }
if(this.body[i].y<0){alert('GAME OVER');clearInterval(id); }
if(this.body[i].y>19){alert('GAME OVER');clearInterval(id); }
this.removeSnake();
this.display();
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;
}
}
}
this.removeSnake=function(){
var map=document.getElementById('map');
for(var i=0;i<this.body.length;i++){
map.removeChild(this.body[i].di);
}
}
}
function init(){
food = new Food();
food.display();

   snake = new Snake();
   snake.display();
}

function start(){
id=setInterval("snake.move()",300);
}
function changeDirect(ev){
snake.setDirect(ev.keyCode);
}
function restart(){
history.go(-2)//上级页面
  }
</script>
</head>

</body>
</html>

持之以恒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
怎样实现一个图层的运动（可实现贪吃蛇小游戏，代码现不完善，请关注本人，今日完善）

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> new document #container{ width:800px; margin:auto; margin-top:60px; }
复制链接

扫一扫

专栏目录