上一节:
下一节:

  HTML 游戏组件

  • 定义和使用

    在游戏区域上添加一个红色正方形：

  • 添加组件

    创建一个组件构造函数，使您可以将组件添加到游戏区域。
    对象构造函数称为 component，我们制作了第一个组件 myGamePiece： 
    var myGamePiece;
function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red", 10, 120);
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}
    尝试一下
    组件具有控制其外观和移动的属性和方法。

  • Frames

    为了让游戏准备好行动，我们将每秒更新显示 50 次，这很像电影中的帧。
    其结果是每秒绘制和清除构件 50 次：
    首先，创建一个名为 updateGameArea() 的新函数。
    在 myGameArea 对象中，添加一个间隔，该间隔将每隔20毫秒（每秒50次）运行 updateGameArea() 函数。还要添加一个名为 clear() 的函数，它将清除整个画布。
    在组件构造函数中，添加一个名为 update() 的函数来处理组件的绘图。
    updateGameArea() 函数调用 clear() 和 update() 方法。 
    var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
      this.canvas.width = 480;
      this.canvas.height = 270;
      this.context = this.canvas.getContext("2d");
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);
      this.interval = setInterval(updateGameArea, 20);
  },
  clear : function() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.update = function(){
      ctx = myGameArea.context;
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.update();
}
    尝试一下

  • 让它动起来

    我们将以每秒钟50倍的速度更新游戏的水平位置： 
    function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}
    尝试一下

  • 清除区域

    似乎没有必要在每次更新时清除游戏区域。但是，如果不使用 clear() 方法，组件的所有移动都会留下它在最后一帧中的位置的踪迹： 
    function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}
    尝试一下

  • 更变大小

    可以控制构件的宽度和高度，创建一个10x140像素的矩形： 
    function startGame() {
  myGameArea.start();
  myGamePiece = new component(10, 140, "red", 10, 120);
}
    尝试一下

  • 更变颜色

    您可以控制组件的颜色： 
    function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "blue", 10, 120);
}
    尝试一下
    也可以使用其他颜色值，如十六进制、rgb 或 rgba： 
    function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
    尝试一下

  • 改变位置

    我们使用x和y坐标将组件定位到游戏区域。
    画布的左上角有坐标 (0,0)
    将鼠标悬停在下面的游戏区域上以查看其 x 和 y 坐标：
    您可以在游戏区的任何位置放置组件： 
    function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}
    尝试一下

  • 更多组件

    您可以在游戏区域中放置任意数量的组件： 
    var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
    redGamePiece = new component(75, 75, "red", 10, 10);
    yellowGamePiece = new component(75, 75, "yellow", 50, 60);
    blueGamePiece = new component(75, 75, "blue", 10, 110);
    myGameArea.start();
}

function updateGameArea() {
    myGameArea.clear();
    redGamePiece.update();
    yellowGamePiece.update();
    blueGamePiece.update();
}
    尝试一下

  • 移动部件

    使所有三个组件朝不同方向移动： 
    function updateGameArea() {
  myGameArea.clear();
  redGamePiece.x += 1;
  yellowGamePiece.x += 1;
  yellowGamePiece.y += 1;
  blueGamePiece.x += 1;
  blueGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}
    尝试一下
上一节:
下一节: