一个超简单的马里奥游戏

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

准备素材(图片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="width: 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的内容?这是一个疑问。

时间: 04-13

一个超简单的马里奥游戏的相关文章

打造支持apk下载和html5缓存的 IIS(配合一个超简单的android APP使用)具体解释

为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从server获取大量数据来展示在手机上面的,也就是说:必须联网,才干正常工作,于是想了一下,反正都要联网获取数据,为什么不直接用我相对熟悉一点的 html来做这个运用呢?省的花费不够用的时间去学习android界面的控制,于是就简单了:用蹩脚的手段做了一个android程序的启动欢迎界面,内页就是一个全屏的

一个超简单的vue商品计算总金额

哈哈哈,花了十几分钟写的一个vue商品总价计算,虽然很简单的.没有写样式. 现在写博客也是为了让自己方便查阅东西.废话不多少 直接上图 这里用到了vue的计算属性-computed 那这里就顺便说下computed这个东西吧. 在计算属性中科院完成各种复杂的的逻辑,包括运算,函数调用,只需要最终返回一个最终的结果.计算属性依赖多个vue实例的数据,只要其中一项数据发生变化,计算属性就会重新的执行,视图也会更新. 下面直接上代码: <!DOCTYPE html><html> <

一个超简单超简单的表白程序

刷微博的时候看到一个特别有意思的程序,而且特别简单,适合用来表白和套路朋友,真的超级简单. 先看演示 原理我也不太懂,毕竟不是专业对口,直接上操作过程 1.随便新建一个文本文件 2. 打开输入代码 3. 保存.修改文件后缀为vbs 4. 双击打开就可以运行了,但双击打开会有一个exe文件执行的窗口,所以可以发给朋友,在聊天窗口打开就不会有exe文件执行的窗口了 纯属觉得好玩...... 原文地址:https://www.cnblogs.com/huasonglin/p/9215865.html

一个超简单的语音识别编程,听写程序

CSpeechRecognition类封装了语音识别操作所需调用的几个接口,使用它进行语音识别编程很方便,也很简洁. CSpeechRecognition类的定义如下: /////////////////////////////////////////////////////////////// // active speech engine #include <atlbase.h> extern CComModule _Module; #include <atlcom.h> #i

温故而知新---浅析三层架构(一个超简单的系统登录三层架构实例)

刚开始接触三层架构是在快两个月前,那时候找了好多例子感觉也都看不怎么懂,今天闲着没事,就把以前学的东西翻出来,算是温习温习.由于本人也接触时间不长,所以以下言论有不正确之处,多多海涵. 首先我们先要知道什么是三层架构,个人理解的三层架构就是将业务分为界面层(UI层),业务逻辑层(BLL层)和数据访问层(DAL层),各层之间各司其职,层层传递信息. 优点是可以达到高内聚,低耦合,修改起来比较容易:缺点是会降低系统性能. UI层:就是面向用户的一层,直接与用户交互. BLL层:用于实现业务逻辑,在U

gulp安装+一个超简单入门小demo

gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js.而且升级npm到最新版本号. 安装nodeJS 基本參考传送门戳这里:安装nodeJs.安装nodeJs2.nodeJs下express的安装到执行 1.    从nodejs.org下载最新的nodejs安装包.并安装. 2.    进入nodejs的安装路径下: 天真的以为这样就能够了. wat

Python命令快速临时假设一个超简单的HTTP服务器

今天要给客户端提供静态的Json来配合他们调接口,想到Nginx,但是很麻烦,python提供了一个非常方便的功能 使用下面的命令: python -m SimpleHTTPServer 8000 执行这一个命令即可实现一个HTTP服务器,会将当前目录设为HTTP服务目录,http://ip:8000访问

linux 一个超简单的makefile

makefile 自动化变量: [email protected] : 规则的目标文件名 例如:main:main.o test.o g++ -Wall -g  main.o test.o -o main 可以写成: main:main.o test.o g++ -Wall -g  main.o test.o -o [email protected] $< : 规则的第一个依赖文件名 例如:main.o: main.cpp g++ -Wall -g -c main.cpp -o main.o 可

最近采集写的一个超简单实用的HTML解析类

1. [文件] HtmlDom.php <?php$oldSetting = libxml_use_internal_errors( true ); libxml_clear_errors();/** *  * -+----------------------------------- * |PHP5 Framework - 2011 * |Web Site: www.iblue.cc * |E-mail: [email protected] * |Date: 2012-10-12 * -+--