Make a game with a controls to move right and left's game

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

No:11088

103

←

Prev Next

→

Make a game with a controls to move right and lef..ALL
Developer unknown｜Date and time 23/8/7 21:11:36
Build time 19.09 sec｜Game capacity 2.447KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript and enclosed in script tags. The game allows the player to control a character and move it right and left using touch controls on a smartphone. The game uses pictograms for visual representation.

🚀

This code creates a game with a character represented by a rocket emoji (🚀). The game container is centered on the screen and has touch event listeners for smartphone controls. The game can also be played using the left and right arrow keys on a keyboard. When the character moves, its position is updated, and the character element is translated horizontally using CSS `transform`. The `moveLeft()` and `moveRight()` functions handle the character movement.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #gameContainer {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #f1f1f1;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="gameContainer">
    <div id="character">🚀</div>
  </div>

let position = 0;
    const moveDistance = 20;

function moveLeft() {
      position -= moveDistance;
      character.style.transform = `translateX(${position}px)`;
    }

function moveRight() {
      position += moveDistance;
      character.style.transform = `translateX(${position}px)`;
    }

document.addEventListener('keydown', function(event) {
      if (event.key === 'ArrowLeft') {
        moveLeft();
      } else if (event.key === 'ArrowRight') {
        moveRight();
      }
    });

// Smartphone Touch Controls
    const touchZone = document.getElementById('gameContainer');
    let touchStartX = null;

touchZone.addEventListener('touchstart', function(event) {
      touchStartX = event.touches[0].clientX;
    });

touchZone.addEventListener('touchmove', function(event) {
      if (!touchStartX) return;

const touchCurrentX = event.touches[0].clientX;
      const moveThreshold = 20;

if (touchStartX - touchCurrentX > moveThreshold) {
        moveLeft();
        touchStartX = null;
      } else if (touchCurrentX - touchStartX > moveThreshold) {
        moveRight();
        touchStartX = null;
      }
    });

touchZone.addEventListener('touchend', function() {
      touchStartX = null;
    });
  </script>
</body>
</html>
```