Color-Game/main.js at master · tenthyoung/Color-Game · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
let colors = generateRandomColors(6);
let squares = document.querySelectorAll(".square");
let pickedColor = pickColor();
let colorDisplay = document.getElementById("colorDisplay");
let prompt = document.getElementById("prompt");
let header = document.getElementById("header");
const resetButton = document.getElementById("resetButton");
const EASY_HARD_BTN = document.getElementById("easyHardBtn");
let bottomSquares = document.querySelectorAll(".bottom-square");
let isHard = true;
let isEasy = false;

EASY_HARD_BTN.addEventListener("click", function() {

    if (isHard === true) {
        isHard = false;
        isEasy = true;
        console.log("now the difficulty is easy")
    } else if (isEasy === true) {
        isHard = true;
        isEasy = false;
        console.log("now the difficulty is hard")
    }

    if (isEasy) {
        colors = generateRandomColors(3);

        for (let i = 0; i < 3 ; i++) {
            bottomSquares[i].style.backgroundColor = "#232323";
        }
    } else if (isHard) {
        colors = generateRandomColors(6);
    }

    pickedColor = pickColor();

    colorDisplay.textContent = pickedColor.toUpperCase();

    console.log(squares);
    console.log(colors);

    for (let i = 0 ; i< colors.length; i++ ) {
        squares[i].style.backgroundColor = colors[i];

    }

    resetButton.textContent = "New Colors";
    prompt.textContent = "Guess the right color!";
});

colorDisplay.textContent = pickedColor.toUpperCase();

resetButton.addEventListener("click", function() {
    if (isEasy) {
        colors = generateRandomColors(3);

        for (let i = 0; i < 3 ; i++) {
            bottomSquares[i].style.backgroundColor = "#232323";
        }
    } else if (isHard) {
        colors = generateRandomColors(6);
    }

    pickedColor = pickColor();

    colorDisplay.textContent = pickedColor.toUpperCase();

    for (let i = 0 ; i< squares.length; i++ ) {
        squares[i].style.backgroundColor = colors[i];
    }
    resetButton.textContent = "New Colors";
    prompt.textContent = "Guess the right color!";
})

for (let i = 0; i < squares.length; i++) {
    squares[i].style.backgroundColor = colors[i];

    squares[i].addEventListener("click", function () {
        let clickedColor = this.style.backgroundColor;

        console.log(clickedColor,pickedColor);

        if (clickedColor === pickedColor) {
            prompt.textContent = "Correct!";
            changeColors(clickedColor);
            header.style.backgroundColor = pickedColor;
            resetButton.textContent = "Play Again";
        } else {
            prompt.textContent = "Try Again";
            this.style.backgroundColor = "#232323";
        }
    });

}

function changeColors(color) {
    for(let i = 0; i < colors.length; i++) {
        squares[i].style.backgroundColor = color;
    }
}

function pickColor() {
    let random = Math.floor(Math.random()*colors.length);
    return colors[random];
}

function generateRandomColors(num) {
    let arr = [];

    for(let i = 0; i < num ; i++) {
        arr.push(randomColor());
    }

    return arr;
}

function randomColor() {
    let r = Math.floor(Math.random()*256);
    let g = Math.floor(Math.random()*256);
    let b = Math.floor(Math.random()*256);

    return "rgb(" + r + ", " + g + ", " + b + ")";
}