Question

我创建了一个可以在浏览器中玩的骰子游戏。用户可以刷新页面以随机掷骰子。骰子上点数最多或骰子值最高的骰子将获胜。当用户单击刷新时，随机骰子图像将被动态添加到2个图像标签的src中。所有的编码逻辑几乎都在起作用，但是，由于某些奇怪的原因，骰子图像被破坏了。数天来，我一直在udemy上应对Angela Yu Web Development Bootcamp提出的编码挑战。我正在使用setAttribute将图像的src设置为来自数组的随机图像，但是它不起作用。为什么我的图像坏了？

dices.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dicee</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">

  </head>
  <body>

    <div class="container">
      <h1>Refresh Me </h1>

      <div class="dice">
        <p>Player 1</p>
        <img class="img1" src="">
      </div>

      <div class="dice">
        <p>Player 2</p>
        <img class="img2" src="">
      </div>

    </div>
<script src="dice.js" charset="utf-8"></script>

  </body>

  <footer>
    www  App Brewery  com
  </footer>
</html>

dice.js


function rollDice () {
  //two dices that will have 6 dots when game start. Same dice value
  document.querySelector(".img1").setAttribute("src", "images/dice6.png");
  document.querySelector(".img2").setAttribute("src", "images/dice6.png");

  var highestDiceRoll = 0;
  var winner;

  var player1 = ['<img src="images/dice1.png" alt="Italian Trulli">',
  '<img src="images/dice2.png" alt="Italian Trulli">',
  '<img src="images/dice3.png" alt="Italian Trulli">',
  '<img src="images/dice4.png" alt="Italian Trulli">',
  '<img src="images/dice5.png" alt="Italian Trulli">',
  '<img src="images/dice6.png" alt="Italian Trulli">'];

  var player2 = ['<img src="images/dice1.png" alt="Italian Trulli">',
  '<img src="images/dice2.png" alt="Italian Trulli">',
  '<img src="images/dice3.png" alt="Italian Trulli">',
  '<img src="images/dice4.png" alt="Italian Trulli">',
  '<img src="images/dice5.png" alt="Italian Trulli">',
  '<img src="images/dice6.png" alt="Italian Trulli">'];


var randPlayer1 = Math.floor(Math.random() * player1.length);
var randPlayer2 = Math.floor(Math.random() * player2.length);

var diceRolls = player1[randPlayer1] + " " + player2[randPlayer2];


if (performance.navigation.type == 1) {

  // when page is refreshed, update image source to a random dice image
  document.querySelector(".img1").setAttribute("src", "randPlayer2");
  document.querySelector(".img2").setAttribute("src", "randPlayer2");

  if (randPlayer1 > randPlayer2) {
     highestDiceRoll = player1;
     winner = document.querySelector("h1").innerHTML = "Player1 Won";
   } else if (randPlayer2 > randPlayer1) {
     highestDiceRoll = player2;
     winner = document.querySelector("h1").innerHTML = "Player2 Won";
   } else {
     winner = document.querySelector("h1").innerHTML = "DRAW";
   }
}

}
rollDice();

Answer 1

我认为这是在变量上分配字符串的简单情况。
您添加了：setAttribute("src", "randPlayer2");，何时应该拥有
setAttribute("src", player2[randPlayer2]);

更新：我做了一个嘘声。

此外，您还需要重构player1和player2数组。这些文件具有完整的html格式，例如：
var player2 = ['images/dice1.png', 'images/dice2.png'];

使用您的代码进行较小的修改即可使用，并且不需要完全重写。

这里是完整版本，中间没有我的评论：

var player1 = ['images/dice1.png', 'images/dice2.png'];


var randPlayer1 = Math.floor(Math.random() * player1.length);

function rollDice () {  
  //two dices that will have 6 dots when game start. Same dice value    
 document.querySelector(".img1").setAttribute("src", player1[randPlayer1]);  
}  
 rollDice()

Answer 2

将images数组更改为仅url并按如下所示设置图片

var player2= ['images/dice1.png','images/dice2.png','images/dice3.png','images/dice4.png','images/dice5.png','images/dice6.png'];

...

document.querySelector(".img2").src = player2[randPlayer2];

与player1相同

Answer 3

 // when page is refreshed, update image source to a random dice image
  document.querySelector(".img1").setAttribute("src", randPlayer2);
  document.querySelector(".img2").setAttribute("src", randPlayer2);

为什么setAttribute给我数组中损坏的图像

3 个答案: