ゲームキャンバス

HTML <canvas> 要素は、ウェブページ上に矩形オブジェクトとして表示されます：

HTML Canvas

<canvas> 要素は、HTMLでゲームを開発するのに非常に適しています。

<canvas> 要素は、ゲームを作成するために必要なすべての機能を提供します。

JavaScriptを使用して <canvas> 上で描画、テキストの書き込み、画像の挿入などを行うことができます。

.getContext("2d")

<canvas> 要素には、 getContext("2d") オブジェクトは、描画に使用するメソッドと属性を提供します。

私たちの Canvasチュートリアル について学びます <canvas> 要素と getContext("2d") オブジェクトの詳細な情報

それでは、始めましょう

ゲームを作成するには、まずゲームエリアを作成し、描画に準備を整えます：

インスタンス

function startGame() {
  myGameArea.start();
}
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]);
  }
}

自分で試してみてください

このチュートリアルの後半部分で、オブジェクト myGameArea もっと属性とメソッドを得ることができます。

関数 startGame() 呼び出し myGameArea オブジェクトの start() メソッド。

start() メソッドは、以下のものを生成しました <canvas> 要素、および最初の子ノードとして挿入します <body> 要素内。