面向对象实现简单版的超级马里奥小游戏-tutorial js-php.cn

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

一个新手

Lepaskan： 2017-10-14 10:15:21

asal

3184 orang telah melayarinya

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

游戏的分析：
（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(&#39;mymario&#39;);                
                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(&#39;mymario&#39;);                
                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(&#39;mymario&#39;);                
                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(&#39;mymario&#39;);                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>

Salin selepas log masuk

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

Salin selepas log masuk

Atas ialah kandungan terperinci 面向对象实现简单版的超级马里奥小游戏. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!