Rock Paper Scissors вызов кодирования

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

Итак, что я хочу сделать, так это взять информацию из функций rock(), paper() и scissors() и пойти дальше.

Это то, что у меня есть до сих пор

var playerInput = "blank"
    
function rock(playerInput) {
    this.playerInput = playerInput; 
    playerInput = "rock";
}

function paper(playerInput) {
    this.playerInput = playerInput; 
    playerInput = "paper";
}

function scissors() {
    this.playerInput = playerInput; 
    playerInput = "scissors";
}

и что я хочу сделать оттуда, так это перенести его в другую функцию, где я уже создал саму игру.

я пробовал

var rock = rock();
console.info(rock.playerInput);

и это не сработало, пожалуйста, помогите.

this работает только с объектами, и функция должна возвращать значение, чтобы использовать его вне функции. Если запустить код в неаккуратном режиме, все ваши функции просто присваивают строку playerInput, которая является глобальной переменной. Это означает, что this.playerInput === playerInput.
Teemu 09.12.2020 19:15

Мне нравится помогать студентам. Если хочешь, мы можем провести видеозвонок через Google Meet. Пожалуйста, дайте мне знать, если вам нужно.

Vishal 09.12.2020 19:17

Я просто хочу добавить, это дало мне ошибку, не уверен, что это связано. Ошибка: ``` <a class='gotoLine' href='#81:13'>81:13</a> Uncaught TypeError: rock is not a function"```

Zain Wilson - WCH Student 09.12.2020 19:23

Супер полезно: stackoverflow.com/a/53983473/383904

Roko C. Buljan 09.12.2020 19:24

Я посмотрел на это, и я не знаю, что это значит, в нем есть много вещей, которые я действительно не понимаю.

Zain Wilson - WCH Student 09.12.2020 19:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
5
311
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

function rock(playerInput) {
    
    this.playerInput = playerInput; 
    
}

var playerInput = 'blank'
var myRock = new rock(playerInput);
console.info(myRock.playerInput) // Should output "Blank"

Если вы хотите создать объект с обозначением функций, вам нужно использовать ключевое слово new:

var myRock = new rock();

И вы должны передавать информацию объекту при его создании, а не раньше. Попробуйте что-нибудь вроде этого.

function rock(playerInput) {
    this.playerInput = playerInput; 
}

var myRock = new rock("Blank");
console.info(myRock.playerInput) // Should output "Blank"

Ошибка, которую я получил, была TypeError: камень не является конструктором"

Zain Wilson - WCH Student 09.12.2020 19:25

Убедитесь, что вы не используете rock как объект, так и функцию. Это должны быть разные имена. Сделайте функцию rock(), а затем создайте новую переменную с именем myRock или что-то еще.

Keldan Chapman 09.12.2020 19:30

Теперь я получил неопределенность

Zain Wilson - WCH Student 09.12.2020 19:33

А вы использовали ключевое слово new?

Keldan Chapman 09.12.2020 19:34

У меня есть ответ на этот вопрос, это определенно облегчило задачу, но спасибо за помощь.

Zain Wilson - WCH Student 09.12.2020 19:40
Ответ принят как подходящий

[Вот очень полезный пример][1] о том, как решить логику игры «Камень, ножницы, бумага» с помощью кнопок.

Кроме того, вам не нужны несколько функций, программирование заключается не в копировании/вставке кода в файл, а в определении характеристик, которые мы можем использовать повторно.

Используйте атрибуты data-* для хранения индекса фигуры:

function play() {
  const player = Number(this.dataset.player); // Get 0, 1, 2 from button data-player
  const computer = Math.floor(Math.random() * 3); // Generate random 0, 1, 2 integer
  console.info(`PLAYER: ${player} COMPUTER:${computer}`);

  // Game logic goes here
}

const buttons = document.querySelectorAll("[data-player]");

buttons.forEach(function(el) {
  el.addEventListener("click", play);
});
<button data-player = "0" type = "button">ROCK</button>
<button data-player = "1" type = "button">PAPER</button>
<button data-player = "2" type = "button">SCISSORS</button>

