Heim > Artikel > Web-Frontend > Objektorientierte Implementierung einer einfachen Version des Super Mario-Minispiels

Objektorientierte Implementierung einer einfachen Version des Super Mario-Minispiels

一个新手Original: 2017-10-14 10:15:213161Durchsuche

Mit objektorientiertem Denken eine vereinfachte Version der Super Mario-Spielfigur entwerfen (schematisches Diagramm)
Objektorientierte Implementierung einer einfachen Version des Super Mario-Minispiels

Analyse des Spiels:
(1) Sehen Sie, wie Sie Marios Position über die Tasten
steuern (2) Designbezogene Objekte (Mario, Hindernisse usw.)

Spielfunktionen:
(1) Steuern Sie Marios Bewegung über die Tastatur
(2) Es wird eine Meldung angezeigt, wenn Mario stößt an die Grenze;
(3) Mario wird eine Nachricht auslösen, wenn er den Schatz findet

Um die wichtigsten Punkte hervorzuheben, geben Sie den Quellcode an:
HTML-Code:

<!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>

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

Das obige ist der detaillierte Inhalt vonObjektorientierte Implementierung einer einfachen Version des Super Mario-Minispiels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Js-Methoden zum Abrufen des aktuellen Datums und der aktuellen Uhrzeit sowie anderer VorgängeNächster Artikel：Js-Methoden zum Abrufen des aktuellen Datums und der aktuellen Uhrzeit sowie anderer Vorgänge

In Verbindung stehende Artikel

Mehr sehen