AI game creator

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

No:24399

←

Prev Next

→

Movable blocks
Developer User9760｜Date and time 23/11/8 19:38:18
Build time 91.914 sec｜Game capacity 2.493KB｜

Script

Sure! Here's an example of a simple game that uses movable blocks. The blocks can be moved by dragging them with a mouse or by swiping on a touchscreen device.

In this example, we have a game container (`#game-container`) and two movable blocks (`div.block`). The blocks have a red background color and can be dragged around within the game container. The JavaScript code inside the `
` tags handles the touch events (`mousedown` and `mousemove`) for the blocks. When a touch event starts (`mousedown`), it stores the initial position of the block relative to the touch coordinates. Then, during the touch move event (`mousemove`), it calculates the new position of the block based on the current touch coordinates and updates the block's position accordingly. Please note that this implementation assumes touch devices like smartphones. If you want to play the game on a desktop with a mouse, you can modify the event listeners to use `mousedown` and `mousemove` events instead.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an example of a simple game that uses movable blocks. The blocks can be moved by dragging them with a mouse or by swiping on a touchscreen device.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Movable Blocks Game</title>
  <style>
    #game-container {
      width: 320px;
      height: 480px;
      border: 1px solid #000;
      position: relative;
    }

.block {
      width: 50px;
      height: 50px;
      background-color: #f00;
      position: absolute;
      cursor: move;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div class="block" style="top: 100px; left: 100px;"></div>
    <div class="block" style="top: 200px; left: 200px;"></div>
  </div>

// Initialize variables for storing block positions
    var initialX, initialY, currentX, currentY;

// Event listeners for touch events
    for (var i = 0; i < blocks.length; i++) {
      blocks[i].addEventListener('touchstart', touchStart, false);
      blocks[i].addEventListener('touchmove', touchMove, false);
    }

// Touch start event handler
    function touchStart(e) {
      var touch = e.touches[0];
      initialX = touch.clientX - e.target.offsetLeft;
      initialY = touch.clientY - e.target.offsetTop;
    }

// Touch move event handler
    function touchMove(e) {
      e.preventDefault();
      var touch = e.touches[0];
      currentX = touch.clientX - initialX;
      currentY = touch.clientY - initialY;
      e.target.style.top = currentY + 'px';
      e.target.style.left = currentX + 'px';
    }
  </script>
</body>
</html>
```

In this example, we have a game container (`#game-container`) and two movable blocks (`div.block`). The blocks have a red background color and can be dragged around within the game container.

The JavaScript code inside the `<script>` tags handles the touch events (`touchstart` and `touchmove`) for the blocks. When a touch event starts (`touchstart`), it stores the initial position of the block relative to the touch coordinates. Then, during the touch move event (`touchmove`), it calculates the new position of the block based on the current touch coordinates and updates the block's position accordingly.

Please note that this implementation assumes touch devices like smartphones. If you want to play the game on a desktop with a mouse, you can modify the event listeners to use `mousedown` and `mousemove` events instead.