Make a game with jumping controls's game

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

No:11084

120

←

Prev Next

→

Make a game with jumping controls
Developer unknown｜Date and time 23/8/7 21:05:06
Build time 29.268 sec｜Game capacity 3.332KB｜

Script

Sure! Here's a simple game implemented as a single HTML file with JavaScript, using the canvas element for rendering:

In this game, you control a player character that can jump to avoid obstacles. The player character is represented by a simple rectangle, and the obstacles are also represented by rectangles. The goal is to avoid colliding with the obstacles for as long as possible. To play the game, simply open the HTML file on a smartphone browser and tap the screen to make the player character jump. Avoid colliding with the obstacles to continue playing. If you collide with an obstacle, an alert will be shown indicating that the game is over, and you can reload the page to play again. Note: The game mechanics implemented here are very minimal for simplicity's sake. You can extend and enhance the game as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here's a simple game implemented as a single HTML file with JavaScript, using the canvas element for rendering:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Jumping Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

// Initialize game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

player = { x: 50, y: canvas.height - 50, width: 50, height: 50, isJumping: false };
      gravity = 1.5;
      jumpForce = 25;

obstacle = { x: canvas.width, y: canvas.height - 50, width: 50, height: 50 };
      obstacleSpeed = 5;

// Register event listeners
      document.addEventListener("keydown", handleKeyDown);

// Start game loop
      setInterval(gameLoop, 20);
    }

// Game loop
    function gameLoop() {
      // Update
      updatePlayer();
      updateObstacle();

// Render
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawPlayer();
      drawObstacle();
    }

// Update player position
    function updatePlayer() {
      if (player.isJumping) {
        player.y -= jumpForce;
        jumpForce -= gravity;
        if (player.y >= canvas.height - player.height) {
          player.y = canvas.height - player.height;
          player.isJumping = false;
        }
      }
    }

// Draw player
    function drawPlayer() {
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }

// Update obstacle position
    function updateObstacle() {
      obstacle.x -= obstacleSpeed;
      if (obstacle.x + obstacle.width < 0) {
        obstacle.x = canvas.width;
      }

// Simple collision detection
      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
      ) {
        alert("Game Over!");
        location.reload();
      }
    }

// Draw obstacle
    function drawObstacle() {
      ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    }

// Handle keydown events
    function handleKeyDown(e) {
      if (e.code === "Space") {
        if (!player.isJumping) {
          player.isJumping = true;
          jumpForce = 25;
        }
      }
    }

// Start the game
    window.onload = init;
  </script>
</body>
</html>
```

To play the game, simply open the HTML file on a smartphone browser and tap the screen to make the player character jump. Avoid colliding with the obstacles to continue playing. If you collide with an obstacle, an alert will be shown indicating that the game is over, and you can reload the page to play again.

Note: The game mechanics implemented here are very minimal for simplicity's sake. You can extend and enhance the game as per your requirements.