Учитывая вышеизложенное, вы получили почти все необходимые данные.

  • Значения игрока и компьютера представляют собой целое число 0 (камень), 1 (бумага), 2 (ножницы).

Пример игры «Камень, ножницы, бумага» с результатом

const fig = ["Rock", "Paper", "Scissors"];
const msg = ["You won!", "You lost :(", "It's a draw"];

function play() {
  const player = Number(this.dataset.player); // Get 0, 1, 2 from button data-player
  const computer = Math.floor(Math.random() * 3); // Generate random 0, 1, 2 integer

  // Game logic goes here
  // See: https://stackoverflow.com/a/53983473/383904
  let result;
  if (player === computer) {
    result = 2; // Draw
  } else if ((computer + 1) % 3 === player) {
    result = 0; // Player wins
  } else {
    result = 1; // Computer wins
  }

  console.info(`PLAYER:${fig[player]} COMPUTER:${fig[computer]} ${msg[result]}`);
}

const buttons = document.querySelectorAll("[data-player]");

buttons.forEach(function(el) {
  el.addEventListener("click", play);
});
<button data-player = "0" type = "button">ROCK</button>
<button data-player = "1" type = "button">PAPER</button>
<button data-player = "2" type = "button">SCISSORS</button>

Еще один ресурс, объясняющий логику, здесь [1]: https://stackoverflow.com/a/53983473/383904

что делает Number(this.dataset.player);, а также что означают знаки $

Zain Wilson - WCH Student 09.12.2020 19:35

Я думаю, что на самом деле понимаю, This.dataset означает, что вы можете использовать data-player = в HTML, но я не знаю, что означают знаки $

Zain Wilson - WCH Student 09.12.2020 19:36

Это сработало очень хорошо, и я знаю, как это сделать дальше, я просто хочу знать, что все это делает.

Zain Wilson - WCH Student 09.12.2020 19:39

@ZainWilson-WCHStudent developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Я использовал литералы шаблонов вместо + для объединения строк с переменными.

Roko C. Buljan 09.12.2020 19:39
this — нажатая кнопка, this.dataset — способ чтения атрибута data-* кнопки, this.dataset.player — значение атрибута data-player = "XY". Number это... developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… используется для преобразования строки в число. Обратитесь к документам за тем, что вы не понимаете, или спросите
Roko C. Buljan 09.12.2020 19:43

Еще один вопрос, что делает эль в forEach (el => { el.addEventListener("click", play);});

Zain Wilson - WCH Student 09.12.2020 19:44

@ ZainWilson-WCHStudent Я отредактировал ответ ... изменил функцию Arrow на обычную функцию. Надеюсь, вам будет легче понять. Пожалуйста, прочтите: developer.mozilla.org/en-US/docs/Web/API/NodeList/forEachel — это итерирующая кнопка (поскольку у нас их три!) — внутри цикла forEach вы назначаете щелчок эта конкретная кнопка.

Roko C. Buljan 09.12.2020 19:46

поэтому я проверил ваше переполнение стека именно для этого, и мне было интересно, как его сбросить. Я попытался изменить все константы на переменные, а затем установить их на ноль с помощью функции сброса, и это не сработало. Я использовал document.querySelectorAll("[reset]") .forEach(el => el.addEventListener("click", reset)); , чтобы попытаться найти его, и это не сработало, что я могу сделать, чтобы исправить это?

Zain Wilson - WCH Student 09.12.2020 20:41

@ ZainWilson-WCHStudent нет необходимости ничего сбрасывать из приведенных выше примеров. Хотя - если у вас есть внешние переменные, считающие количество сыгранных игр и количество побед - по клику сбрасываются только эти две. Я не могу знать, что не сработало из одной строки кода. Опубликуйте пример нового вопроса, если у вас есть несвязанная проблема. - Также "[reset]" не является допустимым селектором. Вы имеете в виду скорее: ".reset" лайк за то есть: <button class = "reset" type = "button">RESET</button>?

Roko C. Buljan 09.12.2020 20:49

Другие вопросы по теме