HTML5 Canvas实战
8.5 创建Health Bar类
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

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

创建图表

通过游戏开发来拯救世界

创建英雄和敌人的精灵表

创建关卡图像和边界地图

创建英雄和敌人的Actor类

创建Level类

创建Health Bar类

本节,我们将创建HealthBar类,用来更新并渲染英雄的生命值:

操作步骤

按照以下步骤,创建HealthBar类:

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

/* HealthBar类应该对Actor或Level类一无所知,
* 以便它们之间是解耦的
*/
function HealthBar(config){
  this.controller  = config.controller;
  this.maxHealth  = config.maxHealth;
  this.x  = config.x;
  this.y  = config.y;
  this.maxWidth  = config.maxWidth;
  this.height  = config.height;
  this.health  = this.maxHealth;
}

2. 定义setHealth ()方法,该方法设置生命值:

 HealthBar.prototype.setHealth  = function(health){
  this.health  = health;
};

3. 定义draw()方法,该方法绘制生命值条:

  HealthBar.prototype.draw  = function(){
  var context  = this.controller.view.context;
  context.beginPath();
  context.rect(this.x, this.y, this.maxWidth, this.height); 
  context.fillStyle  = "black";
  context.fill();
  context.closePath();
  context.beginPath();
  var width  = this.maxWidth  * this.health  / this.maxHealth; 
  context.rect(this.x, this.y, width, this.height);
  context.fillStyle  = "red"; 
  context.fill();
  context.closePath();
};

工作原理

HealthBar对象有一个简单的构造函数,来初始化生命值条的位置和尺寸。并包含setHealth() 和 draw()两个方法,setHealth()方法设置HealthBar对象的health属性,draw()方法调用画布上下文对象的rect()方法绘制生命值条。

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验