Tap to jump. There are obstacles you jump over. You are a square. You can change colours with buttons.'s game

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

No:11468

←

Prev Next

→

Tap to jump. There are obstacles you jump over. Yo..ALL
Developer User3943｜Date and time 23/8/10 7:27:46
Build time 26.172 sec｜Game capacity 3.739KB｜

Script

Sure! Here's an example of a game implemented as a single HTML file using JavaScript. The game is a simple side-scrolling jumping game where you control a square and need to jump over obstacles. You can change the color of the square using buttons. The game is designed for smartphone operation and includes pictograms. To play the game, tap the screen to jump over obstacles. You can change the color of the square by tapping the buttons with different color choices.

To run the game, simply copy and paste the code into a new HTML file, save it with a `.html` extension, and open it in a web browser (preferably on a smartphone for the full experience). Then you can tap the screen to jump, and use the color buttons to change the color of the square. Enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

To play the game, tap the screen to jump over obstacles. You can change the color of the square by tapping the buttons with different color choices.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Jumping Game</title>
  <style>
    #game {
      position: relative;
      width: 100%;
      height: 400px;
      border: 1px solid black;
      background-color: #f1f1f1;
      overflow: hidden;
    }
    #player {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: red;
    }
    .obstacle {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: black;
    }
    #button-container {
      text-align: center;
      margin-top: 10px;
    }
    .color-button {
      display: inline-block;
      width: 50px;
      height: 50px;
      margin: 5px;
      border-radius: 50%;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <div id="game">
    <div id="player"></div>
  </div>

<div id="button-container">
    <div class="color-button" style="background-color: red" onclick="changeColor('red')"></div>
    <div class="color-button" style="background-color: blue" onclick="changeColor('blue')"></div>
    <div class="color-button" style="background-color: green" onclick="changeColor('green')"></div>
  </div>

// Obstacle creation variables
    var obstacleWidth = 50;
    var obstacleSpeed = 5;
    var obstacleTimeout;
    var obstacleInterval = 2000;

// Event Listeners
    game.addEventListener("click", jump);

// Jump function
    function jump() {
      if (!isJumping) {
        isJumping = true;
        player.style.bottom = jumpHeight + "px";
        jumpTimeout = setTimeout(function() {
          player.style.bottom = "0px";
          isJumping = false;
        }, 500);
      }
    }

// Obstacle creation and movement
    function createObstacle() {
      var obstacle = document.createElement("div");
      obstacle.className = "obstacle";
      obstacle.style.left = game.offsetWidth + "px";
      obstacle.style.bottom = "0px";
      game.appendChild(obstacle);

function startObstacleCreation() {
      obstacleTimeout = setInterval(createObstacle, obstacleInterval);
    }

function stopObstacleCreation() {
      clearInterval(obstacleTimeout);
    }

// Color change functions
    function changeColor(color) {
      player.style.backgroundColor = color;
    }

// Start the game
    startObstacleCreation();
  </script>
</body>
</html>
```