04:「ゲームの画面を作ろう」 – JavaScriptライブラリ「tmlib.js」でシンプルなタッチゲームを超簡単に作るチュートリアル
はてなブックマーク - 04:「ゲームの画面を作ろう」 – JavaScriptライブラリ「tmlib.js」でシンプルなタッチゲームを超簡単に作るチュートリアル
Pocket

たくさんのハートを表示してみよう

サンプル

コードの解説

ループを使ってまとめてハートを作ってみます。

ハートの位置は、画面の端から端までのランダムな場所です。Math.rand()という関数を使うことで、ランダムな数を取得することができます。一つ気をつけてほしい箇所があります。0からns.SCREEN_WIDTHまでのランダム値になっていないですね。感覚的には以下のようなコードになりそうです。

しかし、上記のコードだとハートが画面端に見切れて表示されてしまいます。それを防ぐために、ハートの半分サイズ座標を狭めてランダム値を取得しています。

ハートの色を変えてみよう

サンプル

コードの解説

ハートの色もランダムになるようにしてみましょう。

RGBA値で完全にランダムな値にしてしまうと、真っ黒なハートやどす黒いハートばかり出てしまうのでHSLAという表記法を利用しています。HSLAについては特に解説はしませんので、別途調べてみてください。