Canvas 360 by 360 grid 36 sectors 9 sub sectors middle sector is ai pattern generator generats patterns for subsectors auto update's game

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

No:51886

←

Prev Next

→

Canvas 360 by 360 grid 36 sectors 9 sub sectors mi..ALL
Developer User18896｜Date and time 24/3/16 14:01:30
Build time 7.816 sec｜Game capacity 2.219KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Canvas Game</title>
</head>
<body>
    <canvas id="canvas" width="360" height="360"></canvas>

const sectors = 36;
        const subSectors = 9;
        const sectorSize = canvas.width / sectors;
        const subSectorSize = sectorSize / 3;

// Generate AI pattern for subsectors
        const aiPatternGenerator = () => {
            return Math.floor(Math.random() * subSectors) + 1;
        }

const drawGrid = () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < sectors; i++) {
                for (let j = 0; j < sectors; j++) {
                    ctx.strokeRect(i * sectorSize, j * sectorSize, sectorSize, sectorSize);
                }
            }
        }

const drawSubSectors = () => {
            for (let i = 0; i < sectors; i++) {
                for (let j = 0; j < sectors; j++) {
                    const subX = i * sectorSize + subSectorSize;
                    const subY = j * sectorSize + subSectorSize;

ctx.strokeRect(subX, subY, subSectorSize, subSectorSize);
                }
            }
        }

const updatePatterns = () => {
            const aiPattern = aiPatternGenerator();

for (let i = 0; i < sectors; i++) {
                for (let j = 0; j < sectors; j++) {
                    const subX = i * sectorSize + subSectorSize;
                    const subY = j * sectorSize + subSectorSize;

ctx.fillStyle = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
                    ctx.fillRect(subX, subY, subSectorSize, subSectorSize);
                    ctx.fillStyle = '#000';
                    ctx.fillText(aiPattern, subX + subSectorSize / 2, subY + subSectorSize / 2);
                }
            }
        }

const startGame = () => {
            drawGrid();
            drawSubSectors();
            updatePatterns();
        }

startGame();
    </script>
</body>
</html>
```