石頭剪刀布游戲用 JavaScript

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

您的代碼中有一些錯誤：

1. rock.onclick不正確 - rock.addEventlistener('click', function(e) {})正確

2. console.log(win) （或丟失）不正確 - 你嘗試console.log()一個不存在的變量 - 到 output 一個字符串console.log()你應該把它放在引號中console.log('win')

3. document.getElementById('result').innerHTML = You ${result}. The computer threw ${computer};; 不正確 - 您應該使用反引號進行字符串插值

4. 你沒有像定義paper和scissor那樣定義rock

5. 這不是一個編碼錯誤，而是一個簡單的邏輯問題：你有三個結果 ALTERNATIVES： tie 、 win 、 lost 。 如果不是平局並且用戶沒有贏（贏），那么用戶就輸了。 你不需要最后一個else if ，只有else

6. computer_pick變量也是如此 - 沒有出錯的余地（隨機值只能是 0、1 或 2），因此您不需要else for error 。 如果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>

通過思考邏輯，您可以進一步 go ：

 // 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>

上面的第二個片段為代碼提供了一些結構：

• 每個 function 都有一個且只有一個目的（可以用一行注釋來描述）； 這意味着更改應用程序的某些部分更容易

• 消除了很多變量，因此您不必跟蹤它們

• 添加了一個變量（ gameRulesObj ），因此您可以在一處定義基本規則； 這些功能現在可以使用任意數量和規則集

我知道這種結構對於像這樣的簡單游戲來說可能有點矯枉過正，但它對練習很有好處:)

Answer 3

試試< button onClick=play('rock')>等等

你需要 " " 作為行document.getElementById('result').innerHTML = " "