投稿2015/05/06 13:41
編集2015/05/06 13:50プログラミング入門で
JavaScriptのじゃんけんゲームをつくっております。
勝ち負けまでは表示できるようになったのですが
得点の加算表示がうまくゆきません。
ここまで下記のように作ってきました。
目標は、じゃんけんに勝つと、
PointCom（コンピュータの得点）、PointMe(自分の得点）が
1点づつ増えて、最後に表示されるようにすることです。
皆さまのお知恵をお借りできませんでしょうか。
どうぞよろしくお願い申し上げます。
回答2件
0
ベストアンサー
こんにちは。
以下でできると思います。
lang
1function display_points() 2{ 3 Point01.innerText = PointCom; 4 Point02.innerText = PointMe; 5}
最後に追加（つまりPointComおよびPointMeを更新したあと）
3.画面ロード時に０対０であることを表示したければ、display_points()を
window.onload の最後にも追加しておく。
以上、ご参考になれば幸いです。
投稿2015/05/06 14:41
総合スコア9058
0
再び、こんにちは。
無事に動いたようで良かったですね！
さて、ちょっとお節介かもしれませんが、以下の点で
リファクタリングさせて頂きました。
(1) プレイヤーが選んだ手に、onclickハンドラを設定するところは
//自分の手グー
//自分の手チョキ
//自分の手パー
というふうに、それぞれ個別に（似かよった）コードで
設定しているので、これを３つまとめて設定する。
(2) コンピュータの手を返す関数 function janken(max) で
要素idが”pc”のテキストを設定するところが、
num の値に応じた３つのif 〜else ifで書かれているが
これも１つのコードにまとめる。
(3)上記の(1)(2)のほか、コードの簡素化のためにJQueryを使う。
(4) ジャンケンの手が、0,1,2 という整数で表現されているところを
後の(6)で決めるように、rock, paper, scissors という
文字列にする。
(5)プレイヤーの選んだ手が何なのか、画面に何らかの方法で示す。
(6) ※これは主観です。
コード全体を通じて、じゃんけんを janken とか、グーを gu みたいに
書くのはややイケてない感を感じてしまう。
wikipedia のじゃんけんを読むと、じゃんけんは英語で、
"Rock-paper-scissors" といい、略してRPSというよう
なので、これらを変数やプロパティの名前や値になるべく使う。
また、グー(rock)、チョキ(scissors)、パー(paper)、それぞれのことを
hand（手）ということにする。
上記の点をふまえて、リファクタしたものが以下です。
（HTMLとJSを分けました。）
9491.html:
lang
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>じゃんけん</title> 6<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 7<script src="9491.js" ></script> 8</head> 9<body> 10 11<header> 12 <h1>じゃんけん</h1> 13</header> 14 15<main> 16 <ul> 17 <li data-rps="rock" class="rps-hand"><span>グー</span></li> 18 <li data-rps="scissors" class="rps-hand"><span>チョキ</span></li> 19 <li data-rps="paper" class="rps-hand"><span>パー</span></li> 20 </ul> 21 <div id="pc">コンピュータの出した手は？</div> 22 <div id="message">ここに表示されます</div> 23 <div id="Point01">コンピュータの得点は：<span id="point_com">0</span></div> 24 <div id="Point02">あなたの得点は：<span id="point_me">0</span></div> 25</main> 26 27</body> 28</html>
9491.js
lang
1$(function() { 2 3 // プレイヤーとコンピューターの勝利数を初期化 4 var PointCom = 0, PointMe = 0; 5 6 // 次のコンピュータの手を返す。 7 function getNextComHand() { 8 9 // ジャンケンの手のオブジェクト配列を定義 10 var rps_hands = [ 11 { value : 'rock', label : 'グー' }, 12 { value : 'paper', label : 'パー' }, 13 { value : 'scissors', label : 'チョキ' } 14 ]; 15 16 // 上記の配列のインデクスとなる整数をランダムに生成 17 var nextHandIndex = Math.floor(Math.random() * rps_hands.length); 18 19 // ランダム生成したインデクスに該当する配列要素を返す。 20 return rps_hands[nextHandIndex]; 21 } 22 23 // ジャンケンの手 a 、 b の勝ち負けを判定 24 // ( a の勝ち： 1、aの負け： -1、引き分け：０、判定不能：NaN） 25 function judgeHands(a, b) { 26 if (a == b) 27 return 0; 28 else if (a == 'rock') 29 return (b == 'scissors' ? 1 : -1); 30 else if (a == 'paper') 31 return (b == 'rock' ? 1 : -1); 32 else if (a == 'scissors') 33 return (b == 'paper' ? 1 : -1); 34 else 35 return NaN; 36 } 37 38 // プレイヤーが選ぶ手の選択肢にクリックハンドラを設定 39 $('li.rps-hand').click(function() { 40 41 //クリックされた手の背景に色をつける。 42 $('span','li.rps-hand').css({backgroundColor: "#FFF"}); 43 $('span', this).css({backgroundColor: "#87ceeb"}); 44 45 // プレイヤーの手 46 var myHandValue = $(this).data('rps'); 47 48 // コンピューターの手 49 var comHand = getNextComHand(); 50 51 // コンピュータの手を表示 52 $("#pc").text( "コンピュータ：" + comHand.label ); 53 54 // 勝ち負けの判定 55 var judge = judgeHands(myHandValue, comHand.value); 56 57 // 判定結果のメッセージを表示 58 var message = ( judge != 0 ? "あなたの" + (judge > 0 ? "勝ち":"負け") + "です。" 59 : (! isNaN(judge) ? "引き分けです":"判定不能" ) ); 60 $("#message").text(message); 61 62 // 勝ち数の更新 63 if ( judge == 1) 64 $('#point_me').text(++ PointMe); 65 else if ( judge == -1) 66 $('#point_com').text(++ PointCom); 67 }); 68});
これがベストというリファクタ案ではありませんし、リファクタする
ポイントや改善案も個人で異なりますので、あくまで一例ということで、
ご参考になれば幸いです。
投稿2015/05/06 17:26
編集2015/05/07 01:25総合スコア9058
あなたの回答
tips
プレビュー
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/05/06 15:06