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:51884

←

Prev Next

→

Canvas 360 by 360 grid 36 sectors 9 sub sectors mi..ALL
Developer User18896｜Date and time 24/3/16 14:00:45
Build time 5.598 sec｜Game capacity 1.109KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

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

const SECTOR_SIZE = 40;
    const SUBSECTOR_SIZE = 20;

// Draw grid
    for (let x = 0; x < canvas.width; x += SECTOR_SIZE) {
      for (let y = 0; y < canvas.height; y += SECTOR_SIZE) {
        ctx.strokeRect(x, y, SECTOR_SIZE, SECTOR_SIZE);
      }
    }

// Generate pattern for middle sector
    const generatePattern = () => {
      const pattern = Math.floor(Math.random() * 256);
      ctx.fillStyle = `rgb(${pattern},${pattern},${pattern})`;

for (let x = (canvas.width / 2) - (SECTOR_SIZE / 2); x < (canvas.width / 2) + (SECTOR_SIZE / 2); x += SUBSECTOR_SIZE) {
        for (let y = (canvas.height / 2) - (SECTOR_SIZE / 2); y < (canvas.height / 2) + (SECTOR_SIZE / 2); y += SUBSECTOR_SIZE) {
          ctx.fillRect(x, y, SUBSECTOR_SIZE, SUBSECTOR_SIZE);
        }
      }
    }

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