flappy monkey with pipe Obstacles's game

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

No:10221

111

←

Prev Next

→

flappy monkey with pipe Obstacles
Developer User4498｜Date and time 23/7/29 12:43:59
Build time 19.699 sec｜Game capacity 4.329KB｜

Script

Sure! Here's an example of a Flappy Monkey game using JavaScript and pictograms, implemented as a single HTML file:

In this game, you control a monkey and your goal is to pass through the pipe obstacles by pressing the spacebar or the up arrow key to make the monkey flap and avoid collisions. The score increases each time you pass a pipe, and the game ends when you collide with a pipe or hit the ground.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a Flappy Monkey game using JavaScript and pictograms, implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
   <title>Flappy Monkey</title>
   <style>
      canvas {
         border: 1px solid black;
      }
   </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 score = 0;
      var gravity = 0.8;
      var jumpForce = 12;
      
      // Monkey object
      var monkey = {
         x: 50,
         y: canvas.height / 2,
         width: 50,
         height: 50,
         velocity: 0,
         
         draw: function() {
            var monkeyImg = new Image();
            monkeyImg.src = "monkey.png";
            ctx.drawImage(monkeyImg, this.x, this.y, this.width, this.height);
         },
         
         flap: function() {
            this.velocity -= jumpForce;
         },
         
         update: function() {
            this.velocity += gravity;
            this.y += this.velocity;
            
            if (this.y >= canvas.height - this.height) {
               this.y = canvas.height - this.height;
               gameOver();
            }
         }
      };
      
      // Pipe object
      function Pipe(x) {
         this.x = x;
         this.yTop = 0;
         this.heightTop = Math.random() * (canvas.height / 2 - 100) + 100;
         this.yBottom = this.heightTop + 150;
         this.heightBottom = canvas.height - this.yBottom;
         this.width = 100;
         this.isPassed = false;
         
         this.draw = function() {
            var pipeTopImg = new Image();
            var pipeBottomImg = new Image();
            pipeTopImg.src = "pipeTop.png";
            pipeBottomImg.src = "pipeBottom.png";
            
            ctx.drawImage(pipeTopImg, this.x, this.yTop, this.width, this.heightTop);
            ctx.drawImage(pipeBottomImg, this.x, this.yBottom, this.width, this.heightBottom);
         };
         
         this.update = function() {
            this.x -= 2;
            
            if (this.x + this.width <= 0) {
               this.isPassed = true;
            }
         };
      }
      
      // Game objects
      var pipes = [];
      
      // Functions
      function createPipe() {
         var pipe = new Pipe(canvas.width);
         pipes.push(pipe);
      }
      
      function removePassedPipes() {
         pipes = pipes.filter(function(pipe) {
            return !pipe.isPassed;
         });
      }
      
      function updateGame() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         
         for (var i = 0; i < pipes.length; i++) {
            pipes[i].update();
            pipes[i].draw();
            
            if (collidedWithPipe(pipes[i])) {
               gameOver();
            }
            
            if (pipes[i].x === canvas.width / 2 - pipes[i].width / 2 && !pipes[i].isPassed) {
               score++;
               pipes[i].isPassed = true;
            }
         }
         
         monkey.update();
         monkey.draw();
         
         ctx.font = "20px Arial";
         ctx.fillText("Score: " + score, 10, 30);
         
         requestAnimationFrame(updateGame);
      }
      
      function collidedWithPipe(pipe) {
         return monkey.x + monkey.width >= pipe.x &&
                monkey.x <= pipe.x + pipe.width &&
                (monkey.y <= pipe.yTop + pipe.heightTop ||
                monkey.y + monkey.height >= pipe.yBottom);
      }
      
      function gameOver() {
         alert("Game Over! Your score: " + score);
         location.reload();
      }
      
      function handleKeyPress(event) {
         if (event.keyCode === 32 || event.keyCode === 38) {
            monkey.flap();
         }
      }
      
      createPipe();
      updateGame();
      document.addEventListener("keydown", handleKeyPress);
   </script>
</body>
</html>
```