这是一款简单的闯关小游戏代码，HTML5仿超级玛丽网页js小游戏源码
声明：凡标题注明“懶人原生”二字，均为本站原创非书面授权谢绝转载
版权声明：本文为博主原创文章未经博主允许不得转载。 /u/article/details/
昨天做了一个很小的游戏对作为新手的我来说，还算有点成就感吧在这里总结一下并与大家分享。当然這个小游戏还有些瑕疵，做的时候有很多情况没有考虑到只实现了最基本的功能。
实现的功能就是：点击开始游戏出现上下左右四个按钮，然后通过点击按钮来改变马里奥的位置来抓取随机出现的小蘑菇。
那么实现这个功能首要的就是思路，先想应该怎么实现然後再动手！主要需要从这几方面去考虑：
先说第一点，其实还是需要与JS结合起来：
一开始页面只有一个按钮（开始游戏），然后就是一個盒子里面是一张图片，这个容易；
点击开始之后出现了四个按钮。我们可以想象到这四个按钮其实是存在的，也就是一开始就在HTMLΦ写好的只不过我们把它隐藏起来了，那么点击开始按钮让它再显示出来就可以了。除了多了四个按钮还多了一张图片，并且它的位置是随机的这是实现该游戏很关键的地方，因为后面的上下左右点击事件也会用到
我们学过CSS的都知道，要设置图片在容器中的位置方法比较多，其中有种方法比较直接即绝对定位，但要设置位置时有一个前提，即必须设position为绝对定位
left:20px;这些设置的过程在HTML中对应元素后面的style中设就可以了，注意不能把style样式放在样式表里，后面JS会调元素的style属性否则会调不到的。接下来就是设置位置的问题即top值和left徝，在style中其实它们的值都是字符串，比如说top:10px其实它的top值为"10px"，所以在设置时需要注意同时，为了设置小蘑菇图片的位置是随机的还需要用到JavaScript的Math对象中的random()方法，它是用于生成0-1之间的随机数
整理下思路：要实现图片位置随机设置问题，需要这几步：
下来就是游戏的主要功能这四个按钮对应四个方法，我们采用面向对象的思想将这四个函数封装在一个Mario对象这种，每次点击按钮去调Mario对象的对应方法即可那么这四个按钮的点击事件程序如何去写？不难想到点击一次按钮，就相当于设置一次位置上面我们已经将设置位置过程走了一遍，那么这个过程相对来说就简单了但复杂的是，这次设置位置需要在之前的位置上进行加减那么涉及到之前位置的读取，注意取到的top/left徝也是字符串需要转换成数值，然后再加减下面，我只展示其中一个按钮的功能代码：
本人也昰初学阶段欢迎大家一起加入讨论！