今まで培ってきたHTML, CSS,そしてJavaScriptの知識を最大限生かし,簡単なじゃんけんゲームアプリを作ってみましょう。
日本人なら「じゃんけん」を知らない人はいないと思いますが,一応ルールを整理しておきましょう。
今回のじゃんけんゲームの仕様は次のようになります。
作成手順としては,まず上記の仕様を満足するテキスト表記のじゃんけんアプリを作り,それを改良してじゃんけんの手や勝敗を画像で示すようにします。
テキスト表記の,もっとも原始的な機能のみを持つアプリの完成画面は下記のようになればいいでしょう。
では今までと同様に,cordovaでjanken
プロジェクトを新規に生成し,janken
フォルダ以下のwww/index.html
を次のように書き換えます。BootstrapのCSSファイルも適切な位置にコピーしておいて下さい。
ここではbutton_janken
クラス指定された3つのボタンをすべてコンソールに表示しています。「グー」が配列の0番目要素,「チョキ」が1番目要素,「パー」が2番目の要素に入っていることが確認できます。
button_janken
クラス指定のボタン次に,全てのボタンのクリックイベントを定義します。
全てのボタンのクリックイベントに,アプリ側の手を規定する記述を追加します。この際,rand関数を新たに定義して利用しています。
最後に,勝負の自動判定を行う部分を追記します。
グラフィック版は,じゃんけんの手や勝負判定結果を画像で表記します。基本的な処理はテキスト版そのままで,自分と相手の手と勝負の判定結果の部分のみ,画像を使って置き換えます。画像素材は
にまとめておきましたので,ダウンロードして解凍し,画像ファイルをプロジェクトページのwww/img/
フォルダに置いて下さい。下記の7つの画像素材が入っていますので確認して下さい。
gu.jpg
choki.jpg
pa.jpg
vs.png
you_win.png
you_lose.png
even.png
一例として,下記のようにJavaScriptを書き換えると,手の画像や勝負結果を画像で表記できるようになります。
あまり格好よくはありませんが,一応,画像表記ができていることがわかります。
以上,ごく簡単にじゃんけんゲームを作ってきましたが,デザイン的にはまだまだ改善の余地がありますし,何より勝敗の履歴が残らないという機能的欠点もあり,世間並みのアプリにはなっていません。そこで,次のような改善を施して下さい。