html5打怪游戏

HTML5 Canvas小游戏 ``` var w = window; requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame; //创建一张画布 var canvas=document.createElement("canvas"); var ctx=canvas.getContext("2d"); canvas.width=512; canvas.height=480; document.body.appendChild(canvas); //背景图片 var bgReady=false; var bgImage=new Image(); bgImage.onload=function(){ bgReady=true; }; bgImage.src="img/background.png"; //英雄图片 var heroReady=false; var heroImage=new Image(); heroImage.onload=function(){ heroReady=true; }; heroImage.src="img/hero.png"; //怪物图片 var monsterReady=false; var monsterImage=new Image(); monsterImage.onload=function(){ monsterReady=true; }; monsterImage.src="img/monster.png"; console.log(monsterImage); //对象 //英雄 var hero={ speed:256//移动的像素 }; var monster={};//怪物 var monstersCaught=0;//则用来存储怪物被捉住的次数 //接受用户的输入 var keysDown={}; addEventListener("keydown",function(e){ keysDown[e.keyCode]=true; },false); addEventListener("keyup",function(e){ delete keysDown[e.keyCode]; },false); //开始新一轮的游戏 var reset=function(){ //英雄到屏幕中心 hero.x=canvas.width/2; hero.y=canvas.height/2; //怪物到随机的位置 monster.x=32+(Math.random()*(canvas.width-64)); monster.y=32+(Math.random()*(canvas.height-64)); }; //更新对象随着用户的输入更新对象 var update=function(modifier){ //38 是图片的大小 if(38 in keysDown){ hero.y-=hero.speed*modifier; } if(40 in keysDown){ hero.y+=hero.speed*modifier; } if(37 in keysDown){ hero.y-=hero.speed*modifier; } if(40 in keysDown){ hero.y+=hero.speed*modifier; } //我们的hero图片是32x32，monster图片是30x32 if ( hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32) ) { ++monstersCaught; reset(); } }; // 渲染物体画图 var render = function () { if (bgReady) { ctx.drawImage(bgImage, 0, 0); } if (heroReady) { ctx.drawImage(heroImage, hero.x, hero.y); } if (monsterReady) { ctx.drawImage(monsterImage, monster.x, monster.y); } // Score ctx.fillStyle = "rgb(250, 250, 250)"; ctx.font = "24px Helvetica"; ctx.textAlign = "left"; ctx.textBaseline = "top"; ctx.fillText("Goblins caught: " + monstersCaught, 32, 32); }; var main = function () { var now = Date.now(); var delta = now - then; //console.log(delta); update(delta / 1000); render(); then = now; // Request to do this again ASAP requestAnimationFrame(main); }; var then = Date.now(); reset(); main(); html5打怪游戏 ``` ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/315686/1479979107472.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/315686/1479979138372.png-wm)

“基于HTML5 Canvas实现小游戏”实验报告