JavaScript Hangman Game - Воспроизведение определенной песни для каждого слова, правильно угаданного

Question

Я новичок в программировании и играю с чьим-то кодом для игры в Hangman.Я решил изменить слово банк на названия разных песен.Я думал, что было бы здорово, если бы эта песня играла после того, как угадал правильно, но я не уверен, как это кодировать.

Конечно, я бы объявил и установил переменную: var stayinAlive = new Audio (/assets/sounds/stayingalive.mp3);

На самом деле код этого экземпляра, я думал, что это будет что-то вроде использования цикла if, например:

if (selectableWords == "stayinalive") {
stayinAlive.play();
} 
 else if {
(selectableWords == "dancingqueen") {
dancingQueen.play(); 

Конечно, этот код не работает.Я не совсем думаю, что я связываю правильную переменную (selectableWords), и я также не уверен, куда бы я вообще поместил этот кусок кода (я предполагаю, что это может иметь какое-то отношение к функции checkWin ()?)

Вот некоторые из JavaScript, с которыми я работаю:

'use strict';

var selectableWords =          
[
    "stayinalive",
    "dancingqueen",
];

const maxTries = 10;

var guessedLetters = [];
var currentWordIndex;           
var guessingWord = [];          
var remainingGuesses = 0;       
var hasFinished = false;             
var wins = 0;                   
var losses = 0;

// Game sounds
var stayinAlive = new Audio('./assets/sounds/stayinalive.mp3');
var dancingQueen = new Audio('./assets/sounds/dancingqueen.mp3');

function resetGame() {
remainingGuesses = maxTries;

currentWordIndex = Math.floor(Math.random() * (selectableWords.length));

Позже в коде ...

function checkWin() {
  if(guessingWord.indexOf("_") === -1) {
    document.getElementById("youwin-image").style.cssText = "display: block";
    document.getElementById("pressKeyTryAgain").style.cssText= "display: block";
    wins++;
    hasFinished = true;
 }
};

function checkLoss() {
  if(remainingGuesses <= 0) {
    document.getElementById("gameover-image").style.cssText = "display: block";
    document.getElementById("pressKeyTryAgain").style.cssText = "display:block";
    losses++
    hasFinished = true;
 }
}

Answer 1

var selectableWords =          
[
    "stayinalive",
    "dancingqueen",
];

Обозначает массив слов, которые содержат возможные варианты слов, это не текущее слово, которое угадывается.

if (selectableWords == "stayinalive") {
stayinAlive.play();
} 
 else if {
(selectableWords == "dancingqueen") {
dancingQueen.play(); 

selectableWords здесь все равно присвоено ["stayinalive", "dancingqueen"]

То, с чем вам нужно сравнивать эти константы, это текущее слово.

currentWordIndex = Math.floor(Math.random() * (selectableWords.length));

Число, при котором текущее слово может быть найдено в массиве выбираемых слов, выбранных случайным образом.

Вы можете получить доступ к значениям массива с помощью числового индекса https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

в вашем примере

selectableWords[0] имеет значение stayinalive

и

selectableWords[1] имеет значение dancingqueen

, вы можете получить текущее слово, используя текущий индекс.

selectableWords[currentWordIndex] даст вам имяслово.

Итак, вы можете сделать

if (selectableWords[currentWordIndex] == "stayinalive") {
stayinAlive.play();
} 

Однако, это быстро выйдет из-под контроля, поэтому использование других структур данных, таких как ответ @someRandomSerbianGuy, даст вам большеобслуживаемый код в долгосрочной перспективе.

Answer 2

Есть намного лучший способ.Вы можете отобразить вашу переменную как correctAnswer: "songPath".Примером этого кода будет:

var namePath = { //creating new object with pairs - correct answer : "song path" for that correct answer
    songName: "soundPath",
    otherSongName: "otherSongPath"
};

function checkWin() {
  if(guessingWord.indexOf("_") === -1) {
    document.getElementById("youwin-image").style.cssText = "display: block";
    document.getElementById("pressKeyTryAgain").style.cssText= "display: block";
    wins++;
    hasFinished = true;
    if(namePath.hasOwnProperty(songName)){ //checking if there is path for that song (ckecking if there is that key in variable)
        var songToPlay = new Audio(namePath[songName]); //creating new sound object and assigning him audio path to play for that song
        songToPlay.play()
    }
 }
};

Редактировать: вот учебник, который поможет вам лучше понять и изучить этот принцип: http://pietschsoft.com/post/2015/09/05/JavaScript-Basics-How-to-create-a-Dictionary-with-KeyValue-pairs