基于JavaScript实现的超级马里奥(Supper Mario)游戏

Monstarrr

发布日期: 2019-03-27 16:38:20 浏览量: 1488
评分:
star star star star star star star star star star_border
*转载请注明来自write-bug.com

一、游戏介绍

《超级马里奥》是一款基于javascript的web端游戏。实现了FC平台上超级马里奥经典版的部分功能复刻。

游戏暂时共设计一关。每关以主人公在走到重点的前提下尽可能地收集金币。主人公在闯关过程中,会遇到怪物,可以通过踩死或者跳过。也会遇到深坑。给游戏增加了一定的难度。

二、概要设计

概要设计的主要目的是,将游戏的需求转化为游戏的数据结构和系统结构。通过制定相应文档和规范,以求在开发过程中指导开发人员的进行开发。并且规定好每个模块的功能和作用。下面对每个类进行详尽的介绍。

2.1 游戏主要功能模块介绍

Level类主管着地图内各个元素的协调,决定玩家何时死亡,如何算是过关,以及各个元素的位置。

  • 属性

    • width:地图宽度
    • height:地图高度
    • grid:地图属性
    • actor:地图中活动的元素
    • coincount:玩家收集金币数
    • starttime:关卡开始时间
    • nowtime:当前时间
  • 函数

    • obstacleAt:判断玩家位置,是否超出游戏界面,并作出反应
    • actorAt:判断玩家碰撞的行为,并且返回碰撞时候位置。
    • animate:对玩家状态变更处理
    • playerTouched:对玩家碰触到物体的处理
    • isFinished:判断游戏是否结束

2.2 游戏内元素类型介绍

2.2.1 Player类

Player类是代表玩家。

  • 属性

    • pos:代表玩家位置
    • size:代表玩家的大小
    • speed:代表玩家的速度
  • 函数

    • moveX:用于计算玩家在X轴方向上的运动
    • moveY:用于计算玩家在Y轴方向上的运动
    • act:用于处理玩家运动处理以及碰触到物体后的反应

2.2.2 Lava类

Lava类是代表游戏中的岩浆,玩家一旦触碰就会死亡。

  • 函数
    • act:计算岩浆的运动

2.2.3 Coin类

Coin类是代表游戏中的金币,玩家触碰便能增加分数。

  • 函数
    • act:实现金币摇晃运动的效果

2.2.4 Banli类

Banli类是代表游戏中的怪物,也就超级马里奥经典版中的板栗。

  • 函数
    • act:实现板栗运动的效果

2.3 游戏界面实现

2.3.1 DOMDisplay

  • 属性

    • wrap:用作创建html标签
    • level:记录当前关卡
  • 函数

    • drawActors:画出游戏元素
    • drawBackground:画出游戏背景
    • scrollPlayerIntoView:追踪人物界面
    • clear:清空界面

2.3.2 CanvasDisplay

  • 函数
    • drawFrame:对Canvas进行绘制
    • drawBackground:画出背景及游戏元素
    • clear:清空canvas画布内容
    • drawPlayer:绘制玩家
    • drawLava:绘制master
    • drawActors:绘制游戏元素
    • drawLifeandScore:绘制分数
    • drawLifeandScore:绘制游戏剩余时间
    • drawLife:绘制生命数

2.4 操作函数实现

  • arrowCodes:键值对,记录允许的键盘按键

  • trackKeys:增加监听器,对按键按下之后作出反应

  • runGame:运行游戏,并对游戏结果做出反应

  • startLevel:开始某一个关卡,调用runLevel开始,对游戏结束或者过关做出反应

  • runLevel:开始某一个关卡,调用各类函数实现关卡的绘制计算等

三、游戏设计思路

3.1 玩家死亡后动画实现

isFinished函数实时判断玩家状态是否为lost或者win,也就是是否已经结束。若状态为lost,则播放lost的动画,玩家位置下移,size减小,背景色变深。若状态为win,则播放win的动画,背景色变浅。

3.2 检测前方能否通过的方法

利用moveX和moveY的方法判断,如果前方没有障碍物,则位置更新到下一步,如果存在障碍我,则位置保持不变。

3.3 关键代码

玩家触碰物体的实现

  1. Level.prototype.actorAt = function(actor) {
  2. console.log(this.actors.length);
  3. for (var i = 0; i < this.actors.length; i++) {
  4. var other = this.actors[i];
  5. if (other != actor && actor.pos.x + actor.size.x > other.pos.x && actor.pos.x < other.pos.x + other.size.x && actor.pos.y + actor.size.y > other.pos.y && actor.pos.y < other.pos.y + other.size.y){
  6. var acx = actor.pos.x + actor.size.x/2;
  7. var acy = actor.pos.y + actor.size.y/2;
  8. var otx = other.pos.x + other.size.x/2;
  9. var oty = other.pos.y + other.size.y/2;
  10. if(acy<oty&&acx>otx+(acy-oty)&&acx<otx-(acy-oty)){
  11. return [other,"kill"];
  12. }
  13. else{
  14. return [other,"die"];
  15. }
  16. }
  17. }
  18. };

按键监听

  1. function trackKeys(codes) {
  2. var pressed = Object.create(null);
  3. function handler(event) {
  4. if (codes.hasOwnProperty(event.keyCode)) {
  5. var down = event.type == "keydown";
  6. pressed[codes[event.keyCode]] = down;
  7. event.preventDefault();
  8. }
  9. }
  10. addEventListener("keydown", handler);
  11. addEventListener("keyup", handler);
  12. return pressed;
  13. }

页面绘制

  1. DOMDisplay.prototype.drawFrame = function() {
  2. if (this.actorLayer)
  3. this.wrap.removeChild(this.actorLayer);
  4. this.actorLayer = this.wrap.appendChild(this.drawActors());
  5. this.wrap.className = "game " + (this.level.status || "");
  6. this.scrollPlayerIntoView();
  7. };

四、游戏测试

上传的附件 cloud_download 基于JavaScript实现的超级马里奥(Supper Mario)游戏.7z ( 1.10mb, 30次下载 )
error_outline 下载需要13点积分

发送私信

摘不到的星星,总是最闪亮的

11
文章数
12
评论数
最近文章
eject