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

Question

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

Welcome to Stack Overflow. We are more than willing to answer a specific question if you have one. Please take a moment to read [ask] for some tips to improve your question in order to get the help you need. Feel free to [edit] your question as much as you need. — Code-Apprentice, Jun 04 '18 at 04:56
@Marged - I want to play the certain song when it has been correctly guessed. For example, if Stayin Alive is the song the user has to guess and they guess all letters correctly, I want that song to start playing. If the song the user has to guess is Dancing Queen, and they guess correctly, I want that to play instead, etc. for all other songs I may add. — Jane Done, Jun 04 '18 at 04:57
OK, this is a goal but no specific question. Please have a look at https://stackoverflow.com/help/how-to-ask — Marged, Jun 04 '18 at 05:00

someRandomSerbianGuy · Answer 1 · 2018-06-04T05:05:01.883

2

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

edited Jun 04 '18 at 05:05

answered Jun 04 '18 at 05:00

someRandomSerbianGuy

471
4
18

I get where you are going, and it's a good answer! But it's not there yet for a beginner to understand IMO. – Ryan Leach Jun 04 '18 at 05:04
@RyanTheLeach I added comments. I will add more of them and some documentation for him to understand and learn something new! :) – someRandomSerbianGuy Jun 04 '18 at 05:05
2

I appreciate your help, very much! It's a little over my head at the moment, but the comments you added and the extra tutorial will be a great help as I continue to learn! I really appreciate it! :') – Jane Done Jun 04 '18 at 05:26
You can also tweak this slightly, so you get an array of objects instead. That will (judging on the existing code) be easier to migrate to, then using object properties as dictionaries, but is still very similar. https://stackoverflow.com/questions/31469441/array-of-objects-vs-object-of-objects – Ryan Leach Jun 04 '18 at 05:31

score 2 · Accepted Answer · answered Jun 04 '18 at 05:09

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.

Thank you so much for all the info! I wasn't sure which variable (in this case, constant) to attach the music to and your comments made perfect sense! Although this is not the best way, as you mention, I want to use this way only for now and then branch out to better understanding @someRandomSerbianGuy's way. — Jane Done, Jun 04 '18 at 05:28
That's what I would recommend as well. The best way to say thanks on Stack Overflow is upvoting (all relevant constructive answers) and accepting the solution that solved (or best solved) your problem. — Ryan Leach, Jun 04 '18 at 05:30

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

2 Answers2