Space... canvas 330 by 320 grid 32 sectors,each sector whan enter is a canvas 320 by 320 grid 32 sectors,number each sector above canvas. Bellow canvas enter button to enter sector arrow, buttons to navigate, back button to return each sector is a random groop of colors's game

Click here for free DL of the app version that can save data.

No:46895

162

←

Prev Next

→

Space... canvas 330 by 320 grid 32 sectors,each se..ALL
Developer User18896｜Date and time 24/2/26 12:30:45
Build time 8.613 sec｜Game capacity 2.3KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Color Game</title>
</head>
<body>
    <script>
        const GRID_SIZE = 320;
        const SECTOR_SIZE = 32;

let currentSector = 1;

function generateRandomColor() {
            return "#" + Math.floor(Math.random()*16777215).toString(16);
        }

function drawSector(sectorNumber) {
            let canvas = document.createElement('canvas');
            canvas.width = GRID_SIZE;
            canvas.height = GRID_SIZE;
            canvas.style.border = '1px solid black';
            document.body.appendChild(canvas);

let ctx = canvas.getContext('2d');
            let sectorColors = [];
            for (let i = 0; i < SECTOR_SIZE; i++) {
                sectorColors.push([]);
                for (let j = 0; j < SECTOR_SIZE; j++) {
                    let color = generateRandomColor();
                    sectorColors[i].push(color);
                    ctx.fillStyle = color;
                    ctx.fillRect(i*(GRID_SIZE/SECTOR_SIZE), j*(GRID_SIZE/SECTOR_SIZE), GRID_SIZE/SECTOR_SIZE, GRID_SIZE/SECTOR_SIZE);
                }
            }

let sectorNumberElem = document.createElement('p');
            sectorNumberElem.innerText = `Sector: ${sectorNumber}`;
            document.body.insertBefore(sectorNumberElem, canvas);
        }

function enterSector(sectorNumber) {
            document.body.innerHTML = '';
            drawSector(sectorNumber);

let backBtn = document.createElement('button');
            backBtn.innerText = 'Back';
            backBtn.onclick = function() {
                document.body.innerHTML = '';
                drawNavigationButtons();
            };
            document.body.appendChild(backBtn);
        }

drawNavigationButtons();
    </script>
</body>
</html>