AI game creator

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

No:41314

←

Prev Next

→

Sandbox Water
Developer User18502｜Date and time 24/2/6 22:09:08
Build time 8.993 sec｜Game capacity 2.297KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Sandbox Water Game</title>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

canvas {
      border: 2px solid black;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <canvas id="sandbox" width="400" height="400"></canvas>

// Define the size of each cell in the sandbox
    const cellSize = 20;

// Define the colors for the different elements
    const colors = {
      water: 'blue',
      sand: 'yellow',
      rock: 'gray',
    };

// Create the sandbox grid
    const grid = Array.from({ length: canvas.width / cellSize }, () =>
      Array.from({ length: canvas.height / cellSize }, () => 'sand')
    );

// Variable to store the currently selected element
    let selectedElement = 'water';

// Function to handle mouse click events
    function handleClick(event) {
      const { offsetX, offsetY } = event;
      const x = Math.floor(offsetX / cellSize);
      const y = Math.floor(offsetY / cellSize);
      
      // Update the selected cell with the selected element
      grid[y][x] = selectedElement;
      drawGrid();
    }

// Add event listener for mouse clicks
    canvas.addEventListener('click', handleClick);

// Function to draw the sandbox grid on the canvas
    function drawGrid() {
      context.clearRect(0, 0, canvas.width, canvas.height);

for (let y = 0; y < grid.length; y++) {
        for (let x = 0; x < grid[y].length; x++) {
          const element = grid[y][x];
          const color = colors[element];

context.fillStyle = color;
          context.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
        }
      }
    }

// Function to handle the game loop
    function gameLoop() {
      // Implement the game logic here

// Redraw the sandbox grid
      drawGrid();

// Call the game loop recursively
      requestAnimationFrame(gameLoop);
    }

// Start the game loop
    gameLoop();
  </script>
</body>
</html>