I am making a simple game using javascript. The game essentially is matching the correct colour to the item of food. For example, there is 5 items of food on a picnic blanket and 5 colours written out. The player has to match the correct colour to the food. I feel i have all the correct code, but when i started styling it, everything disappeared and now i can't get it working again. SO i dont know where i have gone missing! i have a jfiddle with all the code, but the images don't appear (i dont know how to add them on jfiddle) any help is much appreciated!
http://jsfiddle.net/febidrench/395hvqqu/ this is the jfiddle
this is the javascript
var colours = ["Red", "Pink", "Purple", "Yellow", "Orange", "Green"];
//this function shuffles our country array
function shuffleArray(arr) {
var currentIndex = arr.length, temporaryValue, randomIndex ;
//while the array hasn't ended
while (0 !== currentIndex) {
//find a random element
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = arr[currentIndex];
arr[currentIndex] = arr[randomIndex];
arr[randomIndex] = temporaryValue;
}
//returns the shuffled array
return arr;
}
//variables for the fuctionality of the game
var selectedFood;
var score;
var count;
var wordClicked;
var winningScore;
//the game init fuction will contain the difficulty level within it that will be passed when the function is called
function gameInit(difficulty) {
// calculates the number of correct
winningScore = Math.round(difficulty/3*2);
// the score variable
score = 0;
//count = the difficulty
count = difficulty;
// is the map clicked yes/no
wordClicked = false;
//gamecountries and gamemaps
var gameFoods = [];
var gameColours = [];
// shuffles the existing countries array
gameFoods = shuffleArray(colours)
//cuts the number of countries to the difficulty level
gameFoods = gameFoods.slice(0, difficulty);
//loops through the countries and displays the attached flags
for (i = 0; i<gameFoods.length; i++ )
{
document.getElementById('gameFoods').innerHTML += "<div class='picnicFoods' id='" + gameFoods[i] + "' onclick='foodClick(this.id)'><img src='food/" + gameFoods[i] + ".gif'></div>" ;
}
//reshuffles the countries
gameColours = shuffleArray(gameCountries)
//loops through the countries and displays the attached maps
for (j = 0; j<gameColours.length; j++ )
{
document.getElementById('gameColour').innerHTML += "<div class='picnicColours' id='map-" + gameColours[j] + "' onclick='colourClick(this.id)'><img src='colours/" + gameColours[j] + ".gif'></div>" ;
}
}
//when a flag is clicked
function foodClick(foodClickedId)
{
//set the mapclicked function is true to stop the function being activated again
colourClicked = true;
//sets the selectedFlag to the id of the clicked flag
selectedFood = foodClickedId;
// removes the flag after 5 seconds after the click
setTimeout(function(){
document.getElementById(foodClickedId).style.display = "none";
}, 5000);
}
//when a map is clicked
function colourClick(colourClickId)
{
//if a flag has been clicked
if (colourClicked == true){
// if there remains elements to match
if (count > 0){
//does the map and flag clicked match
if( "map-" + selectedFood == colourClickId)
{
//add one to the score
score = score + 1;
//remove 1 from the count
count = count - 1;
//show the popup and score
document.getElementById("popupBox").innerHTML =
"<div>Correct</div><div>Your Score is : " + score
+ "</div>";
document.getElementById("gamePopup").style.display = "block";
document.getElementById("gamePopup").style.height = scnHei*2;
document.getElementById("popupBox").style.display = "block";
document.getElementById("popupBox").style.top = scnHei+150;
//if the game isn't over close the popup and let the player continue, this is tracked by the count
if (count != 0)
{
setTimeout(function(){
//hide the related map to the selected flag
document.getElementById("map-" + selectedFood).style.display = "none";
//allow the users to select the next flag in the game.
colourClicked = false;
document.getElementById("gamePopup").style.display = "none";
document.getElementById("popupBox").style.display = "none";
}, 5000);
}
else{
//if the game is over call the game over function
gameOver();
}
}
else {
//if the answer doesn't match do not increase score but still reduce count
score = score ;
count = count - 1;
//show that the player got it wrong and show their score
document.getElementById("popupBox").innerHTML =
"<div>Incorrect</div><div>Your Score is : " + score
+ "</div>";
document.getElementById("gamePopup").style.display = "block";
document.getElementById("gamePopup").style.height = scnHei*2;
document.getElementById("popupBox").style.display = "block";
document.getElementById("popupBox").style.top = scnHei+150;
//if the game isn't over close the popup and let the player continue, this is tracked by the count
if (count != 0)
{
setTimeout(function(){
//remove the correct map so the user cannot select it in further questions but leave the incorrect one
document.getElementById("map-" + selectedFood).style.display = "none";
//allow the user to continue playing the game
colourClicked = false;
document.getElementById("gamePopup").style.display = "none";
document.getElementById("popupBox").style.display = "none";
}, 5000);
}
else{
//else show the game is over
gameOver();
}
}
}
}
}
//if the game has ended
function gameOver (){
//store the win or lose message
var gameMessage;
//if the score is less than the winning score the player loses
if (score < winningScore){
gameMessage = "You Lose"
}
//otherwise they win
else {gameMessage = "You Win"}
//show the game over popup with the score
document.getElementById("popupBox").innerHTML =
"<div>Game Over</div><div>" + gameMessage +
"</div><div>Your Score is : " + score
+ "</div>";
document.getElementById("gamePopup").style.display = "block";
document.getElementById("gamePopup").style.height = scnHei*2;
document.getElementById("popupBox").style.display = "block";
document.getElementById("popupBox").style.top = scnHei+150;
//after 5 seconds redirect the user to the level select menu
setTimeout(function(){
window.location = "level.html";
}, 5000);
}
