制作四排 - 第6部分：空白画布-DEV365 开发者社区

介绍

首先，跟随本系列的出色工作！到目前为止，您已经完成了本教程的前50％！

在上一篇博客文章中，您对项目进行了重新组织，以准备在游戏前端工作。这是工作开始的帖子。

这是您在本教程结束时的预期结果：

这是上图的分解：

最高部分：状态区域 - 显示当前玩家转弯的颜色以及一个状态消息，解释了游戏中发生的情况。
中间部分：游戏板 - 显示玩家将令牌放置在游戏中的地方。
底部部分：再次播放按钮：重新启动游戏。游戏结束后出现。

这篇文章将重点放在设置游戏的每个部分都将显示在。

上。

设置常数（再次）

与创建游戏逻辑的常数文件相同，您还需要为前端创建一个。

在src中创建一个名为constants的新目录，然后在您刚创建的目录内（src/constants），创建一个带有这些内容的称为index.js：

export const FrontEndConfig = {
  GAME_BACKGROUND_COLOR: "#122A67",
};

export const StatusMessages = {
  DRAW: "DRAW!",
  YELLOW_TURN: "YELLOW PLAYER'S TURN",
  RED_TURN: "RED PLAYER'S TURN",
  YELLOW_WIN: "YELLOW PLAYER WINS!",
  RED_WIN: "RED PLAYER WINS!",
};

export const StatusAreaConfig = {
  HEIGHT: 100,
  PADDING_TOP: 40,
  INNER_MARGIN: 28,
  INDICATOR_WIDTH: 16,
};

export const BoardConfig = {
  WIDTH: 284,
  HEIGHT: 242,
  MARGIN_TOP: 20,
  MARGIN_LEFT: 18,
  HORIZONTAL_PADDING: 18,
  VERTICAL_PADDING: 16,
  SLOT_MARGIN: 8,
  SLOT_WIDTH: 28,
  BACKGROUND_COLOR: "#1D48B8",
  SLOT_OUTLINE_COLOR: "#225FFD",
};

export const TokenColor = {
  NONE: "#D9D9D9",
  YELLOW: "#EAC02B",
  RED: "#EA2B2B",
};

export const PlayAgainButtonConfig = {
  WIDTH: 128,
  HEIGHT: 40,
  TEXT: "Play Again",
  MARGIN_BOTTOM: 80,
  BORDER_WIDTH: 1,
  BACKGROUND_START_COLOR: "#225FFD",
  BACKGROUND_END_COLOR: "#1D48B8",
};

设置画布

向身体添加画布

首先，您需要将<canvas>元素添加到页面的<body>。它需要拥有320的width，480的height和一个“帆布”的id。您在index.html中这样做。看起来应该这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Four in a row</title>
  </head>

  <body>
    <canvas id="canvas" width="320" height="480"></canvas>
    <script src="src/index.js" type="module"></script>
  </body>
</html>

在JavaScript中引用画布

接下来，您将从JavaScript引用已添加到页面的<canvas>元素。

在src目录中创建一个名为FrontEnd.js的新FIE。这将处理游戏的前端逻辑。

将以下代码添加到您刚刚创建的文件：

export default class FrontEnd {
  constructor(game) {
    this.game = game;
  }
}

FrontEnd类的构造函数具有一个称为game的参数，该参数包含FourInARowGame类的实例。 FourInARowGame实例将存储在game字段中的FrontEnd类中。这将用于更新和检索核心游戏的状态。

接下来，您将设置画布。

首先，在FrontEnd类的构造函数中，在页面上获取对画布元素的引用，然后将其存储在名为canvas：
的类字段中

export default class FrontEnd {
  game;
  canvas;

  constructor(game) {
    this.game = game;
    this.canvas = document.getElementById("canvas");
  }
}

接下来，将另外2个称为width和height的字段设置为画布的宽度和高度：

export default class FrontEnd {
  game;
  canvas;
  width;
  height;

