欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

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

程序员文章站 2022-05-19 12:52:56
...
采用面向对象思想设计简略版的超级马里奥游戏人物（示意图）
面向对象实现简单版的超级马里奥小游戏

游戏的分析：
（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;
}

以上就是面向对象实现简单版的超级马里奥小游戏的详细内容，更多请关注其它相关文章！

相关标签： 超级 简单 实现

上一篇： 请问织梦dede可以较好的生成网站，那还需要学习php, html吗？

下一篇： Yii框架关联查询with用法分析，yii框架with用法

推荐阅读