Step 7 - Create a randomizing function to shuffle content in game buttons

Step 7: Create a randomizing function to shuffle content in game buttons

• Learn about randomizing functions

Score: 10

Evaluation & Deliverables:

This week I searched all over on how to randomize numbers. Codecademy describes the basic Math.floor/Math.random tool. I tried several, but ended up really liking one I found in a Google search, but now I can't find where I got it from. And I can't remember if I combined two approaches, or what. I will do better about this in the future. Anyways, here's the function:

Array.prototype.randomize = function() { var i = this.length, j, temp; while ( --i ) { j = Math.floor( Math.random() * (i - 1) ); temp = this[i]; this[i] = this[j]; this[j] = temp; } }

The idea behind this function is that you can take any array and add .randomize to it to get it to use random numbers. I like this because you do not have to make a new function for each array. 

I have a lot of things in the game that need to be randomized. The main buttons display five different types of punctuation marks used in a sentence. I want each type to show, but I don't want it to always be in the same place every time. So I created an array that included each punctuation mark type and randomized it so that it was displayed in a different order for each new segment of the game. I also didn't want the same sentences to be used, so I created arrays of sentence options using each punctuation mark that could then be randomized. Finally, there are 5 different hallway options that make up the segments of the game. I needed to randomize which order those hallway options appeared in the game so the experience wasn't the same every time you played the game. Having the randomize function made it easy to do all these. Usually I just used an array of numbers, one for each option that the array represented. Then I made if statements to get the game to do different things based on the number produced from the randomizing function.

Here's an example:

var randomizeGameScreen = [1,2,3,4,5];

function renderGameScreen() {

randomizeGameScreen.randomize();

if (randomizeGameScreen[0] === 1) {

document.getElementById("feedback1").innerHTML="Collect Items";

addScorePossible();

document.getElementById("gameScreen").src="hallPractice.jpg";

} else if (randomizeGameScreen[0] === 2) {

document.getElementById("feedback1").innerHTML="Pause";

document.getElementById("gameScreen").src="hallPractice1.jpg";

} else if (randomizeGameScreen[0] === 3) {

document.getElementById("feedback1").innerHTML="Go Through Door";

document.getElementById("gameScreen").src="hallPractice.jpg";

} else if (randomizeGameScreen[0] === 4) {

document.getElementById("feedback1").innerHTML="Door and Collect";

document.getElementById("gameScreen").src="hallPractice1.jpg";

addScorePossible();

} else if (randomizeGameScreen[0] === 5) {

document.getElementById("feedback1").innerHTML="Turn Left";

document.getElementById("gameScreen").src="hallPractice.jpg";

}

}

Anyways, it is working out. I've also fiddled around with backgrounds and characters to see if the randomizing and if statements worked with the graphics, and it seems to be working well (you can see the graphic testing in the example above where a different background image is being displayed. I'll be inserting the real graphics for next week. I think it should be pretty easy to plug in.