次のようなゲームプログラムを作成してください。 - 次の要件を守ってください。 - プログラミング言語はJavaScriptを使用し、1つのHTMLファイルとして作成してください。 - 画像は使用せず、文字とCSSのみで実現してください。 - 画面内に縦600ピクセル、横800ピクセルのHTML5 Canvasを作成し、その中に画面を表示してください。 - ゲームの内容 - ステージ - 画面上側縦400ピクセルと下側縦200ピクセルの間に茶色でー(文字コードはU+30FC)を横に800ピクセル並べて分断してください。 - 画面上側縦400ピクセルを第一ステージ、下側縦200ピクセルを第二ステージとします。 - 十二支 - 十二支は12種類に分けてそれぞれ名称をネズミ,ウシ,トラ,ウサギ,リュウ,ヘビ,ウマ,ヒツジ,サル,トリ,イヌ,イノシシとします。 - 十二支はそれぞれ黒色でUnicodeの漢字で表現してください。 - 漢字を割り当てます。ネズミは子(文字コードはU+5B50),ウシは丑(文字コードはU+4E11),トラは寅(文字コードはU+5BC5),ウサギは卯(文字コードはU+536F),リュウは辰(文字コードはU+8FB0),ヘビは巳(文字コードはU+5DF3),ウマは午(文字コードはU+5348),ヒツジは未(文字コードはU+672A),サルは申(文字コードはU+7533),トリは酉(文字コードはU+9149),イヌは戌(文字コードはU+620C),イノシシは亥(文字コードはU+4EA5)を使って表示してください。十二支の動く速度を乗算しないようにしてください。 - それぞれのサイズを縦40ピクセル、横40ピクセルにしてください。 - 最初の一回、画面を左クリックしたら以降全ての十二支を0.1秒ごとにそれぞれ上,下,左,右,右上.右下,左上,左下の中からランダムな別の方向に10ピクセル動くようにしてください。 - 動いた後もう2回動くまではその逆の方向には動かないようにしてください。ただし、第一ステージの端に触れた場合は逆の方向に動くことを許可します。 - 十二支の動き方をスムーズにしてください。 - 十二支をドラッグ以外で第一ステージから出ないようにしてください。 - 初期位置を第一ステージの縦中央にネズミ,ウシ,トラ,ウサギ,リュウ,ヘビ,ウマ,ヒツジ,サル,トリ,イヌ,イノシシの順番で間隔を横26ピクセル空けて並べてください。 - 台座 - 第二ステージは十二支を集める所にします。 - 台座は黒色でUnicodeの幾何学模様文字(文字コードはU+25CB)で表現してください。 - 台座を第二ステージの縦中央に間隔を横15ピクセル空けて12個第二ステージから出ないように並べてください。 - 台座のサイズを縦50ピクセル、横50ピクセルにしてください。 - タイマー - 第一ステージの右上に数字の120を表示してください。これをタイマーとします。 - 1秒毎にタイマーの数字を1ずつ減らしてください。 = タイマーの数字は0まで減らしたら止めてください。 - 回答ボタン - 第二ステージ右下に台座と重ならないように青色で縦50ピクセル、横200ピクセルの長方形のボタンを設置してください。 - 回答ボタンに文章[回答する]を重ねて上に記載してください。 - ゲームシステム - 十二支をクリックしたままドラッグするとマウスに沿って動かせるようにしてください。 - 十二支をドロップしたら第一ステージ上なら[十二支]の通りに動かしてください。第二ステージ上ならドロップした十二支のみランダムで動くのを止めてください。 - ドラッグ中の十二支は第一ステージから出られるようにしてください。 - ゲームルール - 台座の上にそれぞれ十二支を一匹ずつ乗せて、回答ボタンを左クリック時に左の台座からネズミ,ウシ,トラ,ウサギ,リュウ,ヘビ,ウマ,ヒツジ,サル,トリ,イヌ,イノシシの順番になっていたらゲームクリアになります。 - 台座の上に十二支が縦2ピクセル、横2ピクセル以上重なっていたら台座の上に乗っているとします。 - 台座の上に乗る十二支は1つまでとします。 - 回答ボタンを左クリック時にゲームクリアの条件に合っている台座を赤色に、条件に合っていない台座を黒色に変更してください。 - ゲームクリアになったら第一ステージに黄色い文字で大きくゲームクリアと表示してすべての動作を停止させてください。 = タイマーの数字が0になったら第一ステージに赤色の文字で大きくゲームオーバーと表示してすべての動作を停止させてください。 最後に、作成したファイルをダウンロード可能にしてください。