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. You are bound to the ground by gravity.'s game

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

No:11470

147

←

Prev Next

→

Tap to jump. There are obstacles you jump over. Yo..ALL
Developer User3943｜Date and time 23/8/10 7:30:40
Build time 23.361 sec｜Game capacity 4.003KB｜

Script

Sure! Here's an example of a simple game that meets your requirements:

You can copy and paste the above code into a single HTML file and open it in a web browser to play the game. The game uses the canvas element to render the graphics. You can tap the spacebar to make the square jump over the obstacles. There are buttons to change the colors of the square, and when you collide with an obstacle, a restart button will appear to restart the game.

←

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 that meets your requirements:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Jump Game</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <br>
    <button onclick="changeColor('red')">Red</button>
    <button onclick="changeColor('blue')">Blue</button>
    <button onclick="changeColor('green')">Green</button>
    <br>
    <button onclick="startGame()">Start</button>
    <button onclick="restartGame()" style="display: none;">Restart</button>
    
    <script>
      var canvas = document.getElementById('gameCanvas');
      var context = canvas.getContext('2d');
      
      var player = {
        x: 50,
        y: canvas.height - 50,
        width: 50,
        height: 50,
        color: 'red',
        dy: 0
      };
      
      var obstacles = [];
      var gravity = 0.5;
      var gameStarted = false;
      var gameOver = false;
      
      function startGame() {
        gameStarted = true;
        obstacles = [];
        player.dy = -10;
        document.getElementById('gameCanvas').focus();
        
        // Generate obstacles every 1 second
        setInterval(function() {
          if (gameStarted && !gameOver)
            generateObstacle();
        }, 1000);
      }
      
      function restartGame() {
        location.reload();
      }
      
      function generateObstacle() {
        var obstacle = {
          x: canvas.width,
          y: canvas.height - 50,
          width: 50,
          height: 50,
          color: 'black',
          dx: -2 // Adjust the speed of obstacles here
        };
        
        obstacles.push(obstacle);
      }
      
      function movePlayer() {
        player.y += player.dy;
        player.dy += gravity;
        
        if (player.y + player.height > canvas.height) {
          player.y = canvas.height - player.height;
          player.dy = 0;
        }
        
        if (player.y < 0) {
          player.y = 0;
        }
      }
      
      function checkCollision() {
        obstacles.forEach(function(obstacle) {
          if (
            player.x < obstacle.x + obstacle.width &&
            player.x + player.width > obstacle.x &&
            player.y < obstacle.y + obstacle.height &&
            player.y + player.height > obstacle.y
          ) {
            gameStarted = false;
            gameOver = true;
            document.getElementById('gameCanvas').blur();
            document.getElementById('gameOver').style.display = 'block';
          }
        });
      }
      
      function updateGame() {
        if (!gameOver) {
          context.clearRect(0, 0, canvas.width, canvas.height);
          
          context.fillStyle = player.color;
          context.fillRect(player.x, player.y, player.width, player.height);
          
          obstacles.forEach(function(obstacle) {
            context.fillStyle = obstacle.color;
            context.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
            
            obstacle.x += obstacle.dx;
          });
          
          movePlayer();
          checkCollision();
          window.requestAnimationFrame(updateGame);
        }
      }
      
      function changeColor(color) {
        player.color = color;
      }
      
      document.addEventListener('keydown', function(event) {
        if (event.key === ' ' || event.key === 'Spacebar') {
          if (player.y === canvas.height - player.height) {
            player.dy = -15; // Adjust jump height here
          }
        }
      });
      
      updateGame();
    </script>
  </body>
</html>
```