Блог

Я сделал игру «камень-ножницы-бумага», она отлично работает, за исключением одной части. Я сделал так, чтобы, когда вы выбираете камень, бумагу или ножницы, компьютер удалял все изображения, а затем отображал ваш выбор изображения и выбор бота с текстом, который вы выиграли, или связали, или проиграли. Проблема в том, что он показывает только мой выбор с текстом, он не показывает выбор бота

Ошибка гласит: Failed to load resource: the server responded with a status of 404 (Not Found)

Я перепробовал все, что не мог понять

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

примечание: Я следую учебнику, который я сделал точно так же, как он, поэтому я не понимаю, почему я получаю эту ошибку, а он нет

Я проследил за этим, чтобы найти проблему.

Failed to load resource: the server responded with a status of 404 (Not Found) Ошибка возникает, когда файл не может быть найден, как прокомментировал @disinfor. Это может быть одно из используемых изображений, поэтому вам нужно будет проверить, какой URL выдает эту ошибку

Что касается того, что ваш бот не дает вам результата, это проблема в вашей первой функции:

 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) строка, которая вызывает проблему. Когда вы выполняете botChoice = numberToChoice(random()); , это возвращает либо Rock , Paper либо Scissors .Это присваивает одно из этих 3 слов/строк botChoice . Вы делаете botChoice.id то, что не нужно, так как botChoice это не такой HTML-элемент, как yourChoice . Если вы исправите это ниже, то вы должны заставить его работать:

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

Я надеюсь, что это достаточно все объясняет. Если нет, я буду рад отредактировать и добавить больше комментариев для вас!