A sandbox game we’re you can place bricks wood and stone on the grid double tap to remove and click on a grid to place's game

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

No:14310

←

Prev Next

→

A sandbox game we’re you can place bricks wood and..ALL
Developer unknown｜Date and time 23/8/31 21:29:29
Build time 22.9 sec｜Game capacity 2.878KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Sandbox Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f2f2f2;
    }
    canvas {
      display: block;
      background-color: #fff;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

canvas.addEventListener("click", handleGridClick);
    canvas.addEventListener("dblclick", handleGridDoubleClick);

function drawGrid() {
      for (var i = 0; i < cols; i++) {
        for (var j = 0; j < rows; j++) {
          var gridType = grid[i][j].type;
          var x = i * gridWidth;
          var y = j * gridHeight;

if (gridType === "brick") {
            ctx.fillStyle = "#A52A2A"; // Brick color
          } else if (gridType === "wood") {
            ctx.fillStyle = "#8B4513"; // Wood color
          } else if (gridType === "stone") {
            ctx.fillStyle = "#A9A9A9"; // Stone color
          } else {
            ctx.fillStyle = "#fff"; // Empty color
          }

ctx.fillRect(x, y, gridWidth, gridHeight);
        }
      }
    }

function handleGridClick(event) {
      var rect = canvas.getBoundingClientRect();
      var clickX = event.clientX - rect.left;
      var clickY = event.clientY - rect.top;
      var gridX = Math.floor(clickX / gridWidth);
      var gridY = Math.floor(clickY / gridHeight);

if (gridX >= 0 && gridX < cols && gridY >= 0 && gridY < rows) {
        if (grid[gridX][gridY].type === "empty") {
          grid[gridX][gridY].type = "brick"; // Place brick
        } else {
          grid[gridX][gridY].type = "empty"; // Remove existing item
        }
      }
    }

function handleGridDoubleClick(event) {
      var rect = canvas.getBoundingClientRect();
      var clickX = event.clientX - rect.left;
      var clickY = event.clientY - rect.top;
      var gridX = Math.floor(clickX / gridWidth);
      var gridY = Math.floor(clickY / gridHeight);

if (gridX >= 0 && gridX < cols && gridY >= 0 && gridY < rows) {
        grid[gridX][gridY].type = "empty"; // Remove existing item
      }
    }

function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawGrid();
      requestAnimationFrame(gameLoop);
    }

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