利用javascript实现贪吃蛇部分小应用

利用javascript实现简易贪吃蛇的小应用：
   首先，利用css构造一个图层，确定该图层的宽和高（80px，40px）作为贪吃蛇的后动范围，其次利用javascript开始创建蛇和食物：
   
1、利用构造器的方法创建一个food()函数{
   food的宽和高（大小）；
 food的颜色（属性）；
 一个显示food的方法display(){
 定义一个新的小图层new_div=新创建的图层；
 通过style来定义new_div的宽和高； 
 确定food的位置距离x轴和y轴的小方格数并让食物随机出现=》利用Math.round(Math.rand());
        确定food距离左边界和上边界的长度：利用以求出的方格数*food的边长；
 确定new_div的颜色（利用style.backgroundColor）;
 确定new_div的位置(利用style.position)；
 添加子节点即new_div，必须要确定在哪个父元素中添加(利用getElementById().appendChild()) ;
 }

 }
2、利用构造器的方法创建一个snake()函数{
 确定每个蛇节的宽和高；
 蛇要活动的方向；
        蛇身的每个蛇节距x，y轴的距离和每个蛇节的颜色（利用json格式的数组字面量方法[{x:,y:,color:},{},{},……]）
 显示出snake的方法display(){
     利用循环将每个蛇节都显示出来for(){
 定义一个newsnake存放新创建的蛇的小图层;
 利用style确定newsnake的宽和高；
 利用style确定newsnake距离左边界和上边界的距离(每个蛇节的宽和高*循环到的第几个蛇节)；
 确定每个蛇节的颜色；
 确定newsnake的位置；
       给每个蛇节记上标记（为了以后删除旧的蛇身）
 }
   }
 创建移动的函数this.move(){
  先移动蛇身：通过for循环让后一个蛇节移动到前一个蛇节的位置以此类推：for(){
  新蛇节的x轴位置=旧蛇节的前一个x
  新蛇节的y轴位置=旧蛇节的前一个y
  }
 在移动蛇头：蛇头得注意移动的方向=》利用switch语句
          switch（this.direct）{
  case 'up':蛇头的y坐标-=1；
  case 'down':蛇头的y坐标+=1
  case 'left':蛇头的x坐标+=1
  case 'right':蛇头的x坐标+=1}
 删除旧的蛇节删除旧的蛇：this.remove();
        将新蛇节显示出来this.display();
 创建移除的函数this.remove(){
 找到父元素：利用getElementById；
 通过for循环删除旧的蛇节：removeChild（this.body[i].she）;
  }
 判断方向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;
   }
  }

}               

初始化函数（）{
food=new food（）；
food.display();
snake=new snake（）；
snake.display();
}

创建一个点击开始的函数(){
setInterval("snake.move()",300)

}
function changedirect(evt){
 snake.setDirect(evt.keyCode);
}