  constructor(game) {
    this.game = game;
    this.canvas = document.getElementById("canvas");
    this.width = canvas.width;
    this.height = canvas.height;
  }
}

一旦您开始在画布上绘制时，这将派上用场。

最后，设置画布的背景：

import { FrontEndConfig } from "./constants/index.js";

export default class FrontEnd {
  game;
  canvas;
  width;
  height;

  constructor(game) {
    this.game = game;
    this.canvas = document.getElementById("canvas");
    this.canvas.style.background = FrontEndConfig.GAME_BACKGROUND_COLOR;
    this.width = canvas.width;
    this.height = canvas.height;
  }
}

现在让我们看看您是否正确引用了画布元素。

在src/index.js中，更新代码以创建FrontEnd类的新实例：

import { FourInARowGame } from "./gameLogic/index.js";
import FrontEnd from "./FrontEnd.js";

let frontEnd = new FrontEnd(new FourInARowGame());

如果您运行了HTTP服务器并检查其指向的地址，则应该看到一个蓝色矩形（这是您创建的画布！）：

画画布

让我们继续画画布。为此，您需要获得2D canvas rendering context。考虑到这一点的另一种方法是，您可以为创建2D图纸而获得一套艺术品（油漆，画笔，模板等）。

您将在FrontEnd类的context字段中设置此渲染上下文对象：

import { FrontEndConfig } from "./constants/index.js";

export default class FrontEnd {
  game;
  canvas;
  width;
  height;
  context;

  constructor(game) {
    this.game = game;
    this.canvas = document.getElementById("canvas");
    this.canvas.style.background = FrontEndConfig.GAME_BACKGROUND_COLOR;
    this.width = canvas.width;
    this.height = canvas.height;
    this.context = this.canvas.getContext("2d");
  }
}

接下来，您需要进行scale the canvas for high resolution displays to prevent issues with blurry drawings。

首先，创建一个在FrontEnd类中的称为enableHiDPIDisplaySupport()的方法：

export default class FrontEnd {
  // ...
  enableHiDPISupport() {
    // Get the DPR and size of the canvas
    const dpr = window.devicePixelRatio;
    const rect = this.canvas.getBoundingClientRect();

    // Set the "actual" size of the canvas
    this.canvas.width = rect.width * dpr;
    this.canvas.height = rect.height * dpr;

    // Scale the context to ensure correct drawing operations
    this.context.scale(dpr, dpr);

    // Set the "drawn" size of the canvas
    this.canvas.style.width = `${rect.width}px`;
    this.canvas.style.height = `${rect.height}px`;
  }
}

现在在FrontEnd类构造函数中调用enableHiDPIDisplaySupport()方法：

export default class FrontEnd {
  constructor(game) {
    this.game = game;
    this.canvas = document.getElementById("canvas");
    this.canvas.style.background = FrontEndConfig.GAME_BACKGROUND_COLOR;
    this.width = canvas.width;
    this.height = canvas.height;
    this.context = this.canvas.getContext("2d");

    this.enableHiDPIDisplaySupport();
  }

  // ...
}

您现在准备开始在画布上绘画。

在FrontEnd类中创建一种称为start()的方法，并绘制一个宽度为50和100高度的白色矩形：

export default class FrontEnd {
  constructor(game) {
    // ...
  }

  start() {
    this.context.fillStyle = "white";
    this.context.fillRect(20, 20, 50, 100); // fillRect(x, y, width, height);
  }
}

现在返回到src/index.js，并在创建的FrontEnd类实例上调用start()方法：

import { FourInARowGame } from "./gameLogic/index.js";
import FrontEnd from "./FrontEnd.js";

let frontEnd = new FrontEnd(new FourInARowGame());
frontEnd.start();

现在，如果您使用http-server检查项目，在浏览器中，您会看到一个带有白色矩形的蓝色画布：

恭喜，您介绍了使用HTML5 Canvas API！

绘制绘图的基础知识

在下一篇文章中，您将在画布上绘制游戏板。

现在就全部！ ð