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？在provider.request(.getSomeInfo) { result in switch result { case .success(let response): do { let jsonDic = try moyaResponse.mapJSON() as! [String: Any] let error = jsonDic["error"] as? String if error! == "13" { //call some functions } } catch { }标签或head标签中！

如果您将此代码注入body标记中，则需要等待DOM加载完毕

类似这样的东西：

head

Answer 2

您的代码中有一些错误：

rock.onclick不正确-rock.addEventlistener('click', function(e) {})是正确的
console.log(win)（或丢失）不正确-您尝试console.log()不存在的变量-在console.log()中输出字符串，应将其放入引号console.log('win')
document.getElementById('result').innerHTML = You ${result}! The computer threw ${computer}.;不正确-您应使用反引号进行字符串插值
您没有像rock和paper那样定义scissor
这不是编码错误，而是一个简单的逻辑问题：您有三个结果替代方案：并列，获胜，遗失。如果不是领带，并且用户没有获胜（赢得），则用户输掉。您不需要最后一个else if，只需要else
computer_pick 变量也是如此-没有错误的余地（随机值只能是0、1或2），因此您不需要{{ 1}}表示错误。如果 computer_pick 不是0或1，则必须为2（不需要else，只需要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>），因此您可以在一个地方定义基本规则；这些功能现在可以使用任何数量和任何规则集

我知道这种结构对于像这样的简单游戏来说可能是过大的，但是对于练习：）

Answer 3

尝试< button onClick=play('rock')>，依此类推

document.getElementById('result').innerHTML = " "行需要“”

Javacript的剪刀石头布游戏

3 个答案: