8.8 创建View类

优质

小牛编辑

125浏览

2023-12-01

本节，我们将创建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);
  }
};