Javascript ジャンケンゲーム その２ 前回作成の修正について
以前のブログで記載のジェンケンゲーム
こちらの処理を簡略化する方法をアドバイス頂きましたので記載します。
内容は
jsファイルにて相手の手の表示とジャンケンの判定結果をそれぞれif文で記載していたのですが、それを一つにまとめられるとのこと
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>ジャンケンゲーム</h1>
<div>相手のて</div>
<h3>（ここに相手の手が表示）</h3>
<br>
<h2>判定は、、</h2>
<br>
<br>
<p>自分の手は下に表示されます</p>
<p id="myHand">（ここに表示されます）</p>
<button id="gu" >グー</button>
<button id="choki" >チョキ</button>
<script src="js/main.js"></script>
</body>
</html>
js
let gu = document.getElementById('gu');
let choki = document.getElementById('choki');
let myHand = document.getElementById('myHand');
let h3 = document.querySelector('h3');
let h2 = document.querySelector('h2');
// グーエリア
gu.addEventListener('click',()=>{
// console.log("gu");
// ーーーーーーーーーー相手の手と判定結果を表示
let enemy = Math.random();
//enemyの値が0.33未満はグー
// 〃 0.33以上0.66未満はチョキ
// 〃 それ以外はパー
//上記内容を取得させる
if(enemy<0.33){
h3.textContent = "グーです";
h2.textContent = "あいこです"
}else if (enemy<0.66){
h3.textContent = "チョキです";
h2.textContent = "勝ちです"
}else{
h3.textContent = "パーです";
h2.textContent = "負けです"
};
// 相手の手と判定結果を表示ここまでーーーーーーー
myHand.textContent = "グーです"
});
// チョキエリア
choki.addEventListener('click',()=>{
// console.log("choki");
// ーーーーーーーーーー相手の手と判定結果を表示
let enemy = Math.random();
if(enemy<0.33){
h3.textContent = "グーです"
h2.textContent = "負けです"
}else if (enemy<0.66){
h3.textContent = "チョキです"
h2.textContent = "あいこです"
}else{
h3.textContent = "パーです"
h2.textContent = "勝ちです"
};
// 相手の手と判定結果を表示ここまでーーーーーーー
myHand.textContent = "チョキです"
});
// パーエリア
// console.log("pa");
// ーーーーーーーーーー相手の手と判定結果を表示
let enemy = Math.random();
if(enemy<0.33){
h3.textContent = "グーです"
h2.textContent = "勝ちです"
}else if (enemy<0.66){
h3.textContent = "チョキです"
h2.textContent = "負けです"
}else{
h3.textContent = "パーです"
h2.textContent = "あいこです"
};
// 相手の手と判定結果を表示ここまでーーーーーーー
myHand.textContent = "パーです"
});
修正箇所は各手（グー、チョキ、パー）の
// ーーーーーーーーーー相手の手と判定結果を表示
let enemy = Math.random();
//enemyの値が0.33未満はグー
// 〃 0.33以上0.66未満はチョキ
// 〃 それ以外はパー
//上記内容を取得させる
if(enemy<0.33){
h3.textContent = "グーです";
h2.textContent = "あいこです"
}else if (enemy<0.66){
h3.textContent = "チョキです";
h2.textContent = "勝ちです"
}else{
h3.textContent = "パーです";
h2.textContent = "負けです"
};
// 相手の手と判定結果を表示ここまでーーーーーーー
この部分
以前は
// ーーーーーーーーーー相手の手を表示
let enemy = Math.random();
//enemyの値が0.33未満はグー
// 〃 0.33以上0.66未満はチョキ
// 〃 それ以外はパー
//上記内容を取得させる
if(enemy<0.33){
h3.textContent = "グーです";
}else if (enemy<0.66){
h3.textContent = "チョキです";
}else{
h3.textContent = "パーです";
};
// 相手の手を表示ここまでーーーーーーー
myHand.textContent = "グーです"
// 判定エリア--------------
if(enemy<0.33){
っz}else if(enemy<0.66){
h2.textContent = "勝ちです"
}else{
h2.textContent = "負けです"
};
// -------------------判定エリアここまで
こうして２度if文を書いていた
アドバイス有難うございました！
