Html 5+JSを使ったヘビ食いゲーム
33385 ワード
Html 5のCanvasの使用を学び、JSとオブジェクトを作成し、ヘビの小さなゲームを貪り、JSのオブジェクト向けプログラミングとCanvasの使い方を固めた.
Node.js
Snake.js
Stage.js
snake.html
72
74
78
82
84
86
87
転載先:https://www.cnblogs.com/fighting9527/p/5146374.html
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
<span style="color:#008080;">15</span> <span style="color:#0000ff;">var</span><span style="color:#000000;"> game;
</span><span style="color:#008080;">16</span> <span style="color:#0000ff;">function</span><span style="color:#000000;"> load(){
</span><span style="color:#008080;">17</span> <span style="color:#0000ff;">var</span> stage=<span style="color:#0000ff;">new</span><span style="color:#000000;"> Stage();
</span><span style="color:#008080;">18</span> <span style="color:#008000;">//</span><span style="color:#008000;"> canvas Context </span>
<span style="color:#008080;">19</span> <span style="color:#0000ff;">var</span> canvas=document.getElementById("mCanvas"<span style="color:#000000;">);
</span><span style="color:#008080;">20</span> <span style="color:#0000ff;">var</span> ctx=canvas.getContext("2d"<span style="color:#000000;">);
</span><span style="color:#008080;">21</span> <span style="color:#008000;">//</span><span style="color:#008000;"> </span>
<span style="color:#008080;">22</span> <span style="color:#000000;"> stage.print(ctx);
</span><span style="color:#008080;">23</span> game=window.setInterval(<span style="color:#0000ff;">function</span><span style="color:#000000;">(){
</span><span style="color:#008080;">24</span> <span style="color:#000000;"> stage.snake.step();
</span><span style="color:#008080;">25</span> <span style="color:#000000;"> stage.print(ctx);
</span><span style="color:#008080;">26</span> <span style="color:#0000ff;">if</span><span style="color:#000000;">(GAMEOVER){
</span><span style="color:#008080;">27</span> ctx.fillStyle="red"<span style="color:#000000;">;
</span><span style="color:#008080;">28</span> ctx.font="50px "<span style="color:#000000;">;
</span><span style="color:#008080;">29</span> ctx.fillText("GAMEOVER!",100,250<span style="color:#000000;">);
</span><span style="color:#008080;">30</span> <span style="color:#000000;"> window.clearInterval(game);
</span><span style="color:#008080;">31</span> <span style="color:#000000;"> }
</span><span style="color:#008080;">32</span> <span style="color:#000000;"> },TIME);
</span><span style="color:#008080;">33</span> <span style="color:#000000;"> }
</span><span style="color:#008080;">34</span> <span style="color:#008000;">/*</span><span style="color:#008000;">*
</span><span style="color:#008080;">35</span> <span style="color:#008000;"> *
</span><span style="color:#008080;">36</span> <span style="color:#008000;"> * @param {Object} dir
</span><span style="color:#008080;">37</span> <span style="color:#008000;">*/</span>
<span style="color:#008080;">38</span> <span style="color:#0000ff;">function</span><span style="color:#000000;"> changeDir(dir){
</span><span style="color:#008080;">39</span> <span style="color:#0000ff;">switch</span><span style="color:#000000;"> (dir){
</span><span style="color:#008080;">40</span> <span style="color:#0000ff;">case</span><span style="color:#000000;"> UP:
</span><span style="color:#008080;">41</span> <span style="color:#0000ff;">if</span>(DIR!=<span style="color:#000000;">DOWN){
</span><span style="color:#008080;">42</span> DIR=<span style="color:#000000;">dir;
</span><span style="color:#008080;">43</span> <span style="color:#000000;"> }
</span><span style="color:#008080;">44</span> <span style="color:#0000ff;">break</span><span style="color:#000000;">;
</span><span style="color:#008080;">45</span> <span style="color:#0000ff;">case</span><span style="color:#000000;"> DOWN:
</span><span style="color:#008080;">46</span> <span style="color:#0000ff;">if</span>(DIR!=<span style="color:#000000;">UP){
</span><span style="color:#008080;">47</span> DIR=<span style="color:#000000;">dir;
</span><span style="color:#008080;">48</span> <span style="color:#000000;"> }
</span><span style="color:#008080;">49</span> <span style="color:#0000ff;">break</span><span style="color:#000000;">;
</span><span style="color:#008080;">50</span> <span style="color:#0000ff;">case</span><span style="color:#000000;"> LEFT:
</span><span style="color:#008080;">51</span> <span style="color:#0000ff;">if</span>(DIR!=<span style="color:#000000;">RIGHT){
</span><span style="color:#008080;">52</span> DIR=<span style="color:#000000;">dir;
</span><span style="color:#008080;">53</span> <span style="color:#000000;"> }
</span><span style="color:#008080;">54</span> <span style="color:#0000ff;">break</span><span style="color:#000000;">;
</span><span style="color:#008080;">55</span> <span style="color:#0000ff;">case</span><span style="color:#000000;"> RIGHT:
</span><span style="color:#008080;">56</span> <span style="color:#0000ff;">if</span>(DIR!=<span style="color:#000000;">LEFT){
</span><span style="color:#008080;">57</span> DIR=<span style="color:#000000;">dir;
</span><span style="color:#008080;">58</span> <span style="color:#000000;"> }
</span><span style="color:#008080;">59</span> <span style="color:#0000ff;">break</span><span style="color:#000000;">;
</span><span style="color:#008080;">60</span> <span style="color:#0000ff;">default</span><span style="color:#000000;">:
</span><span style="color:#008080;">61</span> <span style="color:#0000ff;">break</span><span style="color:#000000;">;
</span><span style="color:#008080;">62</span> <span style="color:#000000;"> }
</span><span style="color:#008080;">63</span> <span style="color:#000000;"> }
</span><span style="color:#008080;">64</span>
65
66
67 72
74
78
82
84
86
87
転載先:https://www.cnblogs.com/fighting9527/p/5146374.html