Question

var userChoice = prompt('Choose between Rock,Paper or Scissors');
var computerChoiceArray = ['Rock','Paper','Scissors'];
var choiceNumber = Math.floor(Math.random()*3);

var compChoice  = computerChoiceArray[choiceNumber];
document.write('Computer chose '+ compChoice)    
    var game = function(compChoice,userChoice) {
        if (compChoice === userChoice) {
            document.write("The result is a Tie!!")
        }else if( compChoice === "Rock " && userChoice === "Scissors") {
            document.write("Computer wins !!!")
        }else if( compChoice === "Rock " && userChoice === "Paper") {
            document.write("You won !!!")
        }else if( compChoice === "Scissors" && userChoice === "Rock") {
            document.write ("You won !!!")
        }else if( compChoice === "Scissors" && userChoice === "Paper") {
            document.write("Computer wins !!!")
        }else if( compChoice === "Paper" && userChoice === "Rock") {
            document.write("Computer wins !!!")
        }else if( compChoice === "Paper" && userChoice === "Scissors") {
            document.write ("You won !!!")
        }else{
            alert ("Error, "+userChoice+" is not applicable ");
        }
    }

 game(compChoice,userChoice);

即使添加了所需的标签，也会出现错误。

请添加任何标记以留下行或div标记。如果可能的话，请提出一些改进建议。

Answer 1

您的代码最终出现在错误提醒中的原因很可能是因为您在比较文本时添加了空格，例如if(userChoice === 'Rock ')以及您忽略了JavaScript区分大小写。含义Rock !== 'rock'

我将尽可能地保持代码不变，以确保它仍然是您的代码，但请注意，与比较字符串值相比，有更好的方法来编写代码。

使用toUpperCase()可以比较字符串，无论用户输入rock还是rOcK

您也可以添加trim()，因为用户可以选择带有空格的Rock。考虑将用户选择更改为下拉列表以消除该问题。

关于换行符，由于你没有具体指明在哪里，我假设你的意思是计算机选择的文本与结果之间的关系。

例如，您可以添加<br/>来添加换行符，例如document.write("<br/>Computer wins !!!")

请注意，正如其他人所说的使用document.write并不好，而是尝试使用document.createElement()代替。另外，考虑一下将用户选择更改为下拉列表以消除字符串问题。您可以更好地验证选择的数字表示比较字符串。我把这项研究留给你了。

无论如何，下面的代码尽可能接近您的代码，并且更改量最少，以使其符合您的预期结果并修复错误。

var userChoice = prompt('Choose between Rock,Paper or Scissors');
var computerChoiceArray = ['Rock', 'Paper', 'Scissors'];
var choiceNumber = Math.floor(Math.random() * 3);

var compChoice = computerChoiceArray[choiceNumber];

document.write('Computer chose ' + compChoice);

var game = function(compChoice, userChoice) {
  

  if (compChoice.toUpperCase() === userChoice.toUpperCase()) {
    document.write("<br/>The result is a Tie!!")
  } else if (compChoice.toUpperCase() === "ROCK" && userChoice.toUpperCase() === "SCISSORS") {
    document.write("<br/>Computer wins !!!")
  } else if (compChoice.toUpperCase() === "ROCK" && userChoice.toUpperCase() === "PAPER") {
    document.write("<br/>You won !!!")
  } else if (compChoice.toUpperCase() === "SCISSORS" && userChoice.toUpperCase() === "ROCK") {
    document.write("<br/>You won !!!")
  } else if (compChoice.toUpperCase() === "SCISSORS" && userChoice.toUpperCase() === "PAPER") {
    document.write("<br/>Computer wins !!!")
  } else if (compChoice.toUpperCase() === "PAPER" && userChoice.toUpperCase() === "ROCK") {
    document.write("<br/>Computer wins !!!")
  } else if (compChoice.toUpperCase() === "PAPER" && userChoice.toUpperCase() === "SCISSORS") {
    document.write("<br/>You won !!!")
  } else {
    alert("Error, " + userChoice + " is not applicable ");
  }
}

game(compChoice, userChoice);

Answer 2

我已经更新了你的代码。我想要表明你必须将代码拆分为逻辑部分的主要内容。在我的例子中有：

对象game，用于存储所有信息
函数round开始新一轮并编写游戏日志
显示进度的函数writeLogs。

请注意，这不是实施此游戏的最佳方式。

var computerChoiceArray = ['rock', 'paper', 'scissors'];
var MAX_NUMBER_OF_ROUNDS = 3;

var game = {
  DOMElement: document.getElementById('game-wrapper'),
  roundsCounter: 0,
  logs: []
};

function round(game) {
  if (game.roundsCounter >= MAX_NUMBER_OF_ROUNDS) {
    game.logs.push("The End");
    writeLogs(game);
    return;
  }

  var userChoice = prompt('Choose between: ' + computerChoiceArray.join(', ')) || '';
  userChoice = userChoice.toLowerCase();
  var compChoiceNumber = Math.floor(Math.random() * 3);
  var compChoice = computerChoiceArray[compChoiceNumber];

  if (compChoice === userChoice) {
    game.logs.push("The result is a Tie!!");
  } else if (compChoice === "rock" && userChoice === "scissors") {
    game.logs.push("Computer wins !!!");
  } else if (compChoice === "rock" && userChoice === "paper") {
    game.logs.push("You won !!!");
  } else if (compChoice === "scissors" && userChoice === "rock") {
    game.logs.push("You won !!!");
  } else if (compChoice === "scissors" && userChoice === "paper") {
    game.logs.push("Computer wins !!!");
  } else if (compChoice === "paper" && userChoice === "rock") {
    game.logs.push("Computer wins !!!");
  } else if (compChoice === "paper" && userChoice === "scissors") {
    game.logs.push("You won !!!");
  } else {
    game.logs.push("Error, " + userChoice + " is not applicable ");
  }
  
  game.roundsCounter += 1;
  writeLogs(game);
  
  // wait a sec to write logs and start a new round
  setTimeout(function() {
  	round(game);
  }, 1000)
}

function writeLogs(game) {

  // clear logs
  game.DOMElement.innerHTML = '';
  
  for (var log of game.logs) {
    var logHTMLElement = document.createElement('div');
    logHTMLElement.innerHTML = log;
    game.DOMElement.appendChild(logHTMLElement);
  }
}

// start the first round
round(game);

<div id="game-wrapper"></div>

如何在此代码中添加段落，换行符或水平规则标记？

2 个答案: