我的第一个JS程序——进击的马里奥

欢迎使用Markdown编辑器写博客

本Markdown编辑器使用[StackEdit][6]修改而来，用它写博客，将会带来全新的体验哦：

• Markdown和扩展Markdown简洁的语法
• 代码块高亮
• 图片链接和图片上传
• LaTex数学公式
• UML序列图和流程图
• 离线写博客
• 导入导出Markdown文件
• 丰富的快捷键

---

快捷键

• 加粗 Ctrl + B
• 斜体 Ctrl + I
• 引用 Ctrl + Q
• 插入链接 Ctrl + L
• 插入代码 Ctrl + K
• 插入图片 Ctrl + G
• 提升标题 Ctrl + H
• 有序列表 Ctrl + O
• 无序列表 Ctrl + U
• 横线 Ctrl + R
• 撤销 Ctrl + Z
• 重做 Ctrl + Y

Markdown及扩展

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考[Github][2].

表格

Markdown　Extra　表格语法：

项目 价格 Computer $1600 Phone $12 Pipe $1

可以使用冒号来定义对齐方式：

项目 价格 数量 Computer 1600 元 5 Phone 12 元 12 Pipe 1 元 234

定义列表

Markdown　Extra　定义列表语法：

项目１

项目２

定义 A

定义 B

项目３

定义 C

定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码，例如：

@requires_authorizationdef somefunc(param1='', param2=0):    '''A docstring'''    if param1 > param2: # interesting        print 'Greater'    return (param2 - param1 + 1) or Noneclass SomeClass:    pass>>> message = '''interpreter... prompt'''

脚注

生成一个脚注1.

目录

用 [TOC]来生成目录：

数学公式

使用MathJax渲染LaTex 数学公式，详见[math.stackexchange.com][1].

• 行内公式，数学公式为：Γ(n)=(n−1)!∀n∈ℕ。
• 块级公式：

x=−b±b2−4ac‾‾‾‾‾‾‾‾‾√2a

更多LaTex语法请参考 [这儿][3].

UML 图:

可以渲染序列图：

或者流程图：

• 关于 序列图 语法，参考 [这儿][4],
• 关于 流程图 语法，参考 [这儿][5].

离线写博客

即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。

博客发表后，本地缓存将被删除。　

用户可以选择 把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。

浏览器兼容

1. 目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
2. IE９以下不支持
3. IE９，１０，１１存在以下问题
   
   1. 不支持离线功能
   2. IE9不支持文件导入导出
   3. IE10不支持拖拽文件导入

---

Hello！大家好，这样一个开场白开始我的第一个博客。现在耳机里的bgm是The Jesus and Marry Chain的Darklands，建议阅读这篇博客时打开这首歌食用。

作为一个小白，前两个星期正式开始我的前端进阶之路，从七月中下旬开始了解前端到九月的最后一天，也有不长不短一个多月，这两周迅速补了html／css，终于可以开始看可爱的JavaScript了！什么？你说它不可爱？是的，但是用它跟着教程做出一个小程序还是蛮开心的，现在我就来分享一下，一个很简单的小程序，进击的马力奥，来咯！

先上效果图，大家请看：

我的马里奥是不是看起来很进击？

好的，下面我们分解一下这个网页，总的来说由三部分组成：背景框／键盘／（我可爱的）马里奥图片。

那么，我们首先要做的是构建框架——背景框，写好html标签，它竟然显示不出来？这可让我犯愁了，这么简单都弄不出来？我灵机一动，打开教程网页的实例，copy了一个css样式并做简单的修改，这样我的框架就有了。打开这个网页，你想要的css样式都可以找到基础代码。并名它为bg，写在我的css文件里：
重点内容

