Make a game where you jumping over monsters, and shooting them's game

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

No:12712

←

Prev Next

→

Make a game where you jumping over monsters, and s..ALL
Developer User4587｜Date and time 23/8/22 10:57:46
Build time 32.667 sec｜Game capacity 5.143KB｜

Script

Sure! Here's a simple game where you control a character and jump over monsters while shooting them. The game will be represented using pictograms and will be implemented as a single HTML file enclosed in script tags:

To play the game, save the above code into an HTML file (e.g., `game.html`) and open it in a web browser (preferably on a smartphone). The character can be controlled using the "Arrow Up" key (to jump) and the "Space" key (to shoot bullets). You need to jump over or shoot the monsters to avoid colliding with them. If the character collides with a monster, an alert will be shown indicating that the game is over.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Jump & Shoot Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="200"></canvas>

// Character
    const character = {
      x: 50,
      y: canvas.height - 50,
      width: 50,
      height: 50,
      jumping: false,
      velocityY: 0,
      speed: 7,
      jumpingVelocity: 18,
      gravity: 0.7
    };

// Monsters
    const monsters = [
      { x: canvas.width, y: canvas.height - 50, width: 50, height: 50 },
      { x: canvas.width + 200, y: canvas.height - 50, width: 50, height: 50 }
    ];

// Bullets
    const bullets = [];

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

function handleKeyUp(event) {
      if (event.key === "ArrowUp") {
        character.jumping = false;
      }
    }

// Game loop
    function gameLoop() {
      update();
      draw();
      requestAnimationFrame(gameLoop);
    }

// Update game objects
    function update() {
      // Move character
      if (character.jumping) {
        character.velocityY += character.gravity;
        character.y += character.velocityY;

if (character.y > canvas.height - character.height) {
          character.y = canvas.height - character.height;
          character.velocityY = 0;
          character.jumping = false;
        }
      }

// Move monsters
      for (let i = 0; i < monsters.length; i++) {
        monsters[i].x -= character.speed;

if (monsters[i].x < -monsters[i].width) {
          monsters[i].x = canvas.width;
        }

// Check collision between character and monsters
        if (
          character.x < monsters[i].x + monsters[i].width &&
          character.x + character.width > monsters[i].x &&
          character.y < monsters[i].y + monsters[i].height &&
          character.y + character.height > monsters[i].y
        ) {
          alert("Game Over");
          resetGame();
        }
      }

// Move bullets
      for (let i = 0; i < bullets.length; i++) {
        bullets[i].x += character.speed * 2;

// Remove bullets that go off the screen
        if (bullets[i].x > canvas.width) {
          bullets.splice(i, 1);
        }

// Check collision between bullets and monsters
        for (let j = 0; j < monsters.length; j++) {
          if (
            bullets[i].x < monsters[j].x + monsters[j].width &&
            bullets[i].x + 10 > monsters[j].x &&
            bullets[i].y < monsters[j].y + monsters[j].height &&
            bullets[i].y + 10 > monsters[j].y
          ) {
            monsters.splice(j, 1);
          }
        }
      }
    }

// Draw game objects
    function draw() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw character
      ctx.fillRect(character.x, character.y, character.width, character.height);

// Draw monsters
      ctx.fillStyle = "red";
      for (let i = 0; i < monsters.length; i++) {
        ctx.fillRect(monsters[i].x, monsters[i].y, monsters[i].width, monsters[i].height);
      }

// Draw bullets
      ctx.fillStyle = "blue";
      for (let i = 0; i < bullets.length; i++) {
        ctx.fillRect(bullets[i].x, bullets[i].y, 10, 10);
      }
    }

// Shoot bullet from character position
    function shootBullet() {
      bullets.push({ x: character.x + character.width, y: character.y + character.height / 2 });
    }

// Reset game state
    function resetGame() {
      character.x = 50;
      character.y = canvas.height - 50;
      monsters.length = 0;
      createMonsters();
    }

// Create initial monsters
    function createMonsters() {
      monsters.push(
        { x: canvas.width, y: canvas.height - 50, width: 50, height: 50 },
        { x: canvas.width + 200, y: canvas.height - 50, width: 50, height: 50 }
      );
    }

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