使用Html5+JS做的贪吃蛇小游戏

学习了Html5的Canvas的使用，和JS创建对象，做了一个贪吃蛇小游戏，来巩固JS面向对象编程和Canvas的用法。

Node.js

 

 1 /**
 2  * 格子类,组成贪吃蛇和舞台
 3  */
 4 function Node(x,y){
 5     this.x=x;
 6     this.y=y;
 7     /**
 8      * 比较两个格子是否重合
 9      */
10     this.equals=function(x,y){
11         return this.x==x&&this.y==y;
12     }
13 }

Snake.js

  1 /*定义全局变量UP，表示方向向上*/
  2 var UP=0;
  3 /*定义全局变量LEFT，表示方向向左*/
  4 var LEFT=1;
  5 /*定义全局变量RIGHT，表示方向向右*/
  6 var RIGHT=2;
  7 /*定义全局变量DOWN，表示方向向下*/
  8 var DOWN=3;
  9 /*初始化方向向右*/
 10 var DIR=RIGHT;
 11 /*初始化分数为0*/
 12 var SCORE=0;
 13 /*游戏是否结束*/
 14 var GAMEOVER=false;
 15 /*等级*/
 16 var LEVEL=1;
 17 /*速度*/
 18 var SPEED=30;
 19 /*最高等级*/
 20 var MAXLEVEL=6;
 21 /*绘画的时间间隔*/
 22 var TIME=200;
 23 /**
 24  * 贪吃蛇类
 25  */
 26 function Snake(){
 27     /**
 28      * 初始化贪吃蛇
 29      */
 30     this.nodes=[];
 31     this.nodes.push(new Node(20,20));
 32     this.nodes.push(new Node(20,21));
 33     this.nodes.push(new Node(20,22));
 34     this.nodes.push(new Node(20,23));
 35     this.nodes.push(new Node(21,23));
 36     this.nodes.push(new Node(22,23));
 37     this.nodes.push(new Node(23,23));
 38     this.nodes.push(new Node(23,24));
 39     this.nodes.push(new Node(23,25));
 40     this.nodes.push(new Node(23,26));
 41     /**
 42      * 判断蛇身是否包含当前坐标
 43      */
 44     this.contains=function(x,y){
 45         for(i=0;i<this.nodes.length;i++){
 46             var node=this.nodes[i];
 47             if(node.equals(x,y)){
 48                 return true;
 49             }
 50         }
 51         return false;
 52     };
 53     /**
 54      * 获得一个与蛇身不重合的格子节点
 55      */
 56     this.randomFood=function(){
 57         var x;
 58         var y;
 59         do{
 60             x=Math.floor(Math.random()*50);
 61             y=Math.floor(Math.random()*50);
 62         }while(this.contains(x,y));
 63         return new Node(x,y);
 64     };
 65     /**
 66      *    初始化食物
 67      */
 68     this.food=this.randomFood();
 69     
 70     /**
 71      * 向前走一步
 72      * 添加头节点
 73      * 删除尾节点
 74      */
 75     this.step=function(){
 76         var oldHead=this.nodes[0];
 77         //根据方向计算新头节点
 78         var newHead;
 79         switch (DIR){
 80             case UP:
 81                 newHead=new Node(oldHead.x,oldHead.y-1);
 82                 if(newHead.y==-1){
 83                     newHead.y=49;
 84                 }
 85                 break;
 86             case DOWN:
 87                 newHead=new Node(oldHead.x,oldHead.y+1);
 88                 if(newHead.y==50){
 89                     newHead.y=0;
 90                 }
 91                 break;
 92             case LEFT:
 93                 newHead=new Node(oldHead.x-1,oldHead.y);
 94                 if(newHead.x==-1){
 95                     newHead.x=49;
 96                 }
 97                 break;
 98             case RIGHT:
 99                 newHead=new Node(oldHead.x+1,oldHead.y);
100                 if(newHead.x==50){
101                     newHead.x=0;
102                 }
103                 break;
104             default:
105                 break;
106         }
107         /**
108          * 如果吃到自己则结束游戏
109          */
110         if(this.contains(newHead.x,newHead.y)){
111             GAMEOVER=true;
112         }
113         /**
114          * 每走一步，添加新的头节点
115          */
116         this.nodes.unshift(newHead);
117         /**
118          * 如果新添加的头节点与食物重合，即吃掉食物，
119          * 重新为食物赋值，并且分数加1
120          */
121         if(newHead.x==this.food.x&&newHead.y==this.food.y){
122             this.food=this.randomFood();
123             SCORE+=1;
124             /*每吃5个食物，则等级加1*/
125             if(SCORE%5==0){
126                 /*最高等级为5*/
127                 if(LEVEL<MAXLEVEL){
128                     LEVEL+=1;
129                 }
130             }
131         }else{
132             /*如果没有吃掉食物，则删除尾节点*/
133             this.nodes.pop();
134         }
135         //为时间间隔重新赋值
136         TIME=200-LEVEL*SPEED;
137     };
138     
139 }

Stage.js

 

 1 /**
 2  * 舞台类
 3  */
 4 function Stage(){
 5     this.width=50;
 6     this.height=50;
 7     this.snake=new Snake();
 8     this.print=function(ctx){
 9         //绘制舞台的背景
10         ctx.fillStyle="#abcdef";
11         ctx.fillRect(0,0,500,500);
12         //绘制一条蛇
13         ctx.fillStyle="chartreuse";
14         for(i=0;i<this.snake.nodes.length;i++){
15             var node=this.snake.nodes[i];
16             ctx.fillRect(node.x*10,node.y*10,9,9);
17         }
18         //绘制食物
19         ctx.fillStyle="#0000ff";
20         ctx.fillRect(this.snake.food.x*10,this.snake.food.y*10,9,9);
21         //绘制分数
22         ctx.font="20px 微软雅黑";
23         ctx.fillStyle="green";
24         ctx.fillText("分数："+SCORE,5,25);
25         //绘制等级
26         ctx.font="20px 微软雅黑";
27         ctx.fillStyle="green";
28         ctx.fillText("等级："+LEVEL,100,25);
29     }
30 }

snake.html

 1 
 2 
 3     
 4         
 5         
 6         
11         
12         
13         
14         
65     
66     
67         
68         
69         70717273747576777879808182838485
86     
87 

 

转载于:https://www.cnblogs.com/fighting9527/p/5146374.html