Color Clues Multiplayer Game

Color Clues: Multiplayer Online Board Game with Django Channels

Color Clues is a real-time multiplayer adaptation of the popular board game Hues and Cues. Inspired by the premise of Hues and Cues, players take turns giving abstract clues about a chosen color while others guess from a color grid. Points are awarded based on the accuracy of guesses, adding an element of strategy and competition to the game.

This project served as my introduction to developing real-time multiplayer online games using Django Channels. I gained hands-on experience in sending and receiving data between the consumer and the frontend, a process that proved to be both challenging and rewarding. While the project is still a work in progress, I have made significant strides in refining the user interface and game mechanics.

To kickstart my journey into Django Channels, I followed this tutorial which provided a solid foundation for further development and experimentation.

Color Clues is now available to play on my website!

play game

source code

Log in to game room

As the clue giver, select which color to give clues on

Clue-giver page after players guessed one

Points awarded to players

One of the first hurdles that I faced when creating this game was developing my own adaptation of the board game. Rather than hard-coding 480 color tiles, I used a simple nested loop:

const colorGrid = document.getElementById("color-grid");

for (let i = 0; i < 17; i++) {
    const row = document.createElement("div");
    row.className = "color-row";

    for (let j = 0; j < 31; j++) {
        const col = document.createElement("div");
        col.className = "color-col";
        col.setAttribute("data-row", i);
        col.setAttribute("data-col", j);
        if (i === 0) {
            col.style.backgroundColor = `black`;
            col.style.color = 'white';
            col.style.textAlign = 'center';
            if (j !== 0) {
                col.textContent = j.toString();
            }
            col.className = "grid-col";
        } else if (j === 0) {
            col.style.backgroundColor = `black`;
            col.style.color = 'white';
            col.style.textAlign = 'center';
            col.textContent = String.fromCharCode(i + 64);
            col.className = "grid-col";
        } else {
            const hue = Math.round(j * 12);
            const saturation = 100
            const lightness = 15 + Math.round(i * 5);
            col.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
        }
        row.appendChild(col);
    }
    colorGrid.appendChild(row);
}

As we can see, I simply changed the background color of each tile square by calculating the hue of the color from the row value (j) and the lightness of the color from the column value (i).