Make a scrolling background when moving left and right's game

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

No:11096

←

Prev Next

→

Make a scrolling background when moving left and ..ALL
Developer unknown｜Date and time 23/8/7 21:24:34
Build time 21.698 sec｜Game capacity 2.868KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file with JavaScript. The game involves moving a character left and right on a scrolling background using pictograms/icons. It is designed for smartphone operation. Just copy the code below and save it as an HTML file to play the game:

👾

To use the above code, you would need to replace the `background.jpg` URL inside the CSS with the path to your own scrolling background image. Feel free to customize the game further, such as changing the character icon `👾` to any other pictogram/icon you prefer. Please note that the scrolling effect of the background is achieved using CSS animations combined with `position: absolute` and `overflow: hidden` properties. The character movement is handled by detecting touch/click events on the screen and updating its position accordingly.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Scrolling Background Game</title>
  <style>
    #game-container {
      position: relative;
      width: 100%;
      height: 400px;
      overflow: hidden;
    }
    #background {
      position: absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 100%;
      background-image: url('background.jpg');
      background-repeat: repeat-x;
      animation: scrollBackground 10s linear infinite;
    }
    @keyframes scrollBackground {
      0% { left: 0; }
      100% { left: -100%; }
    }
    #character {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 50px;
    }
  </style>
</head>
<body>
  
<div id="game-container">
  <div id="background"></div>
  <div id="character">👾</div>
</div>

// Listen for touch/click events to move the character
  document.addEventListener("touchstart", handleTouchStart);
  document.addEventListener("touchmove", handleTouchMove);

var startTouchX = null;

function handleTouchStart(event) {
    startTouchX = event.touches[0].clientX;
  }

function handleTouchMove(event) {
    if (!startTouchX) return;

var touch = event.touches[0];
    var touchX = touch.clientX;

// Calculate distance and move character accordingly
    var deltaX = touchX - startTouchX;
    var newPosition = characterPosition + deltaX;

// Ensure character stays within the game container
    if (newPosition >= 0 && newPosition <= containerWidth) {
      character.style.left = newPosition + "px";
      characterPosition = newPosition;
    }

// Reset the start position for next touch event
    startTouchX = touchX;
  }
</script>

</body>
</html>
```

Please note that the scrolling effect of the background is achieved using CSS animations combined with `position: absolute` and `overflow: hidden` properties. The character movement is handled by detecting touch/click events on the screen and updating its position accordingly.