Make a game that you jump over things.press space to jump.you got 3 lives.if you get hit then you lose a life.'s game

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

No:30764

←

Prev Next

→

Make a game that you jump over things.press space ..ALL
Developer User12467｜Date and time 23/12/24 3:35:47
Build time 16.716 sec｜Game capacity 3.602KB｜

Script

Sure! Here's an example of a simple game where you control a character and jump over obstacles using the spacebar. The game is played within a single HTML file and utilizes JavaScript for the logic. The game is designed for smartphone operation and uses pictograms for visuals.

To play the game, simply save the code above into a file with an `.html` extension and open it in a web browser on your smartphone. The character will automatically start moving, and you can press the spacebar to make the character jump over the moving obstacle. You have 3 lives, and if you get hit, you lose a life. The game displays your score and lives remaining at the top of the screen. Enjoy!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Jump Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    canvas {
      background-color: #f0f0f0;
      display: block;
    }
  </style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
  // Game variables
  var canvas, context;
  var character, obstacle;
  var score, lives;

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

canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

score = 0;
    lives = 3;

character = {
      x: 50,
      y: canvas.height / 2 - 25,
      width: 50,
      height: 50,
      jumping: false,
      ySpeed: 0
    };

obstacle = {
      x: canvas.width - 100,
      y: canvas.height / 2 - 25,
      width: 50,
      height: 50,
      speed: 5
    };

// Attach space key listener for jumping
    document.addEventListener("keydown", function(event) {
      if (event.keyCode === 32 && !character.jumping) {
        character.jumping = true;
        character.ySpeed = -15;
      }
    });
    
    draw();
  }

// Game loop
  function draw() {
    // Clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

// Update character position
    character.y += character.ySpeed;
    character.ySpeed += 1;
    if (character.y > canvas.height - character.height) {
      character.y = canvas.height - character.height;
      character.jumping = false;
    }

// Update obstacle position
    obstacle.x -= obstacle.speed;
    if (obstacle.x + obstacle.width < 0) {
      obstacle.x = canvas.width + Math.random() * 500;
      score++;
    }

// Collision detection
    if (character.x < obstacle.x + obstacle.width &&
        character.x + character.width > obstacle.x &&
        character.y < obstacle.y + obstacle.height &&
        character.y + character.height > obstacle.y) {
      lives--;
      if (lives <= 0) {
        gameOver();
        return;
      }
      obstacle.x = canvas.width + Math.random() * 500;
    }

// Draw character
    context.fillStyle = "blue";
    context.fillRect(character.x, character.y, character.width, character.height);

// Draw obstacle
    context.fillStyle = "red";
    context.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);

// Display score and lives
    context.fillStyle = "black";
    context.font = "24px Arial";
    context.fillText("Score: " + score, 20, 40);
    context.fillText("Lives: " + lives, canvas.width - 120, 40);

requestAnimationFrame(draw);
  }

function gameOver() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "black";
    context.font = "36px Arial";
    context.fillText("Game Over!", canvas.width / 2 - 100, canvas.height / 2);
  }

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