Tap to jump. There are obstacles you jump over. You are a square. You can change colours with buttons. Colliding with the obstacles will result in a game over with a restart button.'s game

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

No:11469

139

←

Prev Next

→

Tap to jump. There are obstacles you jump over. Yo..ALL
Developer User3943｜Date and time 23/8/10 7:29:06
Build time 22.751 sec｜Game capacity 3.982KB｜

Script

Sure, here's an example of a simple game implementation in a single HTML file using JavaScript, enclosed in script tags:

To play the game, you can copy the entire code into an HTML file and open it in a web browser. The game will run in a smartphone-like interface and you can tap anywhere on the game container to make the square jump. There are buttons to change the color of the square, and colliding with the obstacles will result in a game over with a restart button.

←

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 implementation in a single HTML file using JavaScript, enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Jumpy Square Game</title>
  <style>
    #game-container {
      position: relative;
      width: 320px;
      height: 480px;
      border: 1px solid black;
      margin: 0 auto;
      overflow: hidden;
    }
    #player {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: red;
      top: 50%;
      left: 50px;
      transition: top 0.2s;
    }
    .obstacle {
      position: absolute;
      width: 50px;
      height: 200px;
      background-color: gray;
      bottom: 0;
      transition: left 2s;
    }
  </style>
</head>
<body>
  <div id="color-buttons">
    <button onclick="changeColor('red')">Red</button>
    <button onclick="changeColor('green')">Green</button>
    <button onclick="changeColor('blue')">Blue</button>
  </div>
  <div id="game-container" onclick="jump()">
    <div id="player"></div>
  </div>
  <button id="restart-button" onclick="restartGame()" style="display: none;">Restart</button>

document.addEventListener("DOMContentLoaded", function() {
      player = document.getElementById("player");
      gameContainer = document.getElementById("game-container");
      obstacles = [];
      restartButton = document.getElementById("restart-button");
      restartButton.style.display = "none";

startGame();
    });

function startGame() {
      obstacles = [];
      player.style.top = "50%";

gameInterval = setInterval(updateGame, 20);
      createObstacle();
    }

function createObstacle() {
      var obstacle = document.createElement("div");
      obstacle.className = "obstacle";
      obstacle.style.left = "100%";

gameContainer.appendChild(obstacle);
      obstacles.push(obstacle);
    }

function updateGame() {
      var playerTop = parseFloat(player.style.top);
      player.style.top = (playerTop >= 300 ? 300 : playerTop + 1) + "px";

for (var i = 0; i < obstacles.length; i++) {
        var obstacle = obstacles[i];
        var obstacleLeft = parseFloat(obstacle.style.left);

if (obstacleLeft <= -50) {
          obstacle.parentNode.removeChild(obstacle);
          obstacles.splice(i, 1);
          i--;
        } else {
          obstacle.style.left = (obstacleLeft - 1) + "px";
          if (checkCollision(player, obstacle)) {
            endGame();
            return;
          }
        }
      }
    }

function jump() {
      clearInterval(gameInterval);

var playerTop = parseFloat(player.style.top);
      player.style.top = (playerTop >= 50 ? playerTop - 100 : 50) + "px";

setTimeout(function() {
        gameInterval = setInterval(updateGame, 20);
      }, 300);
    }

function checkCollision(player, obstacle) {
      var playerRect = player.getBoundingClientRect();
      var obstacleRect = obstacle.getBoundingClientRect();

return (
        playerRect.bottom >= obstacleRect.top &&
        playerRect.top <= obstacleRect.bottom &&
        playerRect.right >= obstacleRect.left &&
        playerRect.left <= obstacleRect.right
      );
    }

function endGame() {
      clearInterval(gameInterval);
      restartButton.style.display = "block";
    }

function restartGame() {
      restartButton.style.display = "none";
      startGame();
    }

function changeColor(color) {
      player.style.backgroundColor = color;
    }
  </script>
</body>
</html>
```