Saya membuat permainan gunting kertas batu itu berfungsi dengan baik kecuali untuk satu bagian. Saya membuatnya sehingga ketika Anda memilih batu atau kertas atau gunting komputer menghapus semua gambar kemudian menampilkan pilihan gambar Anda dan pilihan bot dengan teks Anda menang, atau terikat, atau kalah. Masalahnya adalah itu hanya menunjukkan pilihan saya dengan teks itu tidak menunjukkan pilihan bot

Kesalahan mengatakan: Failed to load resource: the server responded with a status of 404 (Not Found)

Saya mencoba semua yang saya tidak bisa mengetahuinya

function rpsGame(yourChoice) {
  console.log(yourChoice);
  let humanChoice, botChoice;
  humanChoice = yourChoice.id;
  botChoice = numberToChoice(random());
  results = decideWinner(humanChoice, botChoice)
  message = finalMessage(results);
  rpsFrontEnd(yourChoice.id, botChoice.id, message)
};

function random() {
  return Math.floor(Math.random() * 3);
};

function numberToChoice(number) {
  return ['rock', 'paper', 'scissors'][number];
};

function decideWinner(yourChoice, botChoice) {
  let rpsDataBase = {
    'rock': {
      'scissors': 1,
      'rock': 0.5,
      'paper': 0
    },
    'paper': {
      'rock': 1,
      'paper': 0.5,
      'scissors': 0
    },
    'scissors': {
      'paper': 1,
      'scissors': 0.5,
      'rock': 0
    }
  };

  let yourScore = rpsDataBase[yourChoice][botChoice];
  let botScore = rpsDataBase[botChoice][yourChoice];

  return [yourScore, botScore]
};

function finalMessage([yourScore, botScore]) {
  if (yourScore === 0, botScore === 1) {
    return {
      'message': 'You Lost!',
      'color': 'red'
    };
  } else if (yourScore === 0.5, botScore === 0.5) {
    return {
      'message': 'Its a Tie!',
      'color': 'yellow'
    };
  } else {
    return {
      'message': 'You Won!',
      'color': 'green'
    }
  }
}

function rpsFrontEnd(humanImageChoice, botImageChoice, finalMessage) {
  let imagesDataBase = {
    'rock': document.getElementById('rock').src,
    'paper': document.getElementById('paper').src,
    'scissors': document.getElementById('scissors').src
  }

  document.getElementById('rock').remove();
  document.getElementById('paper').remove();
  document.getElementById('scissors').remove();

  let humanDiv = document.createElement('div');
  let botDiv = document.createElement('div');
  let messageDiv = document.createElement('div');

  humanDiv.innerHTML = "<img src='" + imagesDataBase[humanImageChoice] + "'height=150 style='box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);'>"
  messageDiv.innerHTML = "<h1 style='color: " + finalMessage['color'] + "; font-size: 60px; padding: 30px; '>" + finalMessage['message'] + "</h1>"
  botDiv.innerHTML = "<img src='" + imagesDataBase[botImageChoice] + "'height=150 style='box-shadow: 0px 10px 50px rgba(243, 38, 24, 1);'>"

  document.getElementById('flex-box-rps-div').appendChild(humanDiv);
  document.getElementById('flex-box-rps-div').appendChild(messageDiv);
  document.getElementById('flex-box-rps-div').appendChild(botDiv);
}
.container-1,
.container-2,
.container-3 {
  border: 1px solid black;
  margin: 0 auto;
  width: 75%;
  text-align: center;
}

.flex-box-container-1,
.flex-box-container-2,
.flex-box-rps {
  display: flex;
  border: 1px solid black;
  padding: 10px;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flex-box-container-1 div {
  display: flex;
  padding: 10px;
  border: 1px solid black;
  align-items: center;
}

.flex-box-container-2 img {
  margin: 10px;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.7);
  height: 100px;
}

.flex-box-rps img:hover {
  box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);
}
<div class="container-3">
  <h2>Rock, Paper, scissors</h2>
  <div class="flex-box-rps" id="flex-box-rps-div">
    <img id="rock" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSF6zrSP_Sq5CKwW5WiTXH0x-2zUYZLeCXju4qXikZ1mMRNv6dVRDLLAjkcV-Vcrnbp8T4&usqp=CAU" height=150 alt="img" onclick=rpsGame(this)>
    <img id="paper" src="https://i.pinimg.com/originals/cf/a6/54/cfa654e902cb20da0419f0c00875cb56.jpg" height=150 alt="img" onclick=rpsGame(this)>
    <img id="scissors" src="https://i.pinimg.com/originals/88/3c/90/883c9023342352e3b62f11b0858e545b.jpg" height=150 alt="img" onclick=rpsGame(this)>
  </div>
