看完之前的几篇面向对象的介绍，至少也应该了解了其工作原理和简单的用法，那么本章将做一个实例演示一下使用面向对象是如何制作小游戏的。
要求：要制作的马里奥是一个会按照你按键的方向移动。
分析思路：
1、如何通过按钮来控制 Mario 的位置
2、设计相关的对象( Mario 的坐标 x , y)
3、给每个按键设置点击事件

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>马里奥Mario 小游戏</title>
      <style>
      .gameDiv{
         width: 1000px;
         height: 500px;
         background: slategray;
      }
      #marioImg{
         position: relative;
         width: 60px;
         left: 0;
         top: 0;
      }
      .control{
         width: 150px;
         height: 150px;
         border:2px solid #cccccc;
         text-align: center;
      }
      </style>
      <script>

      //设计Mario 的类
      function Mario(){
         this.x = 0;
         this.y = 0;
         // 向上移动 0-->上 ，1-->右 ，2-->下 ， 3--左
         this.move = function(derect){
            //这里为了改变 img 的 left 和 top，我们要得到 img 元素
            var marioImg = document.getElementById('marioImg');
            //用getComputedStyle，currentStyle来获取图片 marioImg 的属性
            var marioStyleInfo = window.getComputedStyle ? window.getComputedStyle(marioImg,"") : marioImg.currentStyle;
               switch(derect){
                  case 0:
                     //把获取得到的top属性值 赋值给变量 top，但是注意此变量的值是“30px”,我们要把它变为30才可以相加减
                     var top = marioStyleInfo.top;
                     //先解析字符串'30px'，并返回一个整数30px，然后再用substr()指定下标抽取字符30
                     top = parseInt(top.substr(0,top.length-2));
                     marioImg.style.top = (top - 10) + 'px';
                     break;
                  case 1:
                     var left = marioStyleInfo.left;
                     left = parseInt(left.substr(0,left.length-2));
                     marioImg.style.left = (left + 10) + 'px';
                     break;
                  case 2:
                     var top = marioStyleInfo.top;
                     top = parseInt(top.substr(0,top.length-2));
                     marioImg.style.top = (top + 10) + 'px';
                     break;
                  case 3:
                     var left = marioStyleInfo.left;
                     left = parseInt(left.substr(0,left.length-2));
                     marioImg.style.left = (left - 10) + 'px';
                  break;
               }
            };
         }

      //创建Mario 对象
      var mario = new Mario();        //实例化

      </script>
</head>
<body>
      <h3>分析思路:</h3>
      <ul>
         <li>如何通过按钮来控制Mario 的位置</li>
         <li>设计相关的对象(Mario 的坐标 x , y)</li>
         <li>给每个按键设置点击事件</li>
      </ul>
      <div class="gameDiv">
         <img id="marioImg" class="marioGif" src="mario.gif"/>
      </div>
      <table class="control">
         <tr>
            <td colspan="3">游戏键盘</td>
         </tr>
         <tr>
            <td></td>
            <td><input type="button" value="↑" onclick="mario.move(0)"></td>
            <td></td>
         </tr>
         <tr>
            <td><input type="button" value="←" onclick="mario.move(3)"></td>
            <td><input type="button" value="↓" onclick="mario.move(2)"></td>
            <td><input type="button" value="→" onclick="mario.move(1)"></td>
         </tr>
      </table>
</body>
</html>

通过上面简单的代码，实现点击按键控制马里奥的移动（在网上随便照一张移动的马里奥的gif图片插入 src 中），其实现原理就是通过面向对象编程，让多余的代码少量化，要操作的方向都在一个函数里面，通过点击的不同按键传递不同的参数 derect 实现。

如果完成上面的简单马里奥的移动，那我们来加深一下难度，完成一个贪吃蛇的游戏如何？