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

145

←

Prev Next

→

Space... canvas 330 by 320 grid 32 sectors,each se..ALL
Developer User18896｜Date and time 24/2/26 12:28:53
Build time 7.756 sec｜Game capacity 1.892KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Colorful Grid Game</title>
<script>
window.onload = function() {
  // Set up canvas
  const mainCanvas = document.getElementById("mainCanvas");
  const ctx = mainCanvas.getContext("2d");
  const sectors = 32;
  const gridSize = mainCanvas.width / sectors;

// Initialize game
  let currentSector = 1;
  drawSector(currentSector);

// Function to draw each sector with random colors
  function drawSector(sector) {
    ctx.clearRect(0, 0, mainCanvas.width, mainCanvas.height);
    for (let x = 0; x < sectors; x++) {
      for (let y = 0; y < sectors; y++) {
        ctx.fillStyle = randomColor();
        ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
      }
    }
    ctx.font = "20px Arial";
    ctx.fillStyle = "black";
    ctx.fillText("Sector " + sector, 10, 25);
  }

// Function to generate random colors
  function randomColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
  }

// Navigation buttons
  const leftBtn = document.getElementById("leftBtn");
  const rightBtn = document.getElementById("rightBtn");

leftBtn.addEventListener("click", function() {
    if (currentSector > 1) {
      currentSector--;
      drawSector(currentSector);
    }
  });

rightBtn.addEventListener("click", function() {
    if (currentSector < sectors) {
      currentSector++;
      drawSector(currentSector);
    }
  });

// back button
  const backBtn = document.getElementById("backBtn");

backBtn.addEventListener("click", function() {
    drawSector(currentSector);
  });
}
</script>
</head>
<body>
<canvas id="mainCanvas" width="320" height="320"></canvas>
<button id="leftBtn">←</button>
<button id="rightBtn">→</button>
<button id="backBtn">Back</button>
</body>
</html>