HTML5+CSS3基础开发教程14.1--马里奥大逃亡游戏

第14章综合案例14.1马里奥大逃亡游戏14.2欧美风格企业网站14.1马里奥大逃亡游戏14.1.1游戏介绍逃生游戏的主体是一块正方形区域，游戏主体内容包括玩家控制的人物“马里奥”，以及系统控制的怪物。玩家可以通过键盘控制游戏人物向上、右上、右、右下、下、左下、左、左上方向移动。怪物在区域内随机移动，并且怪物数量随着时间的增长不断增多。玩家控制游戏人物躲避怪物，当游戏人物碰到怪物时，游戏人物死亡，游戏结束。14.1.2需求分析1．应用技术分析本游戏主要应用到以下3种技术点。（1）Canvas元素，主要用于构建并显示游戏内容。（2）CSS3样式，主要用于设置游戏内容样式。（3）JavaScript，主要用于各种游戏参数、事件的控制。2．实现流程分析（1）定义视觉效果，包括游戏场景大小、背景样式、游戏人物以及怪物样式。（2）定义怪物AI，本游戏中不需要为怪物添加复杂的AI，只需定义其移动轨迹及新增怪物事件即可。（3）定义游戏人物控制事件。（4）定义游戏结束事件。14.1.3详细设计htmlmetacharset=UTF-8/bodycanvasid=gameCanvaswidth=600height=600您的浏览器不支持Canvas/canvasscripttype=text/JavaScript//获取画布元素varcanvas=document.getElementById(gameCanvas);varctx=canvas.getContext(2d);//定义游戏场景varbgReady=false;varbgImage=newImage();bgImage.src=img/bg.jpg;bgImage.onload=function(){bgReady=true;}。//定义mario对象样式varmarioReady=false;varmarioImage=newImage();marioImage.src=img/mario.png;marioImage.onload=function(){marioReady=true;}//定义怪物样式varmonsterReady=false;varmonsterImage=newImage();monsterImage.src=img/monster.png;monsterImage.onload=function(){monsterReady=true;}//定义mario初始参数varmario={speed:256,x:canvas.width/2,y:canvas.height/2}//定义怪物初始参数functionmonster(){this.x=Math.random()*canvas.width;this.y=Math.random()*canvas.height;this.speed=100;this.xDirection=1;this.yDirection=1;this.move=function(modifier){this.x+=this.xDirection*this.speed*modifier;this.y+=this.yDirection*this.speed*modifier;if(this.x=canvas.width-32){this.x=canvas.width-32;this.xDirection=-1;}elseif(this.x=0){this.x=0;this.xDirection=1;}elseif(this.y=canvas.height-32){this.y=canvas.height-32;this.yDirection=-1;}elseif(this.y=0){this.y=0;this.yDirection=1;}};}varmonsterSum=0;varmonsterList=newArray();monsterList[monsterSum]=newmonster();varkeysDown={};//添加键盘操作监控事件addEventListener(keydown,function(e){keysDown[e.keyCode]=true;},false);addEventListener(keyup,function(e){deletekeysDown[e.keyCode];});//定义移动事件varMove=function(modifier){if(38inkeysDown){mario.y-=mario.speed*modifier;}if(40inkeysDown){mario.y+=mario.speed*modifier;}if(37inkeysDown){mario.x-=mario.speed*modifier;}if(39inkeysDown){mario.x+=mario.speed*modifier;}if(mario.x=canvas.width-32){mario.x=0;}elseif(mario.x=0){mario.x=canvas.width-32;}if(mario.y=canvas.height-32){mario.y=0;}elseif(mario.y=0){mario.y=canvas.height-32;}for(vari=0;i=monsterSum;i++){monsterList[i].move(modifier);}}//定义绘图事件varDraw=function(){if(bgReady){ctx.drawImage(bgImage,0,0);if(marioReady){ctx.drawImage(marioImage,mario.x,mario.y);}if(monsterReady){for(vari=0;i=monsterSum;i++)ctx.drawImage(monsterImage,monsterList[i].x,monsterList[i].y);}}ctx.fillStyle=rgb(250,250,250);ctx.font=24pxHelvetica;ctx.textAlign=left;ctx.textBaseline=top;last=Date.now()-start;ctx.fillText(last/1000,12,canvas.height-590);}//设定怪物刷新并判断位置varCheck=function(){if(monsterSum!=Math.floor(last/5000)){monsterSum++;monsterList[monsterSum]=newmonster();}for(vari=0;i=monsterSum;i++){if((monsterList[i].x-32)=mario.x&&mario.x=(monsterList[i].x+32)&&(monsterList[i].y-32)=mario.y&&mario.y=(monsterList[i].y+32)){end=Date.now();alert(你被怪物捉到了，游戏结束);End();}}}varEnd=function(){if(bgReady){ctx.drawImage(bgImage,0,0);}window.clearInterval(timer);return;}varmain=function(){varnow=Date.now();vardelta=now-then;Move(delta/1000);Draw();Check();then=now;}varthen=Date.now();varstart=then;timer=setInterval(main,1);/script/body/html14.1.4游戏效果保存上面的代码并在浏览器中运行，得到的效果如图所示。随着时间增加，怪物的数量会变多，当游戏人物被怪物捉到时游戏结束，效果如图所示。