贪吃蛇的制作

最新推荐文章于 2022-03-20 11:46:28 发布

guopengfei12

最新推荐文章于 2022-03-20 11:46:28 发布

阅读量431

点赞数

本文链接：https://blog.csdn.net/guopengfei12/article/details/8205410

版权

今天贪吃蛇的制作终于结束了，我们也将这个小游戏给做出来啦啊。。。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#container{
   width:800px;
   margin:auto;
   margin-top:60px;
   }
#map{
   width:800px;
   height:400px;
   background-color:#CCC;
   border-color:#00F;
   border-style:ridge;
   overflow:hidden;
   position:absolute;

   }
</style>
<script type="text/javascript" language="javascript">
//变量不使用var是因为变量的生存周期，如果出了函数体变量就会失效
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);//求x轴有多少空格
       this.y = Math.round(Math.random()*19);//求y轴有多少空格

       //利用坐标确定位置
       new_div.style.left=(this.w*this.x)+'px';//离左端的距离，也是x轴坐标
       new_div.style.top=(this.h*this.y)+'px';//离左端的距离，也是y轴坐标

       new_div.style.backgroundColor=this.color;
       new_div.style.position="absolute";
       document.getElementById('map').appendChild(new_div);
       //生成食物的时候就要给这个食物做个标记，以便一会儿我要删除它
       this.taiji = new_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(){
       //通过数组来保存蛇身，一个元素代表一个蛇节
       this.body=[
          { x:this.body[0].x,y:this.body[0].y,color:"blue"},
          { x:this.body[1].x,y:this.body[1].y,color:"red"},
          { x:this.body[2].x,y:this.body[2].y,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.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].div = 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;
                           // this.body[0].y=this.body[0].y;
                           //alert(this.body[0].x);
                              //alert(this.body[0].y);
                           break;

                       }

                       //把旧的蛇节删除
                            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('Game Over');
                           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('Game Over');
                                   clearInterval(snake_id);
                                   break;
                           }
                       }
                       //吃食物后长一节,判断头部坐标和食物的坐标重合
                       if(this.body[0].x == food.x && this.body[0].y == food.y){
                           //现在吃上食物了，蛇身长一节，通过给this.body增加一个元素即可
                           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[this.body.length] != 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 = new Snake();
       //snake.move();
       snake_id = setInterval('snake.move()',300);
       }
    function changeDirect(evtkey){

       snake.setDirect(evtkey.keyCode);
       }
</script>
</head>

<body οnlοad="init()" οnkeydοwn="changeDirect(event)">
<div id="container">
<input type="button" value="开始" οnclick="start()"/>
<div id="map">
</div>
</div>
</body>
</html>