数字をクリックするミニゲーム – BREAK PANEL
前回のBREAK 25 PANELはHTMLのDOMを操作して制作しました。
今回のバージョンはHTML5から登場したcanvas要素を操作して制作しています。
あと動きを少しリッチにしたり、難易度設定を出来るようにしてあります。
ゲームプレイ
COUNTER:
MOVE X: Y:
CLICK X: Y:
FPS:
遊び方
1~25までの数字を、小さい数字から順にクリックしてその速さを競うミニゲームです。
- ゲームの始め方
- 「PUSH START」をクリックする事でゲームが始まり、画面上のカウントが進み出します。
- ゲームの流れ
-
ゲームがスタートすると、1~25までの数字のパネルがランダムに配置されます。そのパネルを1から順に1・2・3・・・と順番にクリックして行きます。
そして最後に25のパネルをクリックした時点でゲームクリアと同時にタイマーが止まります。 - 最初からやり直す
- 「RESET」をクリックする事により、タイトル画面に戻る事が出来ます。ゲームを進めている途中でも「RESET」をクリックする事が出来ます。
- ステージセレクト設定
-
タイトル画面で右上の「STAGE SELECT」をクリックするとステージセレクト設定画面に移動します。
基本ステージは5×5の25枚のパネルですが、このステージセレクト設定画面で、1×1〜10×10まで選択する事ができます。
またそれぞれのステージに制限時間が設けてあります。
- ゲーム画面が広すぎる場合は…
-
お使いのモニタ環境によっては、ゲーム画面が全て収まらない場合もあるかもしれません。
そんな時は、ブラウザの横幅を縮めてください。
ブラウザの横幅に応じてゲーム画面も縮小されます。
Release
update:2016/5/3 … ver.1.0.0
Advertising
最近の記事
- メディアクエリを使わずにcss1行だけでフォントサイズをレスポンシブ対応にする方法【CSS】
- 縦書きで中央寄せにしたかったので3パターン試してみた【CSS】
- Classを付けるだけで要素が画面上までスクロールした時に要素を動かすJavascriptライブラリ【ScrollEffect.js】
- スマホの検索バーの表示・非表示でもリサイズ判定されるので対処してみた。
- 数字をクリックするミニゲーム – BREAK PANEL
- WordPressの.htaccessについて-特定のURLだけhttpsに飛ばしたりhttpに飛ばしたり
- PHPで画面サイズを判断して分岐したかったので、Jsで取得した画面の横幅を、sessionに入れてみた。
- YouTubeの動画をレスポンシブに対応させて貼り付けて見ました。
- 三角関数を使って要素を円状に動かしてみる【Javascript】
- SNS系のボタンを追加してみる。【Facebook/twitter/Google+1/はてなブックマーク/Poket】
アーカイブ
Advertising
Advertising
カレンダー
日 | 月 | 火 | 水 | 木 | 金 | 土 |
---|---|---|---|---|---|---|
« 10月 | ||||||
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
コメントを残す