A game where you jump on clouds and don't fall's game

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

No:37403

←

Prev Next

→

A game where you jump on clouds and don't fall
Developer User17064｜Date and time 24/1/21 3:31:11
Build time 10.656 sec｜Game capacity 3.021KB｜

Script

Sure! Here's an example of a simple game where you can jump on clouds without falling. It's implemented as a single HTML file and contains JavaScript code enclosed in script tags. You can play it on a smartphone or any web browser.

To play the game, you can copy the above code into an HTML file (e.g. `game.html`) and open it in a web browser (or on a smartphone). The game will show a canvas where you can jump on the blue clouds as the yellow player. Use the spacebar (on a physical keyboard or a virtual one on a smartphone) to make the player jump. Try to jump on the clouds without falling down!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Jumping on Clouds</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Game variables
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");
    var cloudWidth = 50;
    var cloudHeight = 30;
    var clouds = [
      { x: 100, y: 200 },
      { x: 200, y: 150 },
      { x: 300, y: 250 }
    ];
    var player = { x: 50, y: 50, jumping: false };

// Event listeners
    document.addEventListener("keydown", handleKeyDown);
    document.addEventListener("keyup", handleKeyUp);

// Function to handle key down events
    function handleKeyDown(event) {
      if (event.keyCode === 32 && !player.jumping) {
        player.jumping = true;
        jump();
      }
    }

// Function to handle key up events
    function handleKeyUp(event) {
      if (event.keyCode === 32 && player.jumping) {
        player.jumping = false;
      }
    }

// Function to update game state
    function update() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw clouds
      ctx.fillStyle = "blue";
      for (var i = 0; i < clouds.length; i++) {
        var cloud = clouds[i];
        ctx.fillRect(cloud.x, cloud.y, cloudWidth, cloudHeight);
      }

// Draw player
      ctx.fillStyle = "yellow";
      ctx.fillRect(player.x, player.y, 20, 20);

// Check collision with clouds
      for (var i = 0; i < clouds.length; i++) {
        var cloud = clouds[i];
        if (
          player.x < cloud.x + cloudWidth &&
          player.x + 20 > cloud.x &&
          player.y + 20 < cloud.y + cloudHeight &&
          player.y + 20 > cloud.y
        ) {
          player.jumping = false;
          player.y = cloud.y - 20;
        }
      }

// Update player position
      if (player.jumping) {
        player.y -= 3;
      } else if (player.y < canvas.height - 20) {
        player.y += 1;
      }

// Request animation frame
      requestAnimationFrame(update);
    }

// Function to handle player jump
    function jump() {
      if (player.y >= canvas.height - 20) {
        player.y -= 80;
      }
    }

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