試合のシミュレーションゲームを作成します。
HTMLファイル内に以下のコードを記述します。
柔道試合
対戦相手を選んで、試合を開始してください。
次に、JavaScriptを記述します。以下のコードを
タグ内に記述します。
const player1 = {
name: "相手1",
score: 0,
ippon: 0,
wazaari: 0,
yuko: 0
}
const player2 = {
name: "相手2",
score: 0,
ippon: 0,
wazaari: 0,
yuko: 0
}
const player1Btn = document.getElementById("player1-btn");
const player2Btn = document.getElementById("player2-btn");
const player1Score = document.getElementById("player1-score");
const player2Score = document.getElementById("player2-score");
player1Btn.addEventListener("click", () => {
playGame(player1, player2);
});
player2Btn.addEventListener("click", () => {
playGame(player2, player1);
});
function playGame(attacker, defender) {
const score = Math.floor(Math.random() * 3); // 0〜2の乱数を生成
switch(score) {
case 0:
console.log("yuko!");
attacker.score += 1;
attacker.yuko += 1;
break;
case 1:
console.log("wazaari!");
attacker.score += 2;
attacker.wazaari += 1;
break;
case 2:
console.log("ippon!");
attacker.score += 5;
attacker.ippon += 1;
break;
}
updateScoreboard();
if (attacker.score >= 10) {
alertHisa(`${attacker.name}が勝利しました！`);
resetGame();
}
else if (defender.score >= 10) {
alertHisa(`${defender.name}が勝利しました！`);
resetGame();
}
}
function updateScoreboard() {
player1Score.innerHTML = player1.score;
player2Score.innerHTML = player2.score;
}
function resetGame() {
player1.score = 0;
player1.ippon = 0;
player1.wazaari = 0;
player1.yuko = 0;
player2.score = 0;
player2.ippon = 0;
player2.wazaari = 0;
player2.yuko = 0;
updateScoreboard();
}
ゲームのルールは以下の通りです。
・対戦相手を選ぶ
・ランダムに得点（0〜2）が決まり、攻撃側にその得点が加算される
・攻撃側が10点に達したら勝利
「yuko」は1点、「wazaari」は2点、「ippon」は5点に相当します。
試合の流れは以下のようになります。
1. まず、対戦相手を選びます。
2. 「戦う」ボタンをクリックすると、ランダムに得点が決まって攻撃側に加算されます。
3. スコアボードが更新されます。
4. 攻撃側のスコアが10点以上になった場合、攻撃側の勝利となります。
5. 相手側のスコアが10点以上になった場合、相手側の勝利となります。
6. 再度対戦する場合は、「戦う」ボタンをクリックする前にリセットボタンを押してください。
以上が柔道試合のシミュレーションゲームの作成方法です。スマートフォンでも遊べるように、ボタンサイズやフォントサイズを調節するなど、デザインも工夫してください。
1486
Prev
Script
Back
0
0