adding a click event to confirm image color javascript

Question

I was writing a javascript game so that everytime 4 different random colors are placed on the screen as images and the player is asked to click on the green color, however I cant find what to write on the click function even after searching so much, also how to I make the images keep changing automatically every few say for example 2 seconds

heres how the game works : when the page loads, 4 blank white images are shown after clicking on the start button 4 different colors take place of the blank image after clicking on the green image the game should say alert something

I used 0-5 code for colors on the script for img src 0.jpg being for white , 1-4 green red blue brown respectively

any help would be appreciated

the code : http://jsfiddle.net/gf2un/1/

JS

var counter = 0;
var greenNumber;

function start() {
    var button = document.getElementById("startButton");
    button.addEventListener("click", generateColor, false);
}

function generateColor() {
    var color;
    var imgCheck = [];
    for (var i = 1; i <= 4; ++i) {

        do
        color = Math.ceil(Math.random() * 4);
        while (imgCheck.indexOf(color) !== -1)
        if (color == 1) greenNumber = i;
        imgCheck[i] = color;

        setImage(i, color);
    }
}

function setImage(rdmNumber, color) {
    var rdmImg = document.getElementById("color" + rdmNumber);
    rdmImg.setAttribute("src", "images//" + color + ".jpg");
    rdmImg.setAttribute("width", "90px");
}

function Click( clickedImage )
{
var theSrc = clickedImage.src;
    if (theSrc = "image/1.jpg")
++counter;
document.getElementById('score').innerHTML = "Score : " + counter;
}

window.addEventListener("load", start, false);

HTML

<center>
    <p>CLICK ON THE GREEN SQUARE</p>
    <p>
    <img id = "color4" src = "images/0.jpg" alt = "box 1 image" width = "90px" onClick = "Click(this)">
    <img id = "color1" src = "images/0.jpg" alt = "box 2 image" width = "90px" onClick = "Click(this)">
    </p>
    <p>
    <img id = "color2" src = "images/0.jpg" alt = "box 3 image" width = "90px" onClick = "Click(this)">
    <img id = "color3" src = "images/0.jpg" alt = "box 4 image" width = "90px" onClick = "Click(this)">
    </p>

    <form action = "#">
        <input id = "startButton" type = "button" value = "Start">
    </form>

    </center>
</body>

Kai Kai · Accepted Answer · 2014-05-02T09:55:54

You are doing it too complex; you don't need to create REAL images. Instead, play with the css a little. It makes the code look more neat, and the player doesn't require to download the images.

Shuffling is easy, when you are using a container.

Add click functions with method addEventListener(). This adds an event to the HTML object, so you can add more than one function to it.

Here's my working version of your game: http://jsfiddle.net/kychan/k3J9b/1/ Try it! No seriously, i made this game for you! Inspect it, copy it or use it fully, it's all yours! I also added lots of comments for you.

Shuffle example:

//    changes the color and shuffles the deck.
function newColor() {
    //    we change the color we want the user to press.
    var rand_color       =    randomValue(colors);
    curColor.innerHTML   =    rand_color;
    //    we also change the color of the span, so it changes the text color.
    curColor.style.color =    rand_color;

    //    we shuffle constant SHUFFLE_MAX times and re-add it to the container.
    for (var i=0; i<SHUFFLE_MAX; i++) {
        container.appendChild( randomValue(boxes) );
    }
}

returns a random value in the array:

function randomValue(array) {
    return array[(Math.floor(Math.random()*array.length))];
}

adding a click event to confirm image color javascript

JS

HTML

1 Answers