AI game creator

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

No:24400

←

Prev Next

→

Movable blocks
Developer User9760｜Date and time 23/11/8 19:38:36
Build time 94.815 sec｜Game capacity 2.329KB｜

Script

Sure, here's a simple game using movable blocks implemented as a single HTML file:

In this game, there are two movable blocks represented by `<div>` elements with the "block" class. These blocks are initially positioned at the top-left corner of the screen and have a red background color. You can touch and drag the blocks on a smartphone screen. The JavaScript code uses touch event listeners to handle mousedown and mousemove events. When you touch an individual block, it calculates the initial touch position relative to the block's current position. As you continue to move your finger, the block's position is updated accordingly. Note: The game is interactive and can be played as a finished game, allowing you to move the blocks using touch gestures on a smartphone screen.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple game using movable blocks implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* Define block styles */
    .block {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>

// Add event listeners for touch events
      block1.addEventListener('touchstart', handleTouchStart, false);
      block1.addEventListener('touchmove', handleTouchMove, false);

block2.addEventListener('touchstart', handleTouchStart, false);
      block2.addEventListener('touchmove', handleTouchMove, false);

// Coordinate variables for touch events
      var initialX = null;
      var initialY = null;

function handleTouchStart(event) {
        initialX = event.touches[0].clientX - parseInt(event.target.style.left);
        initialY = event.touches[0].clientY - parseInt(event.target.style.top);
      }

function handleTouchMove(event) {
        event.preventDefault();
        if (initialX === null || initialY === null) {
          return;
        }

var currentX = event.touches[0].clientX - initialX;
        var currentY = event.touches[0].clientY - initialY;

event.target.style.left = currentX + 'px';
        event.target.style.top = currentY + 'px';
      }
    };
  </script>

</body>
</html>
```

You can touch and drag the blocks on a smartphone screen. The JavaScript code uses touch event listeners to handle touchstart and touchmove events. When you touch an individual block, it calculates the initial touch position relative to the block's current position. As you continue to move your finger, the block's position is updated accordingly.

Note: The game is interactive and can be played as a finished game, allowing you to move the blocks using touch gestures on a smartphone screen.