写在前面：
这是自己自学前端之路上第一次写博文，希望以此来巩固自己所学的知识，也希望能和大家多多交流！
这个小案例是韩顺平的js学习视频中的案例，视频中给出了一部分的实现，之后由本人补充了一些功能并改进了页面布局。
功能需求分析：
1)通过上下左右四个button控制马里奥的移动
2)使用面向对象的思想，设计Mario的类，并为Mario添加方法
3)注意Mario移动不能跑出游戏界面(边界检测)
4)Mario遇到得分物体获得加分(碰撞检测+得分统计)
页面初步布局：
设置控制中心，可通过table标签实现，表格中的内容可添加input标签， type="button" value="上/下/左/右"的箭头符号
设置游戏区域div，命名为gamefield，并添加一张马里奥的图片，游戏主角，以及草莓的图片作为可得分物体。
核心功能实现：
1)该小案例是为了熟悉js的面向对象语法，所以设置Mario的类 通过构造函数 function Mario(){...}声明该类，类中需要实现的方法为this.move=function(direnction){.....}，移动的情况分为上下左右四种情况，所以通过case语句来区分。当然其中还有很多细节，但是一步步先把整体框架搭建出来，之后再一步步修改细化。
构造函数写完之后，通过实例化才能生成一个Mario的对象，用这句话来实现
var mario=new Mario ();
接下来，在主程序中 声明一个全局函数，就可以调用mario的move方法了
2)好了，接下来就是对Mario类中公有方法move的具体实现了。
想要移动mario，首先需要获取它的图片元素，js中获取单个元素的方法getElementById()
var mymario=document.getElementById("marioimg");
获得这个元素之后，我们还需要获得这个图片的位置。视频教程中对图片设置为了行内样式，其坐标位置就是相对于游戏区域gamefield的位置，其前提是gamefield的定位必须为obsolute，否则无法获取到。
直接通过obj.style.left和obj.style.top即可获得图片在游戏区域的相对位置。
用这个方法中间遇到了一些坑点，上网查了半天终于解决了！！！是这样说的：获取元素的位置通常有两种方法
1.直接通过obj.style.left和obj.style.top，但是有局限性，这种获取的方法只能获取到行内样式的left和top的属性值，不能获取到style标签和link 外部引用的left和top属性值。(当时没按照教程来设置成了外部样式，半天都是空，获取不到值)
2使用obj.offsetLeft来获取对象的left属性值,用obj.offsetTop来获取对象的top属性值。 但这两个属性是只读的，不能赋值
var left=mymario.style.left; //取到的是带px的字符串
left=parseInt(left.substring(0,left.length-2)); //去掉px,转为int数字
var top=mymario.style.top;
top=parseInt(top.substring(0,top.length-2));
switch语句可以初步这样写出来：
这是设置好之后，就可以将全局函数marioMove(direction)绑定到button的onclick事件上，此时我们就可以通过button控制mario的移动了。但是现在还有很多不足，mario会跑出界，遇到其他图片没有响应，所以需要继续添加新的功能。
3）实现边缘检测功能，防止mario跑出游戏区域之外。直接上代码因该可以一目了然。
4）实现碰撞检测功能，mario碰到其他物体可以得分
其基本原理如下图所示：
物体1只要处于上图的四条边界线之外的任意一种情况，就没有发生和物体2的碰撞，否则就发生了碰撞。具体代码如下：
5）得分统计
道理也很简单，每检测到一个发生了碰撞检测，得分score变量就进行累加
var spanArray=document.getElementById("score").getElementsByTagName("span"); //ByTagName获取的是一组元素
var score=parseInt(spanArray[0].innerHTML); //元素必须转化为int型的分数
之后检测到碰撞之后就是：
score+=100;
spanArray[0].innerHTML=score;
6）得分物体随机生成（自己想出来的小功能）
一次碰撞之后，得分物体（草莓消失），在游戏区域的任意位置再次生成，所以这里的主要思路就是像获得mario的位置那样，获得草莓的位置，统计完得分后，生成随机数，重新改变草莓的位置。就可以实现。
//随机初始化草莓的位置
caomei.style.left=(Math.floor(Math.random()*42+1))*20+"px";
caomei.style.top=(Math.floor(Math.random()*17+1))*20+"px";
用到了random和floor函数，这里的参数是根据游戏区域大小，还有每次移动的步长而设置的。
接下来就放我的整体实现效果图了
完整的代码，请移步至我的github中去查看https://github.com/mermaidgaogao/EasyMario.git
写完了第一篇博文，内心还有点小激动，多多指教，哈哈！永远on the way
You don't have to be afraid of what you are......
