面向对象实现简单版的超级马里奥小游戏

采用面向对象思想设计简略版的超级马里奥游戏人物（示意图）

游戏的分析：
（1）看看如何通过按钮来控制mario的位置
（2）设计相关的对象（mario、障碍物等）

游戏小功能：
（1）通过键盘控制mario移动；
（2）mario碰到边界会有提示信息；
（3）mario找到宝藏会提示信息；

敲重点，提供源代码：
html代码：

<ｓｃｒｉｐｔ language="javascript" type="text/javascript"> function Mario(){ this.x=0; this.y=0; //移动 0->上 1->左 2->右 3->下 this.move=function(direct){ switch(direct){ case 0: //这里为了改变img的left和top，我们需要得到img元素(对象) var mymario=document.getElementById('mymario'); var top=mymario.style.top; top=parseInt(top.substr(0,top.length-2)); var left=mymario.style.left; left=parseInt(left.substr(0,left.length-2)); newtop=top-10; if(newtop==-10){ window.alert("已到达上边界"); } else{ mymario.style.top=(newtop)+"px"; } if(newtop==460&&left==610){ window.alert("mario找到宝箱啦") } break; case 1: var mymario=document.getElementById('mymario'); var left=mymario.style.left; left=parseInt(left.substr(0,left.length-2)); var top=mymario.style.top; top=parseInt(top.substr(0,top.length-2)); newleft=left-10; if(newleft==-10){ window.alert("已到达左边界") } else{ mymario.style.left=(left-10)+"px"; } if(top==400&&newleft==660){ window.alert("mario找到宝箱啦") } break; case 2: var mymario=document.getElementById('mymario'); var left=mymario.style.left; left=parseInt(left.substr(0,left.length-2)); var top=mymario.style.top; top=parseInt(top.substr(0,top.length-2)); newleft=left+10; if(newleft==760){ window.alert("已到达右边界") } else{ mymario.style.left=(left+10)+"px"; } if(top==400&&newleft==570){ window.alert("mario找到宝箱啦") } break; case 3: var mymario=document.getElementById('mymario'); var top=mymario.style.top; top=parseInt(top.substr(0,top.length-2)); var left=mymario.style.left; left=parseInt(left.substr(0,left.length-2)); newtop=top+10; if(newtop==450){ window.alert("已到达下边界"); } else{ mymario.style.top=(top+10)+"px"; } if(newtop==360&&left==610){ window.alert("mario找到宝箱啦") } break; } } } //创建Mario对象 var mario=new Mario();//全局函数 也可以去掉这个全局函数直接在onclick调用对象方法mario.move(); function marioMove(direct){ switch(direct){ case 0: mario.move(direct); break; case 1: mario.move(direct); break; case 2: mario.move(direct); break; case 3: mario.move(direct); break; } }     
   
 
 
游戏键盘
 
**
value="↑" onclick="marioMove(0)"/>
**
 
**
 
**
**
 
  

.gamep { width:800px; height:500px; background-color:pink; position:absolute; margin-left:0px;} .controlcenter { width:200px; height:100px; border:1px solid silver; text-align:center; margin-top:530px; position:absolute;}