体もしんどくて、睡魔が襲ってきても、難しいプログラムの道筋が見えたら、黙々とやり続けてしまう、ユゲタです。
仕事でやってるプログラムでも、自分より少しレベルが上の処理を敢えて取り込むことで、やりがいとモチベーションを向上させるようにしています。
でも、これって自分の首を締めてしまうことの方が多いのですが、結果として、いろいろなスキルアップが高速にできる結果につながることが分かってきました。
そんなワケで、本日は「じゃんけんゲーム」のjavascript編です。
本日のIT謎掛け
「フロントエンドエンジニア」と、かけまして・・・
「雑誌の表紙を飾るモデルさん」と、ときます。
そのココロは・・・
利用者の見た目を華やかにする役割があります。
ブラウザでじゃんけん
下記の３ファイルを同じフォルダ内に保存します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>janken</title>
<link rel="stylesheet" href="001.css">
<script src="001.js"></script>
</head>
<body>
<div class="buttons">
<button class="paper">パー</button>
<button class="rock">グー</button>
<button class="sissors">チョキ</button>
</div>
<div class="message">ボタンを押してください。</div>
</body>
</html>
.buttons button{
width:100px;
height:50px;
border:1px solid #ccc;
background-color:#eee;
border-radius:4px;
margin:8px;
color:#666;
cursor:pointer;
outline:none;
}
.buttons button:hover{
color:black;
background-color:#ddd;
font-weight:bold;
}
.message{
width:320px;
margin:8px;
padding:8px;
border:1px solid #ccc;
border-radius:4px;
}
.message .win{
color:red;
}
.message .lose{
color:blue;
}
.message .draw{
color:black;
}
window.onload = function(){
var elm_rock = document.querySelector(".buttons .rock");
elm_rock.addEventListener("click" , _button_click);
var elm_paper = document.querySelector(".buttons .paper");
elm_paper.addEventListener("click" , _button_click);
var elm_sissors = document.querySelector(".buttons .sissors");
elm_sissors.addEventListener("click" , _button_click);
function _button_click(e){
var com_spr = _com_spr();
var my_spr = _my_spr(e.currentTarget);
if(my_spr === null){
alert("Error !!");
return;
}
var result = _check_match(my_spr , com_spr);
_result2view(result , my_spr , com_spr);
}
function _com_spr(){
return Math.floor(Math.random() * Math.floor(3));
}
function _my_spr(elm){
switch(elm.className){
case "rock" : return 0;
case "sissors" : return 1;
case "paper" : return 2;
default : return null;
}
}
function _check_match(my_spr , com_spr){
if(my_spr === com_spr){return "draw";}
else if(my_spr === 0 && com_spr === 1){return "win";}
else if(my_spr === 1 && com_spr === 2){return "win";}
else if(my_spr === 2 && com_spr === 3){return "win";}
else{return "lose";}
}
function _result2view(type , my_spr , com_spr){
var messege_elm = document.querySelector(".message");
messege_elm.innerHTML = "";
messege_elm.innerHTML += "<p>あなたの出した手は、"+ _spr_str(my_spr) +"です。<p>";
messege_elm.innerHTML += "<p>コンピュータの出した手は、"+ _spr_str(com_spr) +"です。<p>";
switch(type){
case "win":
messege_elm.innerHTML += "<p class='win'>あなたの勝ちです。<p>";
break;
case "lose":
messege_elm.innerHTML += "<p class='lose'>あなたの負けです。<p>";
break;
case "draw":
messege_elm.innerHTML += "<p class='draw'>引き分けです。<p>";
break;
}
}
function _spr_str(spr){
switch(spr){
case 0 : return "グー";
case 1 : return "チョキ";
case 2 : return "パー";
}
}
};
実行
上記ファイルの001.htmlに、ブラウザでアクセスすると、以下のような画面が現れます。
じゃんけんの出してボタンを押すと、すぐに結果が表示されます。
解説
javascript部分の解説をします。
まず、外部javascriptがheadタグに書き込まれた場合を想定して、window.onloadで、ページ内のdom構造が読み込まれてから実行を開始するようにしています。
onload後に、ajax的に読み込まれない限り、これで正常に動作できるでしょう。
初期設定として、３つのボタンがクリックされた時のイベントをセットして、後はfunctionをそれぞれ呼び出す方式です。
function構成は、
_button_click : じゃんけんボタンがクリックされた時の処理
_com_spr : コンピュータの出し手（番号）
_my_spr : プレイヤーの出し手（番号）
_check_match : 勝ち、負け、引き分け、の判定
_result2view : 判定結果を元に表示処理
_spr_str : 出し手番号を文字列に変換
関数はもう少し細分化することもできそうですが、「必要最低限」というレベルに留めておきました。
もう少しこだわりたい人は、ボタンに画像を使ったり、結果の後の表示にcssアニメーションを摘要してもいいかもしれません。
こだわりは、作業時間に比例する事も合わせて覚えていかないと、自分の首を締めるだけですからね・・・