.bg{            width:400px;            padding:300px;            border:5px solid gray;            margin:0px;            background-color:#b0c4de;}

好啦！大功告成了，信心涨了一百倍，鼓掌，呱唧呱唧。

接下来，上某度精挑细选了一只帅气的马里奥，img元素也找好了，下面那个键盘是怎么回事呢？咦？按它还会动（这里还只是鼠标点击效果）？这就进入这个小程序的关键部分了，这里我们用到switch case语句来进行四个方向的控制。

首先，建立控制台的外观，仿照上面的背景框，我们再copy一次，小改一下：

.console{            width:100px;            padding:10px;            border:3px solid #FF4500;            margin:0px;            background-color:#ed4c0b;}

没错，你是不是注意到了！十六进制的颜色与背景框顺序相反，正好是我喜欢的橘色，太棒了，就它了。剩下的就是用table那套标签写一个表格，当然那里可以按的键要加button进去，才可以是可以响应点击功能的真正的按键。

那么，接下来就是最让我头疼的部分了，那就是函数的调用。现在在我看来也是实现一个会跑会吃饭的能活蹦乱跳的程序的关键！这里我们用到了两次函数，一个用来控制方向，一个让马里奥移动。

这里必须要强调一件重要的事，JavaScript是一个面向对象的语言，那什么是面向对象呢？好，这个问题我没有准确答案，但是！重点就是你需要对一个对象进行操作。首先，你得有个对象。我们这里的对象马里奥这个img元素了，我们要让它动，所以‘给它办个身份证’，用id来标识它：

<img id="textM1" style="width: 100px;position: absolute;left: 913px;top: 551px;" src=MA.jpg>

这步很重要，这样我们才能进行后面的操作，也就是拿到这个对象。W3C为我们制定了好的标准，用HTML DOM getElementById() 方法来获取它，官方的定义是这样的：getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。语法就相当简单了，一句话：

document.getElementById(id)

ok,在拿到这个对象后，我就要对它进行处理了，解释清楚上面后，我们来说说它是怎么动的：

var textM1=document.getElementById('textM1');                var left=textM1.style.left;                left=parseInt(left.substr(0,left.length-2));                textM1.style.left=(left+100)+"px";

parseInt是什么？substr又是什么？-2干嘛？

让我们来看看官方的解释：
parseInt() 函数可解析一个字符串，并返回一个整数；
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

所以这步是在剔除“px”?对了！当然这不是很好的方法，后期找到更好的办法我们再来补充。这样就设置了它的位移，四个方向用四个case控制，接下来就是让它移动了。

上面创建了马里奥怎么动的函数，现在该它出场了，创建一个马里奥对象——马里奥一号，我叫它M1：

var M1=new Mario();

创建并调用我的Move函数：

    function Move(direct){        switch (direct){            case 0:            M1.Move(direct);            break;    }

以向右移动的case0为例，最开始创建的马里奥类的direct传过来：

this.Move=function(direct)

新建的马里奥对象M1调用Move函数通过鼠标点击按钮进行移动：

<input type="button" value="D" onclick="Move(0)">

至此，我们的马力奥就可以开始进击之路啦！

源代码附上：

<html><head>    <!--引入css-->    <link rel="stylesheet" type="text/css" href="M1.css"><script type="text/javascript">    //设计Mario类    function Mario(){        this.x=0;        this.y=0;        this.Move=function(direct){            switch(direct){                case 0://向右移动                //为了让Mario动起来，先要拿到img对象                var textM1=document.getElementById('textM1');                var left=textM1.style.left;                left=parseInt(left.substr(0,left.length-2));                textM1.style.left=(left+100)+"px";                break;                case 1://向下移动                var textM1=document.getElementById('textM1');                var top=textM1.style.top;                top=parseInt(top.substr(0,top.length-2));                textM1.style.top=(top+60)+"px";                break;                case 2://向左移动                var textM1=document.getElementById('textM1');                var left=textM1.style.left;                left=parseInt(left.substr(0,left.length-2));                textM1.style.left=(left-100)+"px";                break;                case 3://向上移动                var textM1=document.getElementById('textM1');                var top=textM1.style.top;                top=parseInt(top.substr(0,top.length-2));                textM1.style.top=(top-60)+"px";                break;            }        }    }    //创建全局对象Mario    var M1=new Mario();    //全局函数    function Move(direct){        switch (direct){            case 0:            M1.Move(direct);            break;            case 1:            M1.Move(direct);            break;            case 2:            M1.Move(direct);            break;            case 3:            M1.Move(direct);            break;        }    }</script><style>td{    text-align:center;    color: #00ff00;}</style></head><body>    <div class="bg">        <img id="textM1" style="width: 100px;position: absolute;left: 913px;top: 551px;" src=MA.jpg>    </div>    <table border="1px" class="console">        <tr>            <td colspan="3">Game Start!</td>        </tr>        <tr>            <td>Up!</td>            <td><input type="button" value="W" onclick="Move(3)"></td>            <td>ok!</td>        </tr>        <tr>            <td><input type="button" value="A" onclick="Move(2)"></td>            <td>Yeah!</td><td><input type="button" value="D" onclick="Move(0)"></td>        </tr>        <tr>            <td>Move!</td>            <td><input type="button" value="S" onclick="Move(1)"></td>            <td>Jesus!</td>        </tr>    </table></body></html>

这里还有一个小问题，就是与非在代码过程中遇到的：引用css文件的问题。在熟悉语法的时候，一直以为在head标签里插入下面这句就可以：

<link rel="stylesheet" type="text/css" href="M1.css">

其实这里只是引入了.css文件，真正的把.css文件里设置的样式用到网页中，还需要在body标签里给它关联一下：

    <div class="bg">    </div>

这里是块，就在div标签里写，如果是表格，就在table标签里写。这样，相信你的.css文件引用就可以没问题了。

好的，这一周的总结就到这里，我们下周再见！

---

1. 这里是 脚注 的 内容. ↩