Make a game were you can place blocks and delete them to build's game

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

No:11219

142

←

Prev Next

→

Make a game were you can place blocks and delete t..ALL
Developer unknown｜Date and time 23/8/8 18:04:05
Build time 31.638 sec｜Game capacity 3.635KB｜

Script

Sure! I've created a simple game where you can place and delete blocks to build structures. The game is designed to be played on a smartphone and uses pictograms for the blocks. Here's the code for the single HTML file:

To play the game, simply save the above code into a file with an `.html` extension, open it with a web browser on your smartphone, and start building by clicking on the canvas. You can select blocks from the options at the bottom of the page by tapping on the corresponding pictogram. To delete a block, long-press or right-click on it. Additionally, there is a toggle build mode button to switch between building and deleting modes. Enjoy building with blocks!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Block Builder Game</title>
  <style>
    #canvas {
      width: 100%;
      height: 400px;
      border: 2px solid black;
      position: relative;
    }
    .block {
      width: 48px;
      height: 48px;
      position: absolute;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="canvas">
    
  </div>

function addBlock(event) {
      var blockType = event.target.dataset.blockType;
      var block = document.createElement("div");
      block.className = "block";
      block.style.backgroundImage = "url('block-icons/" + blockType + ".svg')";
      block.style.left = event.clientX - canvas.offsetLeft - 24 + "px"; // Adjust position to center
      block.style.top = event.clientY - canvas.offsetTop - 24 + "px"; // Adjust position to center

// Handle block deletion on click
      block.addEventListener("click", function() {
        if (!isBuilding) {
          deleteBlock(block);
        }
      });

canvas.appendChild(block);
      blocksMap[block] = blockType;
    }

function deleteBlock(block) {
      canvas.removeChild(block);
      delete blocksMap[block];
    }

function initializeBlockSelection() {
      var blockButtons = document.querySelectorAll(".block-selection");

Array.from(blockButtons).forEach(function(button) {
        button.addEventListener("click", function(event) {
          if (isBuilding) {
            currentBlock = event.target;
          }
        });
      });
    }

function initializeCanvasInteraction() {
      canvas.addEventListener("click", function(event) {
        if (isBuilding && currentBlock) {
          addBlock(event);
        }
      });

canvas.addEventListener("contextmenu", function(event) {
        event.preventDefault();

if (!isBuilding) {
          var clickedBlock = event.target;
          deleteBlock(clickedBlock);
        }
      });
    }

// Start the game by initializing interactions
    initializeBlockSelection();
    initializeCanvasInteraction();
  </script>

<div id="block-selection-options" style="text-align: center;">
    <button class="block-selection" data-block-type="brick">🧱</button>
    <button class="block-selection" data-block-type="wood">🌲</button>
    <button class="block-selection" data-block-type="stone">🗿</button>
    <button class="block-selection" data-block-type="glass">🔹</button>
  </div>
</body>
</html>
```