Lesson 198 – Complete 2020 Web Development Bootcamp

Lesson 198 – Show the Sequence to the User with Animation & Sound

I haven’t posted recently because I have been working on the Simon Game Challenge.

I am now at lesson 198. The challenge in this lesson was to add animation to the coloured buttons so that they fade in and out and to add a sound that plays when the button is chosen.

This has been another humbling experience in my programming journey. This is the code I came up with with. The code is successful in adding animation using the nextSequence function. However, although I wrote a randomSound function, I wasn’t able to figure out how to incorporate it into the nextSequence function so that they ran at the same time.

ar gamePattern = [];

var buttonColours = ["red", "blue", "green", "yellow"];

var randomChosenColour = "";


function nextSequence() {
	var randomNumber = Math.floor(Math.random() * 4);

	if (randomNumber == 0) {
		randomChosenColour = buttonColours[0];
	}
 
	else if (randomNumber == 1) {
		randomChosenColour = buttonColours[1];
	}
 
	else if (randomNumber == 2) {
		randomChosenColour = buttonColours[2];
	}

	else {
		randomChosenColour = buttonColours[3];
	}

	gamePattern.push(randomChosenColour);

	
	$("#" + randomChosenColour).animate({opacity: 0.5}, 
100).delay(100).animate({opacity: 1});

}

function randomSound() {

	if (randomChosenColour == buttonColours[0]) {
		var redSound = new Audio("sounds/red.mp3");
		  redSound.play();
	}

	else if (randomChosenColour == buttonColours[1]) {
		var blueSound = new Audio("sounds/blue.mp3");
		  blueSound.play();
	}

	else if (randomChosenColour == buttonColours[2]) {
		var greenSound = new Audio("sounds/green.mp3");
		  greenSound.play();
	}

	else if (randomChosenColour == buttonColours[3]) {
		var yellowSound = new Audio("sounds/yellow.mp3");
		  yellowSound.play();
	}

	else {
		var wrongSound = new Audio("sounds/wrong.mp3");
		  wrongSound.play();
	}

}

Now here is the code supplied as the answer to the challenge – notice the brevity of the solution compared to mine!

var buttonColours = ["red", "blue", "green", "yellow"];

var gamePattern = [];

function nextSequence() {

  var randomNumber = Math.floor(Math.random() * 4);
  var randomChosenColour = buttonColours[randomNumber];
  gamePattern.push(randomChosenColour);

  $("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100);

  
  var audio = new Audio("sounds/" + randomChosenColour + ".mp3");
  audio.play();
}

This one line of code replaces my entire if/else loop in order to create and assign a value to the variable “randomChosenColour”! Ouch – humbling!

var randomChosenColour = buttonColours[randomNumber];

These two lines of code incorporated into the nextSequence function replace my entire randomSound function in which I used a if/else loop to play a sound! And I couldn’t figure out how to run my nextSequence and randomSound functions at the same time!

var audio = new Audio("sounds/" + randomChosenColour + ".mp3");
  audio.play();

Oh well…

Nothing to do but press on.