JavaScript实现超级玛丽小游戏

大家好，我是讯享网，很高兴认识大家。

昨天做了一个很小的游戏，对作为新手的我来说，还算有点成就感吧，在这里总结一下并与大家分享。当然，这个小游戏还有些瑕疵，做的时候有很多情况没有考虑到，只实现了最基本的功能。

这个游戏的基本界面是这样的：

讯享网

实现的功能就是：点击开始游戏，出现上下左右四个按钮，然后通过点击按钮来改变马里奥的位置，来抓取随机出现的小蘑菇。

那么实现这个功能，首要的就是思路，先想应该怎么实现，然后再动手！主要需要从这几方面去考虑：

1. HTML页面怎么写？------>这需要HTML、CSS的知识；

2. JS事件怎么实现？ ------->这个很重要。

先说第一点，其实还是需要与JS结合起来：

一开始，页面只有一个按钮（开始游戏），然后就是一个盒子，里面是一张图片，这个容易；

点击开始之后，出现了四个按钮。我们可以想象到，这四个按钮其实是存在的，也就是一开始就在HTML中写好的，只不过我们把它隐藏起来了，那么点击开始按钮，让它再显示出来就可以了。除了多了四个按钮，还多了一张图片，并且它的位置是随机的，这是实现该游戏很关键的地方，因为后面的上下左右点击事件也会用到。

我们学过CSS的都知道，要设置图片在容器中的位置，方法比较多，其中有种方法比较直接，即绝对定位，但要设置位置时，有一个前提，即必须设position为绝对定位。

position:absolute; top:10px; left:20px;

讯享网这些设置的过程在HTML中对应元素后面的style中设就可以了，注意，不能把style样式放在样式表里，后面JS会调元素的style属性，否则会调不到的。

接下来就是设置位置的问题，即top值和left值，在style中，其实它们的值都是字符串，比如说top:10px，其实它的top值为"10px"，所以在设置时需要注意。同时，为了设置小蘑菇图片的位置是随机的，还需要用到JavaScript的Math对象中的random()方法，它是用于生成0-1之间的随机数。

整理下思路：要实现图片位置随机设置问题，需要这几步：

1. 随机数的生成：

讯享网var x = Math.random();
讯享网var y = Math.random();
 
         2. 将这两个数设成top和left的值；（假设得到的图片对应的DOM对象为smg） 讯享网smg.style.top = x + "px";
讯享网smg.style.left = x + "px";
 
          这一阶段就完成了。  下来就是游戏的主要功能，这四个按钮对应四个方法，我们采用面向对象的思想，将这四个函数封装在一个Mario对象这种，每次点击按钮去调Mario对象的对应方法即可。那么这四个按钮的点击事件程序如何去写？不难想到，点击一次按钮，就相当于设置一次位置，上面我们已经将设置位置过程走了一遍，那么这个过程相对来说就简单了。但复杂的是，这次设置位置需要在之前的位置上进行加减，那么涉及到之前位置的读取，注意取到的top/left值也是字符串，需要转换成数值，然后再加减。下面，我只展示其中一个按钮的功能代码：  讯享网this.Up = function (){  var i = document.getElementById("mario"); //得到Mario对象；
讯享网 var i1 = document.getElementById("smg"); //得到小蘑菇对象;
 
讯享网 var mres1 = i.style.top.substr(0, (i.style.top.length - 2));
讯享网 var mres2 = i.style.left.substr(0, (i.style.left.length - 2));
 var mres3 = i1.style.top.substr(0, (i.style.top.length - 2));
讯享网 var mres4 = i1.style.left.substr(0, (i.style.left.length - 2));
 
讯享网 var W1 = parseInt(mres1);
 var W2 = parseInt(mres2);讯享网 var W3 = parseInt(mres3);
 
 讯享网 var W4 = parseInt(mres4);
 if(W1 == 0) //条件判断 
 讯享网 window.alert("不能超出界线！");
 else if(W1 + 80 == W3 && W2 + 80 == W4)
讯享网 window.alert("游戏结束！");
 else
讯享网 { 
       
         
       
 W1 -= 10;
讯享网 i.style.top = W1 + "px";
 } }
 讯享网
 这样基本实现了一个超级玛丽小游戏，但仍有很多方面没有考虑，比如说：两张图片的位置无论如何都满足不了游戏结束的条件，那该怎么解决？还有如果小蘑菇图片出现的位置与马里奥图片出现的位置重叠了那又该怎么办？不过这些都是小问题，可以再加条件，实现这些功能整体的思路大致就是上面的思路。  本人也是初学阶段，欢迎大家一起加入讨论！

JavaScript实现超级玛丽小游戏

相关推荐