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

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

No:51880

109

←

Prev Next

→

Canvas 360 by 360 grid 36 sectors 9 sub sectors mi..ALL
Developer User18896｜Date and time 24/3/16 13:59:36
Build time 7.052 sec｜Game capacity 2.268KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="360" height="360"></canvas>
    
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        const sectorSize = 40;
        const subSectorSize = 13;
        
        const sectors = 36;
        
        // Generate AI pattern for middle sector (subsectors)
        const aiPattern = []
        for(let i = 0; i < 3; i++) {
            const row = [];
            for(let j = 0; j < 3; j++) {
                row.push(Math.round(Math.random()));
            }
            aiPattern.push(row);
        }
        
        function drawGrid() {
            for(let i = 0; i < canvas.width; i += sectorSize) {
                for(let j = 0; j < canvas.height; j += sectorSize) {
                    ctx.strokeRect(i, j, sectorSize, sectorSize);
                }
            }
        }
        
        function drawSubSectors() {
            for(let i = sectorSize; i < canvas.width; i += sectorSize) {
                for(let j = sectorSize; j < canvas.height; j += sectorSize) {
                    for(let si = i; si < i + sectorSize; si += subSectorSize) {
                        for(let sj = j; sj < j + sectorSize; sj += subSectorSize) {
                            ctx.strokeRect(si, sj, subSectorSize, subSectorSize);
                        }
                    }
                }
            }
        }
        
        function drawAI() {
            for(let i = 0; i < 3; i++) {
                for(let j = 0; j < 3; j++) {
                    if(aiPattern[i][j] === 1) {
                        ctx.fillRect(((canvas.width / 2) - sectorSize) + (j * subSectorSize), ((canvas.height / 2) - sectorSize) + (i * subSectorSize), subSectorSize, subSectorSize);
                    }
                }
            }
        }
        
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawGrid();
            drawSubSectors();
            drawAI();
        }
        
        setInterval(update, 1000);
    </script>
</body>
</html>