一个超简单的马里奥游戏

理论是需要通过实践来检验的，学了这么多，于是我就试了试采用面向对象的编程思想实现了一个超级简单的马里奥游戏，游戏感觉特傻！

准备素材(图片mario.jpg)：

分析：

如何通过按钮控制图片的位置
设计相关的对象

要求：Mario碰到边界给一个提示。(其实还有一个要求就是Mario可以去找另一个物体，没有实现。)

以下为源码：

超级马里奥游戏.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="超级马里奥游戏.css">
    <script type="text/javascript">
        //设计Mario类
        function Mario() {
            this.x = 0;
            this.y = 0;

            //移动 0->上 1->右 2->下 3->左
            this.move = function(direct) {
                switch(direct) {
                    case 0:
                        var mymario = document.getElementById("mymario");
                        var top = mymario.style.top;
                        top = parseInt(top.substr(0, top.length-2));
                        if(top == 0) {
                            window.alert("已到上边界，无法移动");
                            break;
                        }
                        mymario.style.top = (top-10)+"px";
                        break;
                    case 1:
                        //window.alert("mario 向右移动");
                        //这里为了改变img的left和top值，我们需要先得到img元素(对象)
                        var mymario = document.getElementById("mymario");
                        //window.alert(mymario.style.top);
                        //mymario.style.left = mymario.style.left + 50; //50px50
                        var left = mymario.style.left;
                        left = parseInt(left.substr(0, left.length-2));
                        if(left == 450) {
                            window.alert("已到右边界，无法移动");
                            break;
                        }
                        mymario.style.left = (left+10)+"px";
                        break;
                    case 2:
                        var mymario = document.getElementById("mymario");
                        var top = mymario.style.top;
                        top = parseInt(top.substr(0, top.length-2));
                        if(top == 350) {
                            window.alert("已到下边界，无法移动");
                            break;
                        }
                        mymario.style.top = (top+10)+"px";
                        break;
                    case 3:
                        var mymario = document.getElementById("mymario");
                        var left = mymario.style.left;
                        left = parseInt(left.substr(0, left.length-2));
                        if(left == 0) {
                            window.alert("已到左边界，无法移动");
                            break;
                        }
                        mymario.style.left = (left-10)+"px";
                        break;
                }
            }
        }
        //创建Mario对象
        var mario = new Mario();

        //全局函数
        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;    
            }
            //window.alert("marioMove"+direct);
        }</script>
</head>
<body>
    <div class="gamediv">
        <img id="mymario" style=" 50px; left: 0px; top: 0px; position: absolute;" src="mario.jpg" />
    </div>
    <table border="1px" class="controlcenter">
        <tr>
            <td colspan="3">控制方向</td>
        </tr>
        <tr>
            <td><input type="button" onclick="test();" value="测试" /></td>
            <td><input type="button" value="↑↑" onclick="marioMove(0)" /></td>
            <td>**</td>
        </tr>
        <tr>
            <td><input type="button" value="←←" onclick="marioMove(3)" /></td>
            <td>**</td>
            <td><input type="button" value="→→" onclick="mario.move(1)" /></td>
        </tr>
        <tr>
            <td>**</td>
            <td><input type="button" value="↓↓" onclick="marioMove(2)" /></td>
            <td>**</td>
        </tr>
    </table>
</body>
</html>

注意：在onclick事件中即可直接调用全局函数，又可用实例对象调用所属函数。

超级马里奥游戏.css(所幸还很简单，对于css一直感到很头疼)：

.gamediv {
    width: 500px;
    height: 400px;
    background: pink;
    position: absolute;
}
.controlcenter {
    width: 200px;
    height: 100px;
    /*border: 1px solid red;*/
    position: absolute;
    top: 450px;
    text-align: center;
}

运行效果如图：

那么随即产生一个问题，以上是通过行间样式来设置的，那如何直接获取CSS的内容？这是一个疑问。