zoukankan      html  css  js  c++  java

  • 使用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 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>贪吃蛇</title>
 6         <style type="text/css">
 7             canvas{
 8                 border: 1px solid black;
 9             }
10         </style>
11         <script type="text/javascript" src="Node.js" ></script>
12         <script type="text/javascript" src="Snake.js" ></script>
13         <script type="text/javascript" src="Stage.js" ></script>
14         <script type="text/javascript">
15             var game;
16             function load(){
17                 var stage=new Stage();
18                 //获取用于绘制canvas的Context对象
19                 var canvas=document.getElementById("mCanvas");
20                 var ctx=canvas.getContext("2d");
21                 //绘制初始界面
22                 stage.print(ctx);
23                 game=window.setInterval(function(){
24                     stage.snake.step();
25                     stage.print(ctx);
26                     if(GAMEOVER){
27                         ctx.fillStyle="red";
28                         ctx.font="50px 微软雅黑";
29                         ctx.fillText("GAMEOVER!",100,250);
30                         window.clearInterval(game);
31                     }
32                 },TIME);
33             }
34             /**
35              * 方向键控制贪吃蛇的方向
36              * @param {Object} dir
37              */
38             function changeDir(dir){
39                 switch (dir){
40                     case UP:
41                         if(DIR!=DOWN){
42                             DIR=dir;
43                         }
44                         break;
45                     case DOWN:
46                         if(DIR!=UP){
47                             DIR=dir;
48                         }
49                         break;
50                     case LEFT:
51                         if(DIR!=RIGHT){
52                             DIR=dir;
53                         }
54                         break;
55                     case RIGHT:
56                         if(DIR!=LEFT){
57                             DIR=dir;
58                         }
59                         break;
60                     default:
61                         break;
62                 }
63             }
64         </script>
65     </head>
66     <body onload="load()">
67         <canvas id="mCanvas" width="500" height="500"></canvas>
68         <!--控制方向-->
69         <table cellpadding="0px" cellspacing="0px">
70             <tr>
71                 <td></td>
72                 <td><input type="button" value="上" onclick="changeDir(UP)"/></td>
73                 <td></td>
74             </tr>
75             <tr>
76                 <td><input type="button" value="左" onclick="changeDir(LEFT)"></td>
77                 <td></td>
78                 <td><input type="button" value="右" onclick="changeDir(RIGHT)"/></td>
79             </tr>
80             <tr>
81                 <td></td>
82                 <td><input type="button" value="下" onclick="changeDir(DOWN)"/></td>
83                 <td></td>
84             </tr>
85         </table>
86     </body>
87 </html>
  • 相关阅读:
    设计模式之设计原则
    把二叉树打印成多行
    快速排序的递归遍历和非递归遍历
    二叉树的非递归遍历
    约瑟夫环问题
    strcpy strcat strcmp memcpy函数的自己实现
    【解题模板】一些很基础的板子
    【笔记】取模运算的用法
    【OJ技巧】DSACPP pa-book中的一些提示
    【编程语言】Java基础进阶——面向对象部分
  • 原文地址：https://www.cnblogs.com/fighting9527/p/5146374.html
Copyright © 2011-2022 走看看