mardi 18 août 2015

javascript matching an item to the correct answer(correct city to country)

making a simple game using javascript, once the start button is selected a country will appear and three cities. One of the three cities matches the country and the other two are false. For example, Ireland will appear and London, Paris, Dublin. The player has to select the correct city to match the country, once they select a city a pop up box will appear saying if they won or lost, if the won, they go onto the next round where another country will appear..

this is the code i have at the moment, there is bits missing, i just don't know where to go from here? any help is much appreciated, thanks

    //all my countries
    var countries = ["england", "france", "germany", "hungary", "ireland",    `"italy"`, "norway", "spain", "wales"]

    //gets the screen height and width for the game
    var scnWid,scnHei;
    if (self.innerHeight) // works for all except Internet Explorer
    {
    scnWid = self.innerWidth;
    scnHei = self.innerHeight;
    }
    else if (document.documentElement &&    document.documentElement.clientHeight)
    // internet explorer 6 fix 
    {
    scnWid = document.documentElement.clientWidth;
    scnHei = document.documentElement.clientHeight;
    }
    else if (document.body) // Other versions of ie
    {
    scnWid = document.body.clientWidth;
    scnHei = document.body.clientHeight;
    } 


    //shuffles the country array
    function shuffleArray(arr) {
        var currentIndex = arr.length, temporaryValue, randomIndex ;

    //array hasnt stopped
    while (0 !== currentIndex)


    //find a random element
    randomIndex =Math.floor(Math.random() * currentIndex);

    //swap it with current element

    temporaryValue = arr[currentIndex];
    arr[currentIndex] = arr[randomIndex];
    arr[randomIndex] = temporaryValue;

    //returns the shuffle array
    return arr;
    }







    //variables for the functionality of the game


    var randomCountry;
    var score;
    var count;
    var cityClicked;
    var winningscore;

    //will be passed when the function is called

    function gameInit(){

    //calculate the number of correct
    winningscore = Math.round(3*2)


    //the score variable
    score = 0;

    //is the city clicked yes or no
    cityClicked = false;

    var gameCountries = [];
    var gameCountryCities =[];

    //shuffles the existing countries array

    gameCountries = shuffleArray(countries)

    //loops throught the countries and attached names

    for (i = 0; i<gameCountries.length; i++)
    { 
    document.getElementById('gameCountry').innerHTML += "div class='countryName'    id= '" + gameCountries[i] + "' onclick='CountryClick'(this.id)'><img src='countries/" + gameCountries[i] + ".gif'></div>" ;}
    }

    //reshufflies the cities
    gameCountryCities = shuffleArray(gameCountries)

//loops through the countries and displays the attached cities

for (j = 0; j<gameCountryCities.length; j++ )
{ document.getElementById('gameCity').innerHTML += "<div class='countrycity' id='country-" + gameCountryCities[j] + "' onclick='cityClick(this.id)'><img src= 'cities/" + gameCountryCities[j] + ".gif'></div>" ;
}
}


//when a city is clicked

function cityClick(cityClickedId)
{
if (cityClicked == true)
{
//does the city and country match
if "country-" + selectedCity == cityClickedId)

{
    //add one to the the score

score = score +1;

//show the pop up and score

document.getElementById("gamePopup").style.display = "block";
document.getElementById("gamePopup").style.height = scnHei*2;
document.getElementById("gamePopup").style.display = "block";
document.getElementById("gamePopup").style.top = scnHei+150;

//GAME





//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 pop up within the score

document.getElementById("popupBox").innerHTML = 
"<div>Game Over</div<div>" + gameMessage +
"</div><div>Your Score is : " + score 
+ "</div>";

//show the game over pop up with the score

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

}




Aucun commentaire:

Enregistrer un commentaire