AI game creator

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

No:40190

←

Prev Next

→

Flappy ninja
Developer Flappy｜Date and time 24/2/1 16:08:24
Build time 19.521 sec｜Game capacity 4.021KB｜

Script

Sure! Here's a simple implementation of the game "Flappy Ninja" using HTML, CSS, and JavaScript:

To use this code, create a new HTML file and copy the above code into it. Save the file with a `.html` extension. You will also need to have `emozi_all/ninja.png` and `emozi_apple.png` files in the same directory as the HTML file to display the pictograms for the game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Sure! Here's a simple implementation of the game "Flappy Ninja" using HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Ninja</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>

// Game initialization
    function startGame() {
      canvas = document.getElementById('gameCanvas');
      context = canvas.getContext('2d');
      ninja = new Ninja();
      gravity = 0.5;
      obstacles = [];
      score = 0;
      gameSpeed = 2;
      spacePressed = false;
      isGameOver = false;

// Event listener for spacebar press
      document.addEventListener('keydown', function (event) {
        if (event.code === 'Space') {
          if (!isGameOver) jump();
          else startGame();
        }
      });

updateGame();
    }

// Update game function
    function updateGame() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      ninja.update();
      ninja.draw();

if (frames % 100 === 0) {
        obstacles.push(new Obstacle());
      }

for (var i = 0; i < obstacles.length; i++) {
        var obstacle = obstacles[i];
        if (obstacle.x + obstacle.width < 0) {
          obstacles.splice(i, 1);
          i--;
        }

obstacle.update();
        obstacle.draw();

if (ninja.isCollision(obstacle)) {
          endGame();
          return;
        }

if (obstacle.x === ninja.x) {
          score++;
        }
      }

context.fillStyle = '#000';
      context.font = '20px Verdana';
      context.fillText('Score: ' + score, 10, 30);

ninja.velocity += gravity;
      ninja.y += ninja.velocity;

if (ninja.y + ninja.height > canvas.height) {
        endGame();
        return;
      }

requestAnimationFrame(updateGame);
    }

// Helper function to make the ninja jump
    function jump() {
      ninja.velocity -= 10;
      spacePressed = true;
    }

// Game over function
    function endGame() {
      isGameOver = true;
      context.fillStyle = '#000';
      context.font = '30px Verdana';
      context.fillText('Game Over!', canvas.width / 2 - 95, canvas.height / 2 - 10);
      context.font = '20px Verdana';
      context.fillText('Press Space to Restart', canvas.width / 2 - 125, canvas.height / 2 + 30);
    }

// Ninja class
    function Ninja() {
      this.x = 50;
      this.y = 150;
      this.width = 50;
      this.height = 50;
      this.velocity = 0;
      this.icon = new Image();
      this.icon.src = 'ninja.png';

this.update = function () {
        this.velocity += gravity;
        this.y += this.velocity;
      };

this.draw = function () {
        context.drawImage(this.icon, this.x, this.y, this.width, this.height);
      };

this.isCollision = function (obstacle) {
        return (
          this.x < obstacle.x + obstacle.width &&
          this.x + this.width > obstacle.x &&
          this.y < obstacle.y + obstacle.height &&
          this.y + this.height > obstacle.y
        );
      };
    }

// Obstacle class
    function Obstacle() {
      this.x = canvas.width;
      this.y = canvas.height - 150;
      this.width = 80;
      this.height = 150;
      this.icon = new Image();
      this.icon.src = 'obstacle.png';

this.update = function () {
        this.x -= gameSpeed;
      };

this.draw = function () {
        context.drawImage(this.icon, this.x, this.y, this.width, this.height);
      };
    }

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

To use this code, create a new HTML file and copy the above code into it. Save the file with a `.html` extension. You will also need to have `ninja.png` and `obstacle.png` files in the same directory as the HTML file to display the pictograms for the game.