zoukankan      html  css  js  c++  java
  • 一个超简单的马里奥游戏

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

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

       

       分析:

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

       要求: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的内容?这是一个疑问。

      

       

  • 相关阅读:
    洛谷P1129 [ZJOI2007] 矩阵游戏(二分图最大匹配)
    牛客NC51316 Going Home (二分图最大权匹配)
    洛谷P2055 [ZJOI2009]假期的宿舍(二分图最大匹配)
    Codeforces Round #702 (Div. 3) 全部七题
    Educational Codeforces Round 104 (Rated for Div. 2) A~D
    Leetcode 567. 字符串的排列(滑动窗口)
    基于macOS Catalina 10.15.7下GitHub Pages + Hexo 5.3.0 + 阿里云的博客部署
    关于两个数的LCM
    2021牛客寒假算法基础集训营1 补题 ABCEFIJ
    macOS上运行jupyter notebook程序:服务似乎挂掉了,但是会立刻重启 报错OMP: Error #15: Initializing libomp.dylib, but found libiomp5.dylib already initialize
  • 原文地址:https://www.cnblogs.com/yerenyuan/p/5392781.html
Copyright © 2011-2022 走看看