时间戳

首页 > 解决方案 > 无法找到图片文件夹并收到 404 错误，但实时服务器工作正常

javascript - 无法找到图片文件夹并收到 404 错误，但实时服务器工作正常

问题描述

我目前在托管项目中显示石头和剪刀图像时遇到问题。当我加载页面并选择我的手时，它应该显示图像并且与计算机相同，但无论出于何种原因它都没有。我已经在我的实时服务器上尝试过了，一切正常，但我无法弄清楚问题所在。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <link rel="stylesheet" href="style.css">
    <title>Rock Paper Scissors</title>
</head>

<body>
    <section class="game">
        <div class="score">
            <div class="player-score">
                <h2>Player</h2>
                <p>0</p>
            </div>
            <div class="computer-score">
                <h2>Computer</h2>
                <p>0</p>
            </div>
        </div>
        <div class="intro">
            <h1>Rock Paper and Scissors</h1>
            <button>Let's Play</button>
        </div>

        <div class="match fadeOut">
            <h2 class="winner">Choose An Option</h2>
            <div class="hands">
                <img class="player-hand" src="/pictures/assets/rock.png" alt="">
                <img class="computer-hand" src="/pictures/assets/rock.png" alt="">
            </div>
            <div class="options">
                <button class="rock">rock</button>
                <button class="paper">paper</button>
                <button class="scissors">scissors</button>
            </div>
        </div>
    </section>
    <script src="app.js"></script>
</body>

</html>

const game = () => {
    let pScore = 0;
    let cScore = 0;

    //Start the Game
    const startGame = () => {
      const playBtn = document.querySelector(".intro button");
      const introScreen = document.querySelector(".intro");
      const match = document.querySelector(".match");

      playBtn.addEventListener("click", () => {
        introScreen.classList.add("fadeOut");
        match.classList.add("fadeIn");
      });
    };
    //Play Match
    const playMatch = () => {
      const options = document.querySelectorAll(".options button");
      const playerHand = document.querySelector(".player-hand");
      const computerHand = document.querySelector(".computer-hand");
      const hands = document.querySelectorAll(".hands img");

      hands.forEach(hand => {
        hand.addEventListener("animationend", function() {
          this.style.animation = "";
        });
      });
      //Computer Options
      const computerOptions = ["rock", "paper", "scissors"];

      options.forEach(option => {
        option.addEventListener("click", function() {
          //Computer Choice
          const computerNumber = Math.floor(Math.random() * 3);
          const computerChoice = computerOptions[computerNumber];

          setTimeout(() => {
            //Here is where we call compare hands
            compareHands(this.textContent, computerChoice);
            //Update Images
            playerHand.src = `/pictures/assets/${this.textContent}.png`;
            computerHand.src = `/pictures/assets/${computerChoice}.png`;
          }, 2000);
          //Animation
          playerHand.style.animation = "shakePlayer 2s ease";
          computerHand.style.animation = "shakeComputer 2s ease";
        });
      });
    };

    const updateScore = () => {
      const playerScore = document.querySelector(".player-score p");
      const computerScore = document.querySelector(".computer-score p");
      playerScore.textContent = pScore;
      computerScore.textContent = cScore;
    };

    const compareHands = (playerChoice, computerChoice) => {
      //Update Text
      const winner = document.querySelector(".winner");
      //Checking for a tie
      if (playerChoice === computerChoice) {
        winner.textContent = "It is a tie";
        return;
      }
      //Check for Rock
      if (playerChoice === "rock") {
        if (computerChoice === "scissors") {
          winner.textContent = "Player Wins";
          pScore++;
          updateScore();
          return;
        } else {
          winner.textContent = "Computer Wins";
          cScore++;
          updateScore();
          return;
        }
      }
      //Check for Paper
      if (playerChoice === "paper") {
        if (computerChoice === "scissors") {
          winner.textContent = "Computer Wins";
          cScore++;
          updateScore();
          return;
        } else {
          winner.textContent = "Player Wins";
          pScore++;
          updateScore();
          return;
        }
      }
      //Check for Scissors
      if (playerChoice === "scissors") {
        if (computerChoice === "rock") {
          winner.textContent = "Computer Wins";
          cScore++;
          updateScore();
          return;
        } else {
          winner.textContent = "Player Wins";
          pScore++;
          updateScore();
          return;
        }
      }
    };

    //Is call all the inner function
    startGame();
    playMatch();
  };

  //start the game function
  game();

标签： javascripthtml

解决方案

推荐阅读