HTML5 Canvas实战
8.8 创建View类
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

与画布交互:为图形和区域附加事件监听器

创建图表

通过游戏开发来拯救世界

创建英雄和敌人的精灵表

创建关卡图像和边界地图

创建英雄和敌人的Actor类

创建Level类

创建Health Bar类

创建Controller类

创建Model类

创建View类

本节,我们将创建View类,它是MVC的三个类中最简单的类。View类负责绘制状态,并在每个动画帧调用draw()方法来渲染关卡、每个坏人、英雄、生命值条。除此之外,View类也在屏幕的右上角显示FPS的值,以便我们能够看到游戏表现如何。

操作步骤

按照以下步骤,创建Canvas Hero游戏的视图:

1. 定义View类的构造函数:

/* 游戏视图
 * 视图访问画布上下文,并负责绘制逻辑
 */
function View(controller){
  this.controller  = controller;
  this.canvas  = controller.anim.getCanvas();
  this.context  = controller.anim.getContext();
}

2. 定义drawScreen()方法,该方法绘制加载、就绪、结束、获胜状态下的屏幕:

View.prototype.drawScreen  = function(screenImg){
  this.context.drawImage(screenImg,  0,  0, this.canvas.width, this.canvas.height);
};

3. 定义drawBadGuys()方法,该方法绘制坏人:

View.prototype.drawBadGuys  = function()  {
  var controller  = this.controller;
  var model  = controller.model;
  for  (var n  =  0; n  < model.badGuys.length; n++)  {
    var badGuy  = model.badGuys[n];
    var offsetPos  =  {
      x: badGuy.x  + model.level.x,
      y: badGuy.y  + model.level.y
    };
    badGuy.draw(offsetPos);
  }
};

4. 定义drawFps()方法,该方法在屏幕右上角绘制游戏的FPS值,以便我们能够看到游戏表现如何:

View.prototype.drawFps  = function()  {
  var context  = this.context;
  context.fillStyle  = "black";
  context.fillRect(this.canvas.width  -  100,  0,  100,  30);
  context.font  = "18pt Calibri";
  context.fillStyle  = "white";
  context.fillText("fps: "  + this.controller.avgFps.toFixed(1), this.canvas.width  -  93,  22);
};

5. 定义stage()方法,该方法绘制屏幕上的所有对象:

View.prototype.stage  = function(){
  var controller  = this.controller;
  var model  = controller.model;
  if  (controller.state == controller.states.PLAYING  || 
       controller.state == controller.states.GAMEOVER || 
       controller.state == controller.states.WON)  {
    model.level.draw();
    this.drawBadGuys();
    model.hero.draw(model.heroCanvasPos); 
    model.healthBar.draw();
    // draw screen overlay
    if  (controller.state  == controller.states.GAMEOVER)  { 
      this.drawScreen(controller.images.gameoverScreen);
    }
    else if  (controller.state  == controller.states.WON)  {
      this.drawScreen(controller.images.winScreen);
    }
    this.drawFps();
  }
  else if  (controller.state  == controller.states.READY)  {
    this.drawScreen(controller.images.readyScreen);
  }
};

工作原理

正如前面提到的,View类的主要职责是绘制状态屏幕和游戏屏幕。Canvas Hero游戏有四个不同的状态屏幕:

  • 加载状态
  • 就绪状态
  • 结束状态
  • 获胜状态

每当游戏状态发生改变,并需要一个状态屏幕时,控制器就调用View对象的drawScreen()方法绘制屏幕。下面是每个游戏状态屏幕的截图:

加载状态:

加载状态
图8-12 加载状态

就绪状态:

就绪状态
图8-13 就绪状态

结束状态:

结束状态
图8-14 结束状态

获胜状态:

获胜状态
图8-15 获胜状态

更多参考

  • 第5章 给画布加压并显示FPS

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验