贪吃蛇小游戏

做了一个类似于贪吃蛇的小游戏。下面是代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>simple Canvas Game</title>
  6 </head>
  7 <body>
  8 <script type="text/javascript">
  9     var canvas=document.createElement("canvas");
 10     var ctx=canvas.getContext("2d");
 11     canvas.width=512;
 12     canvas.height=480;
 13     document.body.appendChild(canvas);
 14     var count=1,step=1;
 15 
 16     //图片初始化
 17     var bgReady=false;
 18     var bgImage=new Image();
 19     bgImage.src="background.png";
 20     bgImage.onload=function(){
 21         bgReady=true;
 22     };
 23 
 24 
 25     var heroReady=false;
 26     var heroImage=new Image();
 27     heroImage.src="hero.png";
 28     heroImage.onload=function(){
 29         heroReady=true;
 30     };
 31 
 32 
 33     var monsterReady=false;
 34     var monsterImage=new Image();
 35     monsterImage.src="monster.png";
 36     monsterImage.onload=function(){
 37         monsterReady=true;
 38     };
 39 
 40     var hero={speed:256};
 41     var monster=[];
 42     var monstersCaught=0;
 43 
 44     var keysDown={};
 45 
 46     //监听方向键
 47     addEventListener('keydown',function(e){
 48         keysDown[e.keyCode]=true;
 49     },false);
 50 
 51     addEventListener('keyup',function(e){
 52         delete keysDown[e.keyCode];
 53     },false);
 54 
 55     hero.x=canvas.width/2;
 56     hero.y=canvas.height/2;
 57 
 58     //敌人随机显示
 59     var monsterPosition=function(i){
 60         for (x=0;x<i;x++){
 61             monster[x]={
 62                 x:(32+(Math.random()*(canvas.width-64))),
 63                 y:(32+(Math.random()*(canvas.height-64)))
 64             };
 65             monster.push(monster[i]);
 66         }
 67     };
 68 
 69     var reset=function(){
 70         hero.x=canvas.width/2;
 71         hero.y=canvas.height/2;
 72     };
 73 
 74     var update=function(modifier){
 75         if(38 in keysDown){
 76             if(hero.y>0){
 77                 hero.y-=hero.speed*modifier;
 78             }
 79         }
 80         if(40 in keysDown){
 81             if(hero.y<445){
 82                 hero.y+=hero.speed*modifier;
 83             }
 84         }
 85         if(37 in keysDown){
 86             if(hero.x>0){
 87                 hero.x-=hero.speed*modifier;
 88             }
 89         }
 90         if(39 in keysDown){
 91             if(hero.x<480){
 92                 hero.x+=hero.speed*modifier;
 93             }
 94         }
 95 
 96 
 97     };
 98     var render=function(){
 99         if(bgReady){
100             ctx.drawImage(bgImage,0,0);
101         }
102         if(heroReady){
103             ctx.drawImage(heroImage,hero.x,hero.y);
104         }
105         if(monsterReady&&step<3){
106             for(i=0;i<count;i++){
107                 if(hero.x<=(monster[i].x+32)&& monster[i].x<=(hero.x+32)&&hero.y<=(monster[i].y+32) && monster[i].y<=(hero.y+32)){
108                     ++monstersCaught;
109                     monster.splice(i,1);
110                     count--;
111                     //monsterPosition();
112                 }else{
113                     ctx.drawImage(monsterImage,monster[i].x,monster[i].y);
114                 }
115             }
116         }
117 
118         ctx.fillStyle="rgb(250,250,250)";
119         ctx.font="24px Helvetica";
120         ctx.textAlign='left';
121         ctx.textBaseline="top";
122         ctx.fillText('Goblins caught:'+monstersCaught,32,32);
123         ctx.fillText('step:'+step,32,64);
124     };
125     var main=function(){
126         var now=Date.now();
127         var delta=now-then;
128 
129         update(delta/1000);
130         render();
131 
132         then=now;
133         if(monster.length<2){
134             step++;
135             count=count+step;
136             monsterPosition(count);
137         }
138         if(step>2){
139             reset();
140             render();
141             //ctx.drawImage(heroImage,hero.x,hero.y);
142             console.log("you are winner");
143         }else{
144             requestAnimationFrame(main);
145         }
146     };
147     var w=window;
148     requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
149     var then=Date.now();
150     monsterPosition(count);
151     main();
152 
153 </script>
154 </body>
155 </html>

主要是利用了canvas的drawImage方法来绘制元素，利用requestAnimationFrame来循环。下面附带源码：

英雄与敌人

posted on 2016-04-08 14:55  Newbies  阅读(312)  评论(0)    收藏  举报

导航