兵抓贼网页游戏

it2023-07-14 70

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>兵抓贼游戏开发</title> </head> <body> <form> <input type="button" value="换背景" onclick="setbg()" /> </form> <script src ="js/game.js"></script> </body> </html> //创建画布 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="images/background.png"; //背景2 var bgReady2=false; var bgImage2=new Image(); bgImage2.onload=function() { bgReady2=true; }; bgImage2.src="images/background2.jpg"; //加载兵图像 var heroReady=false; var heroImage=new Image(); heroImage.onload=function() { heroReady=true; }; heroImage.src="images/hero.png"; //加载贼图像 var monsterReady=false; var monsterImage=new Image(); monsterImage.onload=function() { monsterReady=true; }; monsterImage.src="images/monster.png"; //游戏对象设置 var hero={speed:256};//每秒移动像素 var monster={}; var monstersCaught=0; //处理键盘响应 var keyDown={}; addEventListener("keydown",function(e){keyDown[e.keyCode]=true;},false); addEventListener("keyup", function(e){delete keyDown[e.keyCode];},false); //reset函数编写 //抓成功后，重置游戏 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)); }; //update函数的编写 //更新游戏对象 var update=function(modifier) { if(38 in keyDown) { if(hero.y<=32) {hero.y=hero.y;} else { hero.y-=hero.speed*modifier;//上 } } if(40 in keyDown) { if(hero.y>=canvas.height-64) {hero.y=hero.y;} else { hero.y+=hero.speed*modifier;//下 } } if(37 in keyDown) { if(hero.x<=32) {hero.x=hero.x;} else { hero.x-=hero.speed*modifier;//左 } } if(39 in keyDown) { if(hero.x>=canvas.width-64) {hero.x=hero.x;} else { hero.x+=hero.speed*modifier;//右 } } //判断是否抓到 if(hero.x<=(monster.x+40)&& monster.x<=(hero.x+40)&& hero.y<=(monster.y+40)&& monster.y<=(hero.y+40)) { ++monstersCaught; reset(); } }; //绘制所有对象 var render=function() { if(bgReady) { ctx.drawImage(bgImage,0,0); } else { ctx.drawImage(bgImage2,0,0); } if(heroReady) { ctx.drawImage(heroImage,hero.x,hero.y); } if(monsterReady) { ctx.drawImage(monsterImage,monster.x,monster.y); } //计算得分 ctx.fillStyle="rgb(250,250,250)"; ctx.font="24px Helvetica";//字体 ctx.textAlign="left";//水平对齐 ctx.textBaseline="top";//上下对齐 ctx.fillText("成功抓获："+monstersCaught,32,32); }; //主循环 var main=function() { var now=Date.now(); var delta=now-then; update(delta/1000); render(); then=now; //重绘 requestAnimationFrame(main); }; //多浏览器支持 var w = window; requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame; //开始游戏 var then=Date.now(); reset(); main(); function setbg() { bgReady=false; }

最新回复(0)