HTML 5 2D 游戏开发:设置舞台 - 面向对象网,web开发,html,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Html > 正文

HTML 5 2D 游戏开发:设置舞台

来源: www.bianceng.cn 阅读:

游戏开发的许多方面都和玩游戏没有关系。显示说明、暂停游戏、级别之间的过渡和滚动游戏分数,这些 都是游戏开发人员必须在游戏本身以外实现的一些特性。

当游戏的灵感来临时,这些灵感中通常不包 括显示高分数或级别之间的过渡的巧妙方式,开发人员会很自然地深入研究如何实现游戏机制,但对于游戏的 基础架构却没有太多的想法。但在大多数项目中,如果想在开发后添加功能,所需的工作量比从一开始就添加 功能要大得多。

在本系列的 上一期文章 中,我讨论了图形和动画,这些是 Snail Bait 游戏的基础 内容。在本文中,我将临时转向去实现该游戏的一些基础架构。首先,我将 Snail Bait 的代码封装在一个 Game 对象中。最初实现该游戏时,我就是从这一步开始的,但在上一期文章中,我不想在对象中实现它们而 混淆了对图形和动画的讨论,所以我将对 Game 对象的介绍推迟到了现在。

我还将告诉您如何暂停和 冻结 Snail Bait,以及随后如何利用动画倒计时解冻并重启游戏。在文章的结尾,我会回到游戏机制的主题 ,向您展示如何通过处理键盘事件来控制跑步小人的垂直位置。

在本文中,您将学习以下内容:

将游戏函数封装在一个对象中。

暂停和恢复游戏。

当窗口失去焦点时自动暂停游戏。

当窗口重新获得焦点时,利用动画的倒计时继续游戏。

暂时显示给用户的消息(被称为 toast)。

处理键盘输入。

在本文中,您将学习如何定义和实例化 JavaScript 对象,如何使用 CSS3 过渡,以及如何结合使用 setTimeout() 和这些过渡来实现分步动画。

游戏对象

在本系列文章中,到现在为止,我已经 实现了所有 Snail Bait 函数,并将它们的几个变量定义为全局变量。当然,我们以后不会再这样做。

从现在开始,我不再使用全局变量,而是将所有 Snail Bait 函数和变量封装在一个对象中。该对象 由两部分组成,如清单 1 和清单 2 所示。(本文的完整样例代码请参见 下载。)

清单 1 是本游戏 的构造函数,它定义了对象的属性:

清单 1. 本游戏的构造函数(部分清单)

var 

SnailBait = function (canvasId) {
   this.canvas  = document.getElementById(canvasId);
   this.context = this.canvas.getContext('2d');
    
   // HTML elements 
    
   this.toast = document.getElementById('toast'),
   this.fpsElement = document.getElementById('fps');
    
   // Constants
    
   this.LEFT = 1;
   this.RIGHT = 2;
   ...
    
   // Many more attributes are defined in the rest of this function
};

清单 2 是本游戏的原型,它定义了对象的方法:

清单 2. 是本游戏的原型(部分清单)

                SnailBait.prototype = {
   // The draw() and drawRunner() methods were
   // discussed in the second article in this series.
    
    
   draw function (now) {
      this.setPlatformVelocity(); 
      this.setOffsets();
       
      this.drawBackground();
       
      this.drawRunner();
      this.drawPlatforms();
   },
       
   drawRunner: function () {
      this.context.drawImage(this.runnerImage,
         this.STARTING_RUNNER_LEFT,
         this.calculatePlatformTop(this.runnerTrack) - this.RUNNER_HEIGHT);
   },
   ...
    
   // Many more methods are defined in the rest of this object
};

Tags:
相关文章列表: