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实现超级玛丽小游戏相关推荐

视频教程-JavaScript打飞机小游戏视频教程-JavaScript
JavaScript打飞机小游戏视频教程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强 ...
个人主页增添超级玛丽小游戏与留言板功能
项目地址(GitHub). 我不打算花时间一点点去磨这个网站,没那么多时间,所以都是修改.利用别人现成的模板. 超级玛丽小游戏来源.留言板来源.小游戏是直接照抄,加了两个标签:留言板原来是txt文档格 ...
用javascript编写的小游戏-打砖块
用javascript编写的小游戏-打砖块前言启发下载链接游戏功能说明代码效果演示代码后记前言这是我在CSDN发表的第一篇文章.是我在初学javascript后, 忽然来了兴致, 编 ...
JavaScript实现2048小游戏，我终于赢了一把
JavaScript实现2048小游戏作者简介作者名: 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢 ...
利用html css javascript写翻翻乐小游戏
利用html css javascript写翻翻乐小游戏废话不多说,先看效果代码放到文章末尾,不想看代码解释的可以直接跳过到后面直接下载我写这个小游戏的过程 1.准备图片我在觅元素上找了 ...
如何实现JavaScript猜数字小游戏
本篇文章给大家详细介绍一下搞定JavaScript猜数字小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. JavaScript 猜数字小游戏在1~10中随机抽取一个数字 ...
JavaScript打飞机小游戏视频教程-张鹏-专题视频课程
JavaScript打飞机小游戏视频教程-904人已学习课程介绍本课程介绍了如何使用js来做一个打飞机小游戏,其中涉及到页面的排版以及检测碰撞和逻辑的算法问题和DOM的操作的相关介 ...
韩顺平 javascript教学视频_学习笔记17_js超级玛丽小游戏
采用面向对象思想设计超级马里奥游戏人物怎么用通过按键,来控制图片的位置这个小游戏,用面向对象会很方便,不用面向对象会很麻烦很麻烦,比如以后要讲解的坦克大战的游戏,要是用纯的面向过程或函数式的方式写 ...
初学JavaScript之颜色小游戏
/*老师布置的的颜色小游戏的作业,根据问题显示的文字找出对应的颜色判断小游戏,可能有很多需要改进的代码,后面会多多改进的,谢谢2018-07-15 12:45:59*/<!DOCTYPE htm ...
javascript实现2048小游戏
最近打算系统的学习一下javascript,想做点项目练手,就选择用javascript实现我比较喜欢玩的2048游戏,大体完成以后还是蛮有成就感的.(文末给出相关代码) 游戏相关截图: ...

JavaScript实现超级玛丽小游戏

JavaScript实现超级玛丽小游戏相关推荐

最新文章

热门文章