时间戳

首页 > 解决方案 > 如何在此代码中添加段落、换行符或水平线标记？

javascript - 如何在此代码中添加段落、换行符或水平线标记？

问题描述

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);

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

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

标签： javascript

解决方案

我已经更新了你的代码。我想展示的主要内容是您必须将代码拆分为逻辑部分。在我的示例中，有：

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

推荐阅读