Javascript 初めてのゲーム制作 ジャンケンゲーム ついに完成！
ドットインストールのおみくじゲームをベースに作成しました。
cssなしのジャンケンゲーム
コードは以下
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 = "グーです";
}else if (enemy<0.66){
h3.textContent = "チョキです";
}else{
h3.textContent = "パーです";
};
// 相手の手を表示ここまでーーーーーーー
myHand.textContent = "グーです"
// 判定エリア--------------
if(enemy<0.33){
h2.textContent = "あいこです"
}else if(enemy<0.66){
h2.textContent = "勝ちです"
}else{
h2.textContent = "負けです"
};
// -------------------判定エリアここまで
});
// チョキエリア
choki.addEventListener('click',()=>{
// console.log("choki");
// ーーーーーーーーーー相手の手を表示
let enemy = Math.random();
if(enemy<0.33){
h3.textContent = "グーです"
}else if (enemy<0.66){
h3.textContent = "チョキです"
}else{
h3.textContent = "パーです"
};
// 相手の手を表示ここまでーーーーーーー
myHand.textContent = "チョキです"
// 判定エリア--------------
if(enemy<0.33){
h2.textContent = "負けです"
}else if(enemy<0.66){
h2.textContent = "あいこです"
}else{
h2.textContent = "勝ちです"
};
// -------------------判定エリアここまで
});
// パーエリア
// console.log("pa");
// ーーーーーーーーーー相手の手を表示
let enemy = Math.random();
if(enemy<0.33){
h3.textContent = "グーです"
}else if (enemy<0.66){
h3.textContent = "チョキです"
}else{
h3.textContent = "パーです"
};
// 相手の手を表示ここまでーーーーーーー
myHand.textContent = "パーです"
// 判定エリア--------------
if(enemy<0.33){
h2.textContent = "勝ちです"
}else if(enemy<0.66){
h2.textContent = "負けです"
}else{
h2.textContent = "あいこです"
};
// -------------------判定エリアここまで
});
見ての通り、jsはコードがグー、チョキ、パーで重複している
変数定義の上の部分でlet enemyを定義するとゲームで相手の手がクリックしても一回しか変化しないというバグが出てしまい、泣く泣く３回各ブロックで記入をしている。
もっときれいに配列を組んだりしてやれるようになりたい
続く
