ロゴシュミグラム
ヘッダーロゴシュミグラム

ブロック崩しの作り方の基礎

Javascript
目次
  1. Javascriptでブロック崩しを作ろう！
  2. ブロック崩しの作り方の基礎
  3. 操作バーの関数の作成
  4. ブロックの関数の作成
  5. ボールの関数の作成
  6. ゲームを進行させる関数の作成
  7. ボールの反転角度を改善
  8. ブロックの新しい種類を追加

まずはシンプルなブロック崩しを作ろう

最初は細かな機能をなくしたシンプルなブロック崩しを作ります。

それが完成したら、ブロックの種類を増やしたりボールの移動角度を変更したり、いろいろと機能拡張していきます。

ゲーム全体の設定

canvasやブロックの幅を次のように名付けることにします。

canvasとブロックの縦幅や幅

これらの設定をsettings.jsに書き込んでいきます。

canvasのサイズと背景色

settings.js

// canvasの横幅
const canvasWidth = 400;
// canvasの横幅
const canvasHeight = 550;
// canvasの背景色
const backgroundColor = '#333333';

width や heigth の単位はピクセルで指定します。ここではcanvasの横幅を400px、縦幅を550pxにしています。背景色はグレーにしていますが、自由に変更してもかまいません。

ブロックのサイズと個数

settings.js

// ブロックエリアの横幅
const blocksAreaWidth = canvasWidth;
// ブロックエリアの縦幅
const blocksAreaHeight = 200;
// 行の個数
const blocksRowLength = 4;
// 列の個数
const blocksColumnLength = 4;
// １つのブロックの横幅
const blockWidth = blocksAreaWidth / blocksColumnLength;
// １つのブロックの縦幅
const blockHeight = blocksAreaHeight / blocksRowLength;

ブロックエリアの横幅はcanvasの横幅いっぱいに広げて、縦幅は上から200pxまでとしています。

blocksRowLength に行の個数、 blocksColumnLength にブロックの列の個数を指定します。ここでは上の図のように列数4、行数4にしています。4×4で最大16個のブロックを生成することができます。

そのあと_blocksAreaWidth_ の幅を列の個数で割ることで1個あたりのブロックの横幅を計算しています。同じようにしてブロックの縦幅も計算します。

操作バーの色とサイズ

settings.js

// 操作バーの横幅
const barWidth = 200;
// 操作バーの横幅の半分の長さ
const barHalfWidth = barWidth / 2;
// 操作バーの縦幅
const barHeight = 10;
// 操作バーの縦方向の位置
const barPosition = canvasHeight - 60;
// 操作バーの色
const barColor = 'white';

操作バーの縦の位置はcanvasの下部から60pxだけ上に位置するようにしています。

ボールの半径と色と移動スピード

settings.js

// ボールの半径
const ballRadius = 8;
// ボールの色
const ballColor = 'orange';
// ボールの移動スピード
const speed = 3;

ボールの移動スピードは値が大きいほど速くなります。

ゲームの状態の設定

ゲームが進行するとボールが操作バーの上に乗っている状況や、ゲームクリアしてアニメーションを静止している状況などゲームの状態が変化していきます。

そこでゲームの状態を次のように名づけておきます。

initial一番最初の状態。「クリックしてスタート」というメッセージを表示
waitingボールが落ちてしまい、操作バーの上にボールが乗っている状態
runningボールが動いている状態
gameClearゲームクリアした状態。「ゲームクリア」というメッセージを表示

そして今現在のゲームの状態を gameState に入れておきます。

settings.js

let gameState = 'initial';

canvasの設定

次にcanvas要素のサイズを設定してコンテキストを用意します。コンテキストとは絵を描くための画用紙や筆が入っている道具箱のようなものです。このコンテキストを使って各パーツを描きます。

まずはblocks-canvasのほうから行います。

settings.js

const blocksCanvas = document.getElementById('blocks-canvas');
// canvasのサイズを設定
blocksCanvas.width = canvasWidth;
blocksCanvas.height = canvasHeight;
// コンテキストの取得
const blocksCtx = blocksCanvas.getContext("2d");

同じようにbar-balls-canvasのほうも行います。

settings.js

const barBallsCanvas = document.getElementById('bar-balls-canvas');
barBallsCanvas.width = canvasWidth;
barBallsCanvas.height = canvasHeight;
const barBallsCtx = barBallsCanvas.getContext("2d");

メッセージやブロックの個数を表示する要素も用意しておきます。

settings.js

const messageLabel = document.getElementById('message');
const blocksCountLabel = document.getElementById('blocks-count');

これでsettings.jsは完成です。

次のページ

操作バーの関数の作成