[お題にTRY] じゃんけんゲーム #Javascript

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

体もしんどくて、睡魔が襲ってきても、難しいプログラムの道筋が見えたら、黙々とやり続けてしまう、下駄です。
 

仕事でやってるプログラムでも、自分より少しレベルが上の処理を敢えて取り込むことで、やりがいとモチベーションを向上させるようにしています。
 

でも、これって自分の首を締めてしまうことの方が多いのですが、結果として、いろいろなスキルアップが高速にできる結果につながることが分かってきました。
 

そんなワケで、本日は「じゃんけんゲーム」のjavascript編です。

本日のIT謎掛け

「フロントエンドエンジニア」と、かけまして、
 

「雑誌の表紙を飾るモデルさん」と、ときます。
 

そのココロは・・・
 

利用者の見た目を華やかにする役割があります。

ブラウザでじゃんけん

下記の3ファイルを同じフォルダ内に保存します。
 

 

 

 

実行

上記ファイルの001.htmlに、ブラウザでアクセスすると、以下のような画面が現れます。
 


 

じゃんけんの出してボタンを押すと、すぐに結果が表示されます。
 


 


 


 

解説

javascript部分の解説をします。
 

まず、外部javascriptがheadタグに書き込まれた場合を想定して、window.onloadで、ページ内のdom構造が読み込まれてから実行を開始するようにしています。
 

onload後に、ajax的に読み込まれない限り、これで正常に動作できるでしょう。
 

初期設定として、3つのボタンがクリックされた時のイベントをセットして、後はfunctionをそれぞれ呼び出す方式です。
 

function構成は、

_button_click : じゃんけんボタンがクリックされた時の処理
_com_spr : コンピュータの出し手(番号)
_my_spr : プレイヤーの出し手(番号)
_check_match : 勝ち、負け、引き分け、の判定
_result2view : 判定結果を元に表示処理
_spr_str : 出し手番号を文字列に変換

 

関数はもう少し細分化することもできそうですが、「必要最低限」というレベルに留めておきました。
 

もう少しこだわりたい人は、ボタンに画像を使ったり、結果の後の表示にcssアニメーションを摘要してもいいかもしれません。
 

こだわりは、作業時間に比例する事も合わせて覚えていかないと、自分の首を締めるだけですからね・・・

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です