Bandana-test-klikani

Testovani klikani a rozpoznavani podle barev

by lithium182

HTML

<div id="clr">zobrazovana barva</div>
<div id="wrapper">klikat zde: </div>
<div id="colors">
    <div id="red" class="guessDivs" style="background: red"></div>
    <div id="green" class="guessDivs" style="background: green"></div>
    <div id="blue" class="guessDivs" style="background: blue"></div>
    <div id="black" class="guessDivs" style="background: black"></div>
</div>
<div id="popisek">Skore: </div>
<div id="score"></div>

CSS

.guessDivs {
    width: 150px;
    height: 150px;
    float:left;
}

#clr {
    width: 100%;
    height: 250px;
    color: white;
}

#wrapper {
    height: 30px;
}

#colors {
    width: 100%
}

#popisek {
    margin-top: 150px;
}

JavaScript

var clrDiv = document.getElementById('clr'),
    scoreDiv = document.getElementById('score'),
    red = document.getElementById('red'),
    green = document.getElementById('green'),
    blue = document.getElementById('blue'),
    black = document.getElementById('black'),
    actualColor = "",
    actualScore = 0;

function init() {
    drawMainColor();
    updateScore();
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function drawMainColor() {
    var rnd = getRandomInt(0, 3);
    switch(rnd) {
        case 0: actualColor = 'red';
            break;
        case 1: actualColor = 'green';
            break;
        case 2: actualColor = 'blue';
            break;
        case 3: actualColor = 'black';
            break;
    }
    clrDiv.style.background = actualColor;
}

function updateScore() {
    scoreDiv.textContent = actualScore;        
}

function colorsClick(e) {
    var id = e.target.getAttribute('id');
    if (id == actualColor) {
        actualScore++;
        drawMainColor();
        updateScore();
    }
    else {
        actualScore--;
        updateScore();
    }
}

red.addEventListener("click", colorsClick, false);
green.addEventListener("click", colorsClick, false);
blue.addEventListener("click", colorsClick, false);
black.addEventListener("click", colorsClick, false);

init();