CODEWITHSUNDEEP
javascriptloopsif-statement
Jane Done
Jane Done

Reputation: 17

JavaScript Hangman Game - Playing A Specific Song for Each Word Correctly Guessed

I'm new to coding and I'm playing around with someone's code for a Hangman game. I decided to alter the word bank to be the names of various songs. I thought it'd be cool if that song would play after guessed correctly, but I'm not sure how to code that.

Of course I'd declare and set the variable: var stayinAlive = new Audio(/assets/sounds/stayingalive.mp3);

To actually code that instance, I thought it would be something along the lines of using an if loop, such as:

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

Of course, that code doesn't work. I don't quite think I'm linking the right variable (selectableWords) and I'm also not sure where I would even put this piece of code (I'm guessing it might have something to do with the checkWin() function?)

Here's some of the javascript I'm working from: 

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

Later on in the code...

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

Upvotes: 1

Views: 141

Answers (2)

Ryan Leach
Ryan Leach

Reputation: 4470

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

Denotes an array of words that contain the possible word choices, it is not the current word being guessed.

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

selectableWords here is STILL assigned to ["stayinalive", "dancingqueen"]

What you need to be comparing those constants to is the current word.

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

Is the number at which the current word can be found in the selectable words array, chosen randomly.

You can access the values of an array, by a numerical index https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

in your example

selectableWords[0] has the value stayinalive

and

selectableWords[1] has the value dancingqueen

you can get the current word using the current index.

selectableWords[currentWordIndex] will give you the name of the word.

So, you can do 

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

However, this will quickly get out of hand, so using other data structures such as in @someRandomSerbianGuy 's answer will give you more maintainable code in the long run.

Upvotes: 2

someRandomSerbianGuy
someRandomSerbianGuy

Reputation: 491

There is a lot better way. You can map your variable to be correctAnswer : "songPath". Example for that code would be:

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

Edit: Here is tutorial that can help you understand and learn this principle better: http://pietschsoft.com/post/2015/09/05/JavaScript-Basics-How-to-create-a-Dictionary-with-KeyValue-pairs

Upvotes: 2

Related Questions