js版贪吃蛇小游戏

a、基本思路
1、DOM创建地图
2、创建蛇和食物
3、监听键盘事件
4、遇到食物，吃食物，蛇身增长
5、碰撞分析（撞墙、撞到自己）
 
b、类设计
1、游戏主要控制类。
main.js 
 1 var Game={
 2       this.play=null,
 3     this.stepX=10,
 4     this.stepY=0,
 5     this.step=10,
 6     init:function(){
 7         this.snake=new snake();
 8         this.map=new map();
 9     },
10 
11     keydown:function(event){
12         var e=event||window.event;//处理兼容问题
13         var ee=e.keyCode||e.which||e.charCode;
14         switch(ee){
15           case 37:
16             this.stepX=-this.step;
17             this.stepY=0;
18             break;
19           case 38:
20             this.stepY=-this.step;
21             this.stepX=0;
22             break;
23           case 39:
24             this.stepX=this.step;
25             this.stepY=0;
26             break;
27           case 40:
28             this.stepY=this.step;
29             this.stepX=0;
30             break;
31         }
32         if(this.play){
33           clearInterval(this.play);
34         }
35         this.play=setInterval("this.move(this.stepX,this.stepY)",200); //匿名函数
36       }
37 
38 }
39 
40 
41 
42 
43 function begin(){
44     Game.init();
45 }

clearInterval用的不熟，每setInterval一下会产生一个新的Id，每次按键后续清除掉

2、画布类

map.js 
var map=function(){
    this.dom=null;
    this.id=null;
    this.init();
}

map.prototype={
    init:function(){
        this.dom=document.createElement("div");
        this.dom.id="map";
        this.dom.style.position="absolute";
        this.dom.style.width=300+"px";
        this.dom.style.height=300+"px";
        this.dom.style.left="35%";//具体屏幕左边35%
        this.dom.style.top="20%";
        this.dom.style.background="url(map.gif)";//背景图
        this.createMap();
    },
    createMap:function(){
        document.body.appendChild(this.dom);//附加到body上
        var oSnake=new snake();
        oSnake.init();
        var oFood=new food();
        oFood.init();
    }
}

3、食物类

food.js 
 1 var food=function(){
 2 }
 3 
 4 food.prototype={
 5   init:function(){
 6     this.dom=document.createElement("div");
 7     this.dom.id="food";
 8     this.createFood();
 9   },  
10   
11   createFood:function(){
12     var map=document.getElementById("map");
13     this.dom.style.width=10+"px";
14     this.dom.style.height=10+"px";
15     this.dom.style.backgroundColor="yellow";
16     this.dom.style.left=parseInt(Math.random()*30)*10+"px";
17     this.dom.style.top=parseInt(Math.random()*30)*10+"px";
18     this.dom.style.position="absolute";
19     map.appendChild(this.dom);
20   }
21 }

4、蛇类

snake.js 
 1 var snake=function(){
 2     this.dom=null;
 3     this.id=null;
 4     this.snakeSize=10;
 5     this.tFood=null;
 6     this.snakes = [];
 7     this.mapSize=300;
 8     this.play=null;
 9 }
10 snake.prototype={
11     init:function(){
12         this.dom=document.createElement("div");
13         this.dom.id="snake";
14         this.createSnake();
15         this.tFood=new food();//注意命名问题，不要重复了。不然会出现错误
16     },
17     createSnake:function(){
18         var map=document.getElementById("map");
19         this.dom.style.width=10+"px";
20         this.dom.style.height=10+"px";
21         this.dom.style.backgroundColor="red";
22         this.dom.style.left=parseInt(Math.random()*30)*10+"px";
23         this.dom.style.top=parseInt(Math.random()*30)*10+"px";
24         this.dom.style.position="absolute";//离父节点距离
25         map.appendChild(this.dom);//附加到map上
26     },
27 
28     snakeEat:function(){
29         var map=document.getElementById("map");
30         var snake=document.getElmeentById("snake");
31         var newsnake=snake.cloneNode(false);//cloneNode复制节点，但不复制子节点
32         this.snakes[this.snakes.length]=newsnake;//将新节点加在数组最后
33         map.appendChild(newsnake);
34     },
35     //移动
36     move:function(x,y){
37         var snake=document.getElementById("snake");
38         var snakeLeft=parseInt(snake.style.left);
39         var snakeTop=parseInt(snake.style.top);
40         this.checkFood(snakeLeft+x,snakeTop+y);
41         if(!this.hit(snakeLeft+x,snakeTop+y)){//碰撞判断
42             clearInterval(this.play);
43             alert("GAME OVER!");
44             document.location.reload(true);//重新刷新
45             return;   
46         }
47         snake.style.left=(snakeLeft+x)+"px";
48         snake.style.top=(snakeTop+y)+"px";
49         if(this.snakes.length>0){
50             for(var i=this.snakes.length-1;i>0;i--){
51                 this.snakes[i].style.top=this.snakes[i-1].style.top;
52                 this.snakes[i].style.left=this.snakes[i-1].style.left;
53         }
54             this.snakes[0].style.top=snakeTop+"px";
55             this.snakes[0].style.left=snakeLeft+"px";
56         }
57     },
58     //碰撞判断
59     hit:function(x,y){ 
60         var len=this.snakes.length;
61         if (x<0||x>this.mapSize-10||y<0||y>this.mapSize-10){
62             clearInterval(this.play);
63             return false;
64         }
65         for(var i=1;i<len-1;i++)//注意parseInt用法，可将数字+px转成数字
66             if (x==parseInt(this.snakes[i].style.left) && y==parseInt(this.snakes[i].style.top)-10){
67                 return false;
68             }
69             return true;
70     },
71     //检查是否有食物
72     checkFood:function(x,y){
73         var divFood=document.getElementById("food");//不要重名。否则出错
74         var foodX=parseInt(divFood.style.left);
75         var foodY=parseInt(divFood.style.top);
76         if(x==foodX && y==foodY){
77             divFood.parentNode.removeChild(divFood);//移除节点
78             var tFood=new food();
79             tFood.init();   
80             this.snakeEat();
81         }
82     }
83 }

 

总结，第一次用类来实现，有些吃力。多个文件调用起来还是不熟，特别是参数，this，都老用错。一些基础的也没记牢，接下来要多实践，多总结。。

posted on 2012-09-27 10:36  zhangyh2010  阅读(237)  评论(0)    收藏  举报

导航