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

来源：动视网责编：小采时间：2020-11-27 20:12:03

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

面向对象实现简单版的超级马里奥小游戏:采用面向对象思想设计简略版的超级马里奥游戏人物（示意图）游戏的分析：（1）看看如何通过按钮来控制mario的位置（2）设计相关的对象（mario、障碍物等）游戏小功能：（1）通过键盘控制mario移动；（2）mario碰到边界会有提示信息；（3）mari

推荐度：

点击下载本文 文档为doc格式

导读面向对象实现简单版的超级马里奥小游戏:采用面向对象思想设计简略版的超级马里奥游戏人物（示意图）游戏的分析：（1）看看如何通过按钮来控制mario的位置（2）设计相关的对象（mario、障碍物等）游戏小功能：（1）通过键盘控制mario移动；（2）mario碰到边界会有提示信息；（3）mari

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<link href="mario.css" type="text/css" rel="stylesheet"/>
<script 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;
 }
 }
 
 </script>
 <title></title>
 </head>
 <body>
 <div class="gamediv">
 <img id="mymario" style="width:50px;
 left:30px;
 top:30px;
 position:absolute;
 " src="mario1.gif"/>
 <img style="width:70px;
 left:600px;
 top:400px;
 position:absolute;
 " src="box.png"/>
 </div>
 <table border="1px" class="controlcenter">
 <tr><td colspan="3">游戏键盘</td></tr>
 <tr><td>**</td><td><input type="button" value="↑" onclick="marioMove(0)"/></td><td>**</td></tr>
 <tr><td><input type="button" value="←" onclick="marioMove(1)"/></td><td>**</td><td><input type="button" value="→" onclick="marioMove(2)"/></td></tr>
 <tr><td>**</td><td><input type="button" value="↓" onclick="marioMove(3)"/></td><td>**</td></tr>
 </table>
 </body>
 </html>

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

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

推荐度：

点击下载本文 文档为doc格式

标签：游戏小游戏游戏小

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