【JavaScript】MDNのブロックくずしチュートリアルを試してみた

こんにちは！セミマサです。

MDNにあった「JavaScriptでブロックくずしを作る」チュートリアルを実際にやってみました。

チュートリアルは下のリンクから飛べます。

外部サイト

完成品

チュートリアルを完了すると下図のようなブロック崩しが完成します。長めのgifファイルなので読み込みに時間がかかるかもしれません。

セミ君

私のプレイがイマイチでぐだぐだになったので4倍速で再生しています。

canvas上に要素を描画するのはphina.js頼りだったので勉強になりました。

2次元配列を使って多数のブロックを管理する方法を学べました。ブロック以外にも応用できそうなので今後のゲーム制作に活かしたいと思います。

当たり判定処理はphina.jsが用意してくれたものを使っていたので何をやっているかはわかるものの実際に書いたことは無い状態でした。自分でコードを書いてみることで理解が深まったと思います。

チュートリアルに「canvas上に四角形と円を描画してみるパート」があるのですが、上図のようにうまく表示できないことがありました。

赤い四角形は幅50高さ50を指定しているので正方形になるはずなのにどこからどう見ても長方形ですね……。

原因はcanvasのサイズ指定方法の誤りによるものでした。バグが発生した時はCSSに下記のように記述していました。

#mycanvas{
    width: 360px;
    height: 480px;
}

#mycanvas{

width: 360px;

height: 480px;

}

上の記述をCSSから削除し、HTML側で下記のように指定することで解決できました。

<canvas id="mycanvas" width=360px height=480px></canvas>

1	<canvas id="mycanvas" width=360px height=480px></canvas>

正常に表示された場合上図のようになります。

MDNのチュートリアルはとてもわかりやすかったのでJavaScriptで何かゲームを作ってみたい人におすすめです。