Мне нужно сделать Рок, Ножницы для бумаги для информатики, но мне нужно добавить ящерицу и спок

Question

привет и спасибо за потраченное время, так что для моего класса мне нужно, чтобы ящерица RPS спокала, и я дошел до того, чтобы заставить работать базовую каменную бумагу и ножницы, но я не могу добавить ящерицу и спокаправильный вариант

Я сделал базовую игру в JS, и она отлично работает. Недавно я добавил значки ящерицы и спока и попытался добавить к ним функции, но безрезультатно, но безрезультатно

function userRock(){

    if (computerChoice === choices[0]){
        document.getElementById('message').innerHTML = 'Draw';
    }

    if (computerChoice === choices[1]){
        losses++;
        document.getElementById('losses').innerHTML = losses;
        document.getElementById('message').innerHTML = 'AI picked paper you lose';
    }

    if (computerChoice === choices[2]){
        document.getElementById('rock').setAttribute('class', 'wins');
        wins++
        document.getElementById('wins').innerHTML = 'wins';
        document.getElementById('message').innerHTML = 'AI picked scissor you win';
    }
    goComputer();
}

Вот CodePen: https://codepen.io/axelnijsten/pen/rNNLjaL

Я ожидаю, что ящерица и спок будут работать правильно только с javascript

Answer 1

в целом это выглядит хорошо. Здесь вы можете применить некоторые общие принципы программирования:

Один принцип - СУХОЙ (не повторяйте себя), который вы можете использовать для document.getElementById(id).innerHTML, который вы используете в нескольких местах. Вы должны создать отдельную функцию, которая делает это: setInnerHTMLById(id, message). Это делает ваши строки короче, легче для чтения и удобнее в обслуживании.

Другое дело, как вы используете ваше утверждение if: компьютер может сделать только один выбор, поэтому вместо использования операторов 3 if,рассмотрите возможность использования операторов if и else if или switch (особенно, если вы хотите добавить ящерицу и спок). Это делает ваш код быстрее, потому что ему не придется проверять не лишние «f s (e.g. when the first, если» утверждение уже было верно, оно не будет проверять второе и третье)

с оператором switch, реализующим новые варианты выборабудет кусок пирога

Answer 2

Я немного изменил ваш код. Сейчас вызывается только одна функция, но у нее есть параметр, который соответствует вашему массиву выборов.

let choices = ['Rock', 'Paper', 'Scissor', 'Lizard', 'Spock'];
                 0        1         2         3         4

Теперь разметка выглядит следующим образом

<div class="main" id="rock" onclick="action(0)">
    <i class="fas fa-hand-rock"></i>
    <h3> Rock </h3>
</div>

<div class="main" id="paper" onclick="action(1)">
    <i class="fas fa-hand-paper"></i>
    <h3> Paper </h3>
</div>

<div class="main" id="scissor" onclick="action(2)">
    <i class="fas fa-hand-scissors"></i>
    <h3> Scissor </h3>
</div>

<div class="main" id="lizard" onclick="action(3)">
    <i class="fas fa-hand-lizard"></i>
    <h3> Lizard </h3>
</div>

<div class="main" id="spock" onclick="action(4)">
    <i class="fas fa-hand-spock"></i>
    <h3> Spock </h3>
</div>  

Если пользователь выбирает параметр, который мы выполняемигровая логика

const choices = ['Rock', 'Paper', 'Scissor', 'Lizard', 'Spock'];
let wins = 0;
let losses = 0;

//adds scores
document.getElementById('wins').innerHTML = wins;
document.getElementById('losses').innerHTML = losses;

//makes the AI pick Rock Paper or Scissor
function goComputer () {     
    return Math.floor(Math.random() * choices.length);
}

function action(playerChoice) {
    // get computer choice as a number
    const computerChoice = goComputer();

    // check who won
    // draw 
    if (computerChoice === playerChoice) {
        document.getElementById('message').innerHTML = 'Draw';
    }
    // Rock
    if (computerChoice === 0 && (playerChoice === 2 || playerChoice == 3)) {
        playerLooses(computerChoice);
    } else if (playerChoice === 0 && (computerChoice === 2 || computerChoice == 3)) {
        // dry win action
        playerWins(playerChoice, computerChoice);
    }
    // paper 
    if (computerChoice === 1 && (playerChoice === 0 || playerChoice == 4)) {
        // dry loose action
        playerLooses(computerChoice);
    } else if (playerChoice === 1 && (computerChoice === 0 || computerChoice == 4)){
        playerWins(playerChoice, computerChoice);
    }
    // scissor
    if (computerChoice === 2 && (playerChoice === 1 || playerChoice == 3)) {
        playerLooses(computerChoice);
    } else if (playerChoice === 2 && (computerChoice === 1 || computerChoice == 3)) {
        playerWins(playerChoice, computerChoice);
    }
    // lizzard
    if (computerChoice === 3 && (playerChoice === 1 || playerChoice == 4)) {
        playerLooses(computerChoice);
    } else if (playerChoice === 3 && (computerChoice === 1 || computerChoice == 4)) {
        playerWins(playerChoice, computerChoice);
    }  
    //spock
    if (computerChoice === 4 && (playerChoice === 2 || playerChoice == 0)) {
        playerLooses(computerChoice);
    } else if (playerChoice === 4 && (computerChoice === 2 || computerChoice == 0)) {
        playerWins(playerChoice, computerChoice);
    }        
}

function playerLooses(computerChoice) {
    losses++;
    document.getElementById('losses').innerHTML = losses;
    document.getElementById('message').innerHTML = `AI picked ${choices[computerChoice]} you lose`;
}

function playerWins(playerChoice, computerChoice) {
    wins++;
    document.getElementById(choices[playerChoice].toLowerCase()).setAttribute('class', 'wins');
    document.getElementById('wins').innerHTML = wins;
    document.getElementById('message').innerHTML = `AI picked ${choices[computerChoice]} you win`;
}

Мы по-прежнему используем массив для получения нужного элемента и вывода текста.

Answer 3

Чтобы сделать его намного короче, сделайте что-то вроде этого .. как именно это соответствует так называемой Ящерице, я не знаю !? Но если Ящерица побита камнем, но бьет ножницами, просто добавьте его в качестве четвертого элемента в выборе.

//give AI choices
let choices = ['Rock', 'Paper', 'Scissor'];
let computerChoice;
let wins = 0;
let losses = 0;

//adds scores
document.getElementById('wins').innerHTML = wins;
document.getElementById('losses').innerHTML = losses;

//makes the AI pick Rock Paper or Scissor

function goComputer () {
    computerChoice = Math.floor(Math.random() * choices.length);
    console.log(computerChoice);
    return computerChoice;
}

function userAction(userChoice) //0..n-1 (choices must be in order that idxN is always beaten by idxN+1, unless n is the length-1 then its beaten by idx0)
{
    //calling AI to make a move
    const computerChoice = goComputer();

    if (computerChoice === userChoice){
        document.getElementById('message').innerHTML = 'Draw';
    }
    else if (userChoice === choices.length-1 && computerChoice === 0 || userChoice !== choices.length-1 && computerChoice > userChoice)
    {
        losses++;
        document.getElementById('losses').innerHTML = losses;
        document.getElementById('message').innerHTML = 'AI picked '+choices[computerChoice]+' you lose';
    }
    else
    {
        document.getElementById('rock').setAttribute('class', 'wins');
        wins++
        document.getElementById('wins').innerHTML = wins;
        document.getElementById('message').innerHTML = 'AI picked '+choices[computerChoice]+' you win';
    }
}