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

游戏的分析：

(1)看看如何通过按钮来控制mario的位置

(2)设计相关的对象(mario、障碍物等)

游戏小功能：

(1)通过键盘控制mario移动；

(2)mario碰到边界会有提示信息；

(3)mario找到宝藏会提示信息；

敲重点，提供源代码：

html代码：

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;

}

}

游戏键盘
**		**
	**
**		**

.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;

}