Игра Rock Paper Scissors с javacript

Question

Я недавно увлекся программированием на JavaScript и решил создать игру, чтобы проверить свои знания. Ничего не происходит, когда я нажимаю на объекты, которые должны запустить игру, и когда я посылаю информацию через консоль, (в большинстве случаев) ничего не происходит.

const paper = document.getElementById('paper');
const scissor = document.getElementById('scissor');
const result_in = document.getElementById("result")
let computer;
let computer_pick;
let result;

//Player choice
rock.onclick = play('rock');
paper.onclick = play('paper');
scissor.onclick = play('scissor');

function play(userinput) {    
    computer_pick = Math.floor(Math.random() * 3); 
    console.log(computer_pick);
    if (computer_pick === 0) { 
        computer = 'rock'
    } else if (computer_pick === 1) {
        computer = 'paper';
    } else if (computer_pick === 2) {
        computer = 'scissor';
    } else { console.log('error') };
    console.log(computer); 
    //
    if (computer == userinput) { //tie
        result = 'tie';
    } else if (computer == 'rock' && userinput == 'paper' || computer == 'paper' && userinput == 'scissor' || computer == 'scissor' && userinput == "rock") {
        console.log(win);
        result = 'win';
    } else if (computer == 'rock' && userinput == 'scissor' || computer == 'paper' && userinput == 'scissor' || computer == 'scissor' && userinput == 'paper') {
        console.log(loss);
        result = 'lost';
    }
//output
    document.getElementById('result').innerHTML = You ${result}! The computer threw ${computer}.;
}

Answer 1

Вы ждете, пока загрузится DOM?

Где вы вводите этот файл в DOM? в теге head или теге body!

Если вы внедрите этот код в тег head, вам нужно подождать, пока DOM не загрузится

примерно так:

window.onload = function() {
  // Your script
}

Answer 2

попробуйте < button onClick=play('rock')> и т. Д.

и вам нужно "" для строки document.getElementById('result').innerHTML = " "

Answer 3

В вашем коде есть некоторые ошибки:

1. rock.onclick неверно - rock.addEventlistener('click', function(e) {}) правильно

2. console.log(win)(или потеря) неверна - вы пытаетесь console.log() переменную, которая не существует, - чтобы вывести строку в console.log(), вы должны поместить ее в кавычки console.log('win')

3. document.getElementById('result').innerHTML = You ${result}! The computer threw ${computer}.; не правильно - вы должны использовать обратные галочки для интерполяции строк

4. Вы не определили rock, как вы сделали paper и scissor

5. Это не ошибка кодирования, а простая логическая проблема: у вас есть три результата АЛЬТЕРНАТИВЫ: ничья , победа , проигрыш . Если это не ничья и у пользователя нет побед (побед), то пользователь проиграл . Вам не нужны последние else if, только else

6. То же самое верно для переменной computer_pick - нет места для ошибки (случайноезначение может быть только 0, 1 или 2), поэтому вам не нужно else для ошибка . И если computer_pick не равно 0 или 1, то оно должно быть 2 (нет необходимости в else if, только для else).

const rock = document.getElementById('rock');
const paper = document.getElementById('paper');
const scissor = document.getElementById('scissor');
const result_in = document.getElementById("result");
let computer;
let computer_pick;
let result;

//Player choice
rock.addEventListener('click', function(e) {
  play('rock')
})
paper.addEventListener('click', function(e) {
  play('paper')
})
scissor.addEventListener('click', function(e) {
  play('scissor')
})

function play(userinput) {
  computer_pick = Math.floor(Math.random() * 3);
  console.log('computer_pick:', computer_pick);
  if (computer_pick === 0) {
    computer = 'rock'
  } else if (computer_pick === 1) {
    computer = 'paper';
  } else {
    computer = 'scissor';
  }
  console.log('computer:', computer);
  //
  if (computer == userinput) { //tie
    result = 'tie';
  } else if (computer == 'rock' && userinput == 'paper' || computer == 'paper' && userinput == 'scissor' || computer == 'scissor' && userinput == "rock") {
    console.log('win');
    result = 'win';
  } else {
    console.log('lost');
    result = 'lost';
  }
  //output
  document.getElementById('result').innerHTML = `You ${result}! The computer threw ${computer}.`;
}

<div id="rock">ROCK</div><br />
<div id="paper">PAPER</div><br />
<div id="scissor">SCISSORS</div><br />

<div>RESULT: <span id="result"></span></div>

И вы могли бы пойти немного дальше, продумав логику:

// you can use a query selector with a class
const btns = document.querySelectorAll('.btn')

// gameRulesObj to define what beats what
const gameRulesObj = {
  "rock": "paper",
  "paper": "scissor",
  "scissor": "rock"
}

btns.forEach(e => {
  e.addEventListener('click', function(e) {
    appendToDOMElement('result', play(this.getAttribute('id'), computerPick(gameRulesObj), gameRulesObj))
  })
})

// this function decides if player wins, loses or ties
function play(userinput, computer, obj) {
  let result;
  if (computer === userinput) {
    result = 'tie';
  } else if (obj[computer] === userinput) {
    result = 'win';
  } else {
    result = 'lost';
  }
  return {
    result,
    computer
  };
}

// this function controls what the computer picks
const computerPick = (obj) => {
  return Object.keys(obj)[Math.floor(Math.random() * Object.keys(obj).length)]
}

// this function adds the result to the DOM
const appendToDOMElement = (container, {
  result,
  computer
}) => {
  document.getElementById(container).textContent = `You ${result}! The computer threw ${computer}.`
}

<div id="rock" class="btn">ROCK</div><br />
<div id="paper" class="btn">PAPER</div><br />
<div id="scissor" class="btn">SCISSORS</div><br />

<div>RESULT: <span id="result"></span></div>

Второй приведенный выше фрагмент кода дает некоторую структуру кода:

• каждая функция имеет один и толькоодна цель (их можно описать одной строкой комментария);это означает, что легче изменить части вашего приложения

• многие переменные исключены, поэтому вам не нужно отслеживать их

• добавлена ​​одна переменная (gameRulesObj), чтобы вы могли определять свои базовые правила в одном месте;теперь функции работают с любым числом и набором правил

Я знаю, что эта структура может быть излишней для такой простой игры, как эта, но это полезно для практики:)