JavaScriptでチノちゃんのジャンケンゲームを作りました。 ~ ご注文はあいこですか? ~

ご注文はうさぎですか? チノとティッピー 20180123-chino_s.jpg

 次のご注文は「ティッピーのラテアート占い」ですか? 





チノちゃんのジャンケンゲーム。


 2015年秋アニメで放映された「ご注文はうさぎですか?」2期において、エンディング曲終了後にチマメ隊ことチノちゃん・マヤちゃん・メグちゃんが、視聴者に向けてジャンケンをするご褒美シーンがありました。

 それをネタ元にして「チノちゃんのジャンケンゲーム」を構想するも、それから2年あまりほったらかしにしておりましたが、この度ついに完成の日を迎えることができました。

 2~3日ほど前からブログ右カラムトップに配置しておりましたので、既にお気づきの方もいたかもしれません。
 また運悪く僕のデバック最中にアクセスし、ボタンをクリックしてもジャンケンが始まらないとか、出し手に関わらず必ずチノちゃんが勝ち名乗りをあげてしまうとか…その他諸々の憂き目に遭遇してしまった方はご愁傷様でした。

 ひとまずココに少し大きめの「チノちゃんのジャンケンゲーム」をご用意いたしましたので、時間の余裕がございましたら、しばし遊んでいっていただけると嬉しいです。


チノちゃんの手: なにかな?
結果: どうなるかな?
あなたの手:




HTML+JavaScirptコードの紹介。


HTML部分


<div align="center"><div id="janken_message1">チノちゃんの手: なにかな?</div>

<img id="janken_gazo" src="待機画面画像URL" width="200" height="167" border="0" alt="">

<div id="janken_message2">結果: どうなるかな?</div>
<div style="line-height: 0.5em"><br/></div>
<form>あなたの手:
<select id="janken_select" style="border:1px solid #cccccc;">
<option>ぐー</option>
<option>ちょき</option>
<option>ぱー</option>
</select>
<div style="line-height: 1em"><br/></div>
<input type="button" id="janken_button" value=" この手で勝負 " onclick="StartJankenGame()" style="font-size:12pt;background:ButtonFace;" onMouseOver="this.style.background='#CCCCFF'" onMouseOut="this.style.background='ButtonFace'" />
</form></div>


JavaScript部分


<script type="text/javascript">
// グローバル変数宣言
var janken_cnt = 0;
var janken_id = null ;
var janken_cpunum

//====== 1秒間インターバルタイマー起動ルーチン ======
function StartJankenGame() {
if(janken_id == null){ // まだタイマー起動していない時のみ有効
document.getElementById("janken_message1").innerHTML = "チノちゃんの手: なにかな?";
document.getElementById("janken_message2").innerHTML = "結果: どうなるかな?";

// ボタンとセレクトボックスの操作を禁止
document.getElementById("janken_button").disabled = "disabled"
document.getElementById("janken_select").disabled = "disabled"

// 1秒間インターバルタイマーをセット
janken_id = setInterval(function(){myJankenGame();}, 1000);

janken_cnt = 0; // ジャンケン処理工程カウンタをリセット
}
}


//====== ジャンケン処理ルーチン ======
// (インターバルタイマーによって1秒毎に呼ばれる)
function myJankenGame() {
var cpuhand;
var judge_txt;
var judge_img;
var janken_img = new Array();
var cpu_img = new Array();

// ジャンケン中の画像設定
janken_img[0] = "ジャンケン画像No.1URL";
janken_img[1] = "ジャンケン画像No.2URL";
janken_img[2] = "ジャンケン画像No.3URL";
janken_img[3] = "ジャンケン画像No.4URL";
janken_img[4] = "ジャンケン画像No.5URL";
janken_img[5] = "ジャンケン画像No.6URL";

// チノちゃんの出し手の画像設定
cpu_img[0] = "グー画像URL";
cpu_img[1] = "チョキ画像URL";
cpu_img[2] = "パー画像URL";

// 判定結果ごとのチノちゃんの画像設定
var win_img = "自分が勝った時の画像URL";
var draw_img = "あいこの時の画像URL";
var lose_img = "自分が負けた時の画像URL";

// セレクトボックスからユーザーの出し手を取得
var myte = document.getElementById("janken_select").selectedIndex;

if (janken_cnt < 6){ // ジャンケンぽんまでの画像表示処理
document.getElementById("janken_gazo").src = janken_img[janken_cnt];
}
else if (janken_cnt == 6){ // チノちゃんの出し手設定処理
janken_cpunum = Math.floor(Math.random() * 3); // 0~2の乱数を作る
// 乱数値に応じてチノちゃんの出し手を割り当てる
if(janken_cpunum == 0) {
cpuhand = "ぐー";
} else if(janken_cpunum == 1) {
cpuhand = "ちょき";
} else {
cpuhand = "ぱー";
}
// 出し手に応じてテキストと表示画像を設定
document.getElementById("janken_gazo").src = cpu_img[janken_cpunum ];
document.getElementById("janken_message1").innerHTML = "チノちゃんの手: " + cpuhand;
}
else if (janken_cnt > 7){ // じゃんけん勝負結果判定処理
if ((myte == 0 && janken_cpunum == 1) || (myte == 1 && janken_cpunum == 2) || (myte == 2 && janken_cpunum == 0)){
judge_txt = "あなたの勝ち";
judge_img = win_img ;
} else if(myte == janken_cpunum) {
judge_txt = "ひきわけ";
judge_img = draw_img ;
} else {
judge_txt = "あなたの負け";
judge_img = lose_img ;
}
// 判定結果に応じてテキストと表示画像を設定
document.getElementById("janken_message2").innerHTML = "結果: " + judge_txt;
document.getElementById("janken_gazo").src = judge_img ;

clearInterval(janken_id); // インターバルタイマーをリセット
janken_id = null; // タイマーID値をクリア

// ボタンとセレクトボックスの操作を有効にする
document.getElementById("janken_button").disabled = "";
document.getElementById("janken_button").style.background = 'ButtonFace';
document.getElementById("janken_select").disabled = "";
}
janken_cnt++; // ジャンケン処理工程を進める
}
</script>

 黄色マーキング部分は画像URLを設定、また必要に応じて変更してください。


簡単にコードの説明を。


(1)HTML部分で画面構成や待機中に表示される画面の設定を行っています。
 またボタンがクリックされたら、JavaScirpt関数のStartJankenGame()を呼び出すようにしています。

(2)続くJavaScirptコードで、ボタンがクリックされた後のジャンケン処理を行っています。

(3)ボタンがクリックされると呼び出されるStartJankenGame()では、1秒間隔でmyJankenGame()が呼び出されるように設定しています。

(4)myJankenGame()では、呼び出される毎に+1ずつ加算されるカウンタjanken_cntの値に応じて、順番に画像表示を行ったり、乱数によるチノちゃんの出し手の設定や、じゃんけん結果判定などの処理を行っています。


アルゴリズムを組み立てることができれば・・・


 以前はJavaScriptなんてものは訳わからないものだと思っていたんですが、それは初めっから諦めていただけで、これもプログラム言語の一種ですから、ちゃんと理解していこうとすればなんとかなるように思えてきました。

 さすがにコード圧縮などによって最適化されてしまっていると厳しいものがありますが・・・

 今回のようにWeb技術との関連性が深くないものについては、アルゴリズムの組み立て方さえ理解できていれば他言語とは方言的な違いぐらいしかなく、ネットで紹介されているTipsなどを参考にすることで、そこそこのものは組めるような気がします。

 ただ個人的には変数など型宣言の曖昧さにちょっと危うさを感じており、ここらへんがブラウザやホスト環境によってJavaScriptが動かなかったりする問題を生み出していたりするんじゃないか?と想像してしまいます。


今日のアイキャッチ画像は。


 「ご注文はうさぎですか?」から、ラビットハウスの看板娘チノちゃんです。


TVアニメ「ご注文はうさぎですか??」公式サイト

喫茶ラビットハウスにやってきたココア。実は、そこが彼女が住み込むことになっていた喫茶店で…。お店で出会う女の子たちも、クールでちっちゃいチノ、軍人気質なリゼ、おっとり和風な千夜、気品あふれる庶民派シャロと全方位からかわいさと笑いが炸裂!


 ジャンケンの結果に応じたチノちゃんの画像を用意するのに、2期をざっと早送りで見直したりしたのですが、やはり何度見ても素晴らしい作品であることをあらためて実感します。

 いくら今期冬アニメに良作が多いとは言っても、このレベルの作品を観てしまうと、いやがおうにも歴然としたその差を感じてしまいます。

 とはいえ、過去作品に依存していては新しい作品との出会いの機会も少なくなってしまうわけで、適度に名作を懐かしみつつ新アニメの萌え所を探していきたいと思ってます。

スポンサーサイト



Javascriptご注文はうさぎですか?チノ

2 Comments

mochi  

僕はチノちゃんになかなか勝てません・・・ (ノд・。) グスン

こんにちは。よつばさん。

> じゃんけんゲーム完成ヽ(〃'▽'〃)ノ☆゚'・:*☆オメデトォ♪

 ありがとうございます。
 ボタン連続クリックで無限にじゃんけんを繰り返してしまう対策に少々手間取りましたが、なんとかそれらしいものが出来上がりました。 ヾ(〃^∇^)ノわぁい♪

> じゃんけんゲームしてみた~(*^-^*)チノちゃんに勝ったよ~♪

 僕はなぜか3回に1回ぐらいしか勝てません。
 出し手はランダムなはずなんですけど・・・
 もしかしたらいつの間にかAIを組み込んでしまったのかもしれません。 ヾ(・・ )ォィォィ
 負けてもチノちゃんの笑顔が見れるので、それはそれでいいんですけどね。 (*'-')b OK!

 次はもう少し凝ったものに挑戦してみたいと思ってます。
 いつもコメントありがとうございます!! (゚▽゚*)ニパッ♪

2018/01/28 (Sun) 14:20 |  REPLY |   

よつば  

mochiさん こんにちは♪

じゃんけんゲーム完成ヽ(〃'▽'〃)ノ☆゚'・:*☆オメデトォ♪
サイドバーに貼ってあって、完成したんだ!って見てたけど
やっぱりmochiさんってスゴイね~!

じゃんけんゲームしてみた~(*^-^*)チノちゃんに勝ったよ~♪

2018/01/28 (Sun) 13:31 | EDIT |  REPLY |   

Post a comment