</div>

catatan: Saya mengikuti tutorial yang saya lakukan persis seperti dia jadi saya tidak tahu mengapa saya mendapatkan kesalahan ini dan dia tidak

0
saud 28 Mei 2021, 17:24

1 menjawab

Jawaban Terbaik

Saya telah menelusuri ini untuk menemukan masalahnya.

Kesalahan Failed to load resource: the server responded with a status of 404 (Not Found) adalah ketika file tidak dapat ditemukan saat @disinfor dikomentari. Ini mungkin salah satu gambar yang digunakan sehingga Anda perlu memeriksa URL apa yang menyebabkan kesalahan ini

Adapun bot Anda tidak memberi Anda hasil, ini adalah masalah dalam fungsi pertama Anda:

function rpsGame(yourChoice) {
    console.log(yourChoice);
    let humanChoice, botChoice;
    humanChoice = yourChoice.id;
    botChoice = numberToChoice(random());
    results = decideWinner(humanChoice, botChoice)
    message = finalMessage(results);
    rpsFrontEnd(yourChoice.id, botChoice.id, message)
};

rpsFrontEnd(yourChoice.id, botChoice.id, message) adalah baris yang menyebabkan masalah. Saat Anda menjalankan botChoice = numberToChoice(random());, ini mengembalikan Rock, Paper atau Scissors. Ini menetapkan salah satu dari 3 kata/string ini ke botChoice. Anda melakukan botChoice.id yang tidak diperlukan karena botChoice bukan elemen HTML seperti yourChoice. Jika Anda memperbaikinya di bawah ini maka Anda harus membuatnya berfungsi:

function rpsGame(yourChoice) {
    console.log(yourChoice);
    let humanChoice, botChoice;
    humanChoice = yourChoice.id;
    botChoice = numberToChoice(random());
    results = decideWinner(humanChoice, botChoice)
    message = finalMessage(results);
    rpsFrontEnd(yourChoice.id, botChoice, message)
};

function random() {
    return Math.floor(Math.random() * 3);
};

function numberToChoice(number) {
    return ['rock', 'paper', 'scissors'] [number];
};

function decideWinner(yourChoice, botChoice) {
    let rpsDataBase = {
        'rock':{'scissors': 1, 'rock': 0.5, 'paper': 0},
        'paper':{'rock': 1, 'paper': 0.5, 'scissors': 0},
        'scissors':{'paper': 1, 'scissors': 0.5, 'rock': 0}
    };
    
    let yourScore = rpsDataBase[yourChoice] [botChoice];
    let botScore = rpsDataBase[botChoice] [yourChoice];

    return [yourScore, botScore]
};

function finalMessage([yourScore, botScore]) {
    if(yourScore === 0, botScore === 1) {
        return{'message': 'You Lost!', 'color': 'red'};
    }

    else if(yourScore === 0.5, botScore === 0.5) {
        return{'message': 'Its a Tie!', 'color': 'yellow'};
    }

    else{
        return{'message': 'You Won!', 'color': 'green'}
    }
}

function rpsFrontEnd(humanImageChoice, botImageChoice, finalMessage) {
    let imagesDataBase = {
        'rock': document.getElementById('rock').src,
        'paper': document.getElementById('paper').src,
        'scissors': document.getElementById('scissors').src
    }

    document.getElementById('rock').remove();
    document.getElementById('paper').remove();
    document.getElementById('scissors').remove();

    let humanDiv = document.createElement('div');
    let botDiv = document.createElement('div');
    let messageDiv = document.createElement('div');
    
    humanDiv.innerHTML = "<img src='" + imagesDataBase[humanImageChoice] + "'height=150 style='box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);'>"
    messageDiv.innerHTML = "<h1 style='color: " + finalMessage['color'] + "; font-size: 60px; padding: 30px; '>" + finalMessage['message'] + "</h1>"
    botDiv.innerHTML = "<img src='" + imagesDataBase[botImageChoice] + "'height=150 style='box-shadow: 0px 10px 50px rgba(243, 38, 24, 1);'>"

    document.getElementById('flex-box-rps-div').appendChild(humanDiv);
    document.getElementById('flex-box-rps-div').appendChild(messageDiv);
    document.getElementById('flex-box-rps-div').appendChild(botDiv);
}

Saya harap ini cukup menjelaskannya. Jika tidak, saya senang mengedit dan menambahkan lebih banyak komentar untuk Anda!

1
Tehcheatah 28 Mei 2021, 14:56