js贪吃蛇

来源：互联网发布：淘宝商城化妆品专柜编辑：程序博客网时间：2024/04/27 09:15

event:event对象表示有关事件的信息。
keyCode：是event的一个属性。对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码

。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的

布局相关。

function changeDirect(evt){
alert(evt.keyCode);//这个句式event.keyCode;这个就是显示你的键盘上你按的键的

unicode字符码，获得unicode字符码值

}
//onkeydown某个键盘按键被按下。就会触发这个事件
</script>

</head>

</body>

这个是按键盘上向下的箭头键的Unicode字符码值

这个是按字母A键的unicode字符码值。这些值在做游戏时，可以把键盘上的键设置向上向下向左向右。

做贪吃蛇让，思路：
1、首先要做一个图层（map），让蛇跟食物在图层里运动
2、做食物，食物是一个图层，利用javascript DOM对象，创建食物图层
3、做蛇，蛇是一个图层，有三节，先设置蛇的默认位置，利用javascript DOM对象，创建蛇图层。
4、蛇的移动（默认向右移动），先移动蛇身，后边的蛇身永远覆盖前面的蛇身，移动蛇头，蛇的移动方向，向上移动y轴减1，向下移动y轴加1，向左移动x轴减1，向右移动x轴加1.移动新的地方，要把旧的蛇删除，按照新的位置重新显示蛇。
5、结合键盘，通过event.keyCode;显示你的键盘上你按的键的unicode字符码，获得unicode字符码值。做出向上跑的键，向下跑的键。
（这个贪吃蛇只做到这里，还会进一步完善做完）只是实现了蛇的走动，向上向下左右走动，还没实现碰到图层边就死和吃食物
1、tanchishe.html
<style type="text/css">
/*如果是.map下面就要用class=map*/
#container{
width:800px;
margin:auto;
margin_top:60px;
}
#map{
width:800px;
height:400px;
background-color:#ccc;
overflow:hidden;
position:absolute;
}
</style>
<script language="javascript" type="text/javascript">
//设置食物，食物是一个div
function Food(){
this.w=20;
this.h=20;
this.color='red';
//显示食物
this.display=function(){//display是一个函数名，后面是函数体
  //我们显示一个食物，首先要知道，大小，位置，属性
  var new_div=document.createElement('div');//创建div节点
  new_div.style.width=this.w+'px';//设置div的宽
  new_div.style.height=this.h+'px';
  //位置我们采用0,1,2....
  //还要求出有多少个空格
  //整个大的图层长800，宽400，而食物长，宽20，长一共能放下40个，宽能放下20个，大图层句这样被分成几个小格格
  //蛇和食物都是20px，整个图层就是被分成多少个格格，格格的宽和高是20px，x就是横着几个格格，y是竖着几个格格
  //当前的坐标x：0-1乘以39个它小于40个，x就是有几个格格。y：就是小于20个，让食物在这个范围内活动
  this.x=Math.round(Math.random()*39);//Math.random()产生0-1之间的数，

Math.round四舍五入
  this.y=Math.round(Math.random()*19);

  //食物div距左边的距离：食物的宽*x几个格格，因为格格是按照食物分的
  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);//把这个食物div添加到

mapdiv中
}

}

//设置蛇
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');//创建div节点

  snake_div.style.width =this.w+'px';//div的宽，蛇的宽
  snake_div.style.height =this.h+'px';

  //蛇和食物都是20px，整个图层就是被分成多少个格格，格格的宽和高是20px，x就是横着几个格格，y是竖着几个格格
  //蛇具左边的距离：蛇的宽*x格格数，
  snake_div.style.left = (this.w*this.body[i].x)+'px';//this.body[i].x就是为了获得x的值
  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);//把蛇这个div添加到map这个div中



   //将显示的div记录下来
           this.body[i].div = snake_div;
}
}

//蛇移动
this.move=function(){
//先移动蛇身，后面的覆盖前面的i=this.body.length-1，因为蛇一共有三节，this.body.length=3，而数组的下标是0,1,2，蛇身就是2,1，i>0是因为蛇头是0，this.body[0],不能把蛇头给覆盖
for(var i=this.body.length-1;i>0;i--){
  this.body[i].x=this.body[i-1].x;//x向前移动一个，行走时，不论x，y后面的永远覆盖前面的
  this.body[i].y=this.body[i-1].y;

  }

//移动蛇头
switch(this.direct){//因为是蛇头，它时这个json对象中的第一个元素，所以是body[0]。判断当前的蛇的方向
  case 'up'://如果蛇的方向是向上的话，就y-1

this.body[0].y-=1;//this.body[0].y=this.body[0].y-1假如y=3，向上走一个，y=2
  break;//break跳出整个循环
  case 'down':
  this.body[0].y+=1;
  break;
  case 'left':
  this.body[0].x-=1;
  break;
  case 'right':
  this.body[0].x+=1;//x,y改变了，json对象中的x，y也会改变，this.body中的x，y也会改变
  break;
  }
  //把旧的蛇节删除
  this.removeSnake();
  //按照新的位置属性重新显示一下
  this.display();//重新调用display函数，重新显示蛇，而蛇的位置已经发生改变，在switch循环中，x或y发生改变（蛇的位置发生改变），x，y的值改变this.body对象中的xy也发生改变，此时显示的就是蛇的新的位置，此时注意不要把json对象设置到display函数中，如果设置到其中，你重新设置蛇的位置它还是事先定义好的（默认蛇的位置），因为如果你设置到display函数中，它就是局部变量了，作用域只在display函数内，外面就改变不了了，而全局的就能更改它的值，相当于给变量重新赋值

  //判断方向，这个是键盘的判断
  //keycode对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
  this.setDirect=function(keycode){//传进来键的unicode字符码
   switch(keycode){
    case 37://因为向上的键unicode的值是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');//得到map图层中的所有内容
   for(var i=0;i<this.body.length;i++){
    map.removeChild(this.body[i].div);// 删除子节点。你同过appendChild把蛇的div添加到map的div中，你在删除map的div中的子节点，也就是蛇，通过for循环，一节一节删除

    }
   }


}
function init(){
  food = new Food();//实例化一个对象
  food.display();//通过它的对象调用它的方法

  snake = new Snake();//实例化一个对象
  snake.display();//snake相当于全局变量
}
   function start(){
     //snake.move();//当调用move时，就会移动，刷新一次，就移动一下
  snake_id=setInterval("snake.move()",300);
  }
   function changeDirect(evt){
   // alert(evt.keyCode);//这个就是显示你的键盘上你按的键的unicode字符码，获得unicode字符码值
  snake.setDirect(evt.keyCode);//这个是调用snake中的setDirect函数，因为snake是全局变量
   }
</script>

</head>

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