Make a game that's like flappy bird, but there are cannons,bullets and rocks as obstacles.'s game

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

No:43251

←

Prev Next

→

Make a game that's like flappy bird, but there are..ALL
Developer User19164｜Date and time 24/2/15 4:35:42
Build time 19.51 sec｜Game capacity 5.473KB｜

Script

Sure! Here's an example implementation of the game you described using HTML and JavaScript. The game is similar to Flappy Bird but with cannons, bullets, and rocks as obstacles. It's designed to be played on a smartphone.

To use this code, you need to save the pictograms as `emozi_all/bird.png`, `emozi_hamuster.png`, `emozi_dog.png`, and `emozi_all/rock.png` in the same directory as the HTML file. This code creates a canvas-based game where the player controls a bird and tries to avoid cannons, bullets, and rocks. They can make the bird jump by tapping or clicking on the screen. The score increases as the player survives, and the game ends if the bird collides with one of the obstacles.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Cannon Dodge</title>
    <style>
      canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="game" width="320" height="480"></canvas>
    <script>
      /*
        Cannon Dodge - A Flappy Bird inspired game with cannons, bullets, and rocks as obstacles
      */

// Game variables
      var canvas, ctx;
      var bird, cannons, bullets, rocks;
      var gravity = 0.1;
      var score = 0;
      var gameover = false;

// Pictograms
      var birdImg = new Image();
      birdImg.src = 'bird.png';

var cannonImg = new Image();
      cannonImg.src = 'cannon.png';

var bulletImg = new Image();
      bulletImg.src = 'bullet.png';

var rockImg = new Image();
      rockImg.src = 'rock.png';

// Game initialization
      function init() {
        canvas = document.getElementById('game');
        ctx = canvas.getContext('2d');

bird = { x: 80, y: canvas.height / 2 };
        cannons = [];
        bullets = [];
        rocks = [];

// Create initial cannons
        cannons.push({ x: canvas.width, y: 0 });

// Register event listeners
        canvas.addEventListener('click', jump);
        document.addEventListener('keydown', jump);

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

// Game update
      function update() {
        if (gameover) {
          return;
        }

// Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Bird gravity
        bird.y += gravity;

// Draw bird
        ctx.drawImage(birdImg, bird.x, bird.y, 40, 40);

// Generate cannons
        if (frames % 150 === 0) {
          var cannonY = Math.random() * (canvas.height - 200);
          cannons.push({ x: canvas.width, y: cannonY });
        }

// Move cannons
        cannons.forEach(function (cannon, index) {
          cannon.x -= 2;

// Remove cannons outside the canvas
          if (cannon.x + 100 < 0) {
            cannons.splice(index, 1);
          }

// Check collision with bird
          if (
            bird.x < cannon.x + 100 &&
            bird.x + 40 >= cannon.x &&
            (bird.y < cannon.y + 320 || bird.y + 40 > cannon.y + 480)
          ) {
            gameOver();
          }

// Draw cannon
          ctx.drawImage(cannonImg, cannon.x, cannon.y, 100, 480);
        });

// Generate bullets
        if (frames % 100 === 0) {
          var bulletY = Math.random() * (canvas.height - 200);
          bullets.push({ x: canvas.width, y: bulletY });
        }

// Move bullets
        bullets.forEach(function (bullet, index) {
          bullet.x -= 3;

// Remove bullets outside the canvas
          if (bullet.x + 40 < 0) {
            bullets.splice(index, 1);
          }

// Check collision with bird
          if (
            bird.x < bullet.x + 40 &&
            bird.x + 40 >= bullet.x &&
            bird.y < bullet.y + 40 &&
            bird.y + 40 > bullet.y
          ) {
            gameOver();
          }

// Draw bullet
          ctx.drawImage(bulletImg, bullet.x, bullet.y, 40, 40);
        });

// Generate rocks
        if (frames % 200 === 0) {
          rocks.push({ x: canvas.width, y: 0 });
        }

// Move rocks
        rocks.forEach(function (rock, index) {
          rock.x -= 1.5;

// Remove rocks outside the canvas
          if (rock.x + 20 < 0) {
            rocks.splice(index, 1);
          }

// Check collision with bird
          if (
            bird.x < rock.x + 20 &&
            bird.x + 40 >= rock.x &&
            (bird.y < rock.y + 80 || bird.y + 40 > rock.y + 320)
          ) {
            gameOver();
          }

// Draw rock
          ctx.drawImage(rockImg, rock.x, rock.y, 20, 320);
        });

// Increment score
        if (frames % 100 === 0) {
          score++;
        }

// Draw score
        ctx.fillStyle = '#000';
        ctx.font = '20px Arial';
        ctx.fillText('Score: ' + score, 10, 30);
      }

// Game over
      function gameOver() {
        gameover = true;

// Display game over message
        ctx.fillStyle = '#000';
        ctx.font = '30px Arial';
        ctx.fillText('Game Over', canvas.width / 2 - 100, canvas.height / 2);
      }

// Bird jump
      function jump() {
        if (gameover) {
          // Restart game on click after game over
          gameover = false;
          score = 0;
          bird.y = canvas.height / 2;
        }

bird.y -= 40;
      }

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

To use this code, you need to save the pictograms as `bird.png`, `cannon.png`, `bullet.png`, and `rock.png` in the same directory as the HTML file. This code creates a canvas-based game where the player controls a bird and tries to avoid cannons, bullets, and rocks. They can make the bird jump by tapping or clicking on the screen. The score increases as the player survives, and the game ends if the bird collides with one of the obstacles.