Garten of Banban: Collect a blue keycard which is located in a random position, use it to unlock the blue door. If you touch the blue door without the keycard, it will say "Need a Keycard!" And if you have the keycard, you will need to run from a pink bird.'s game

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

No:13171

126

←

Prev Next

→

Garten of Banban: Collect a blue keycard which is ..ALL
Developer User4984｜Date and time 23/8/27 7:14:01
Build time 16.683 sec｜Game capacity 4.102KB｜

Script

Sure, I can help you with that! Here's a simple implementation of the game "Garten of Banban" using HTML and JavaScript, optimized for smartphone operation:

To play the game, simply open the HTML file in a web browser on your smartphone. You can control the player's movement by dragging your finger across the screen. The goal is to collect the blue keycard and use it to unlock the blue door. If you touch the door without the keycard, it will display a message saying "Need a Keycard!" If you have the keycard and touch the door, a message will appear congratulating you on winning the game. You also need to avoid the pink bird that moves back and forth on the screen.

←

Prev　Next

→ 　

Back　

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

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

Sure, I can help you with that! Here's a simple implementation of the game "Garten of Banban" using HTML and JavaScript, optimized for smartphone operation:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Garten of Banban</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      canvas {
        background-color: #fafafa;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>

// Initialize the game
      function startGame() {
        canvas = document.getElementById("gameCanvas");
        ctx = canvas.getContext("2d");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        playerX = canvas.width / 2;
        playerY = canvas.height / 2;
        keycardX = Math.random() * canvas.width;
        keycardY = Math.random() * canvas.height;
        doorX = Math.random() * canvas.width;
        doorY = Math.random() * canvas.height;
        birdX = Math.random() * canvas.width;
        birdY = Math.random() * canvas.height;
        birdSpeed = 2;
        isKeycardCollected = false;
        isGameRunning = true;
        
        canvas.addEventListener("touchstart", handleTouchStart, false);
        canvas.addEventListener("touchmove", handleTouchMove, false);

setInterval(updateGame, 20);
      }

// Update the game state
      function updateGame() {
        if (isGameRunning) {
          ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
          if (isKeycardCollected) {
            ctx.fillStyle = "#00ff00";
          } else {
            ctx.fillStyle = "#ff0000";
          }
          ctx.fillRect(playerX, playerY, 50, 50);

// Draw keycard
          ctx.fillStyle = "#0000ff";
          ctx.fillRect(keycardX, keycardY, 20, 20);

// Draw door
          ctx.fillStyle = "#0000ff";
          ctx.fillRect(doorX, doorY, 50, 50);

// Draw bird
          ctx.fillStyle = "#ff00ff";
          ctx.beginPath();
          ctx.arc(birdX, birdY, 20, 0, 2 * Math.PI);
          ctx.closePath();
          ctx.fill();

// Check for collisions
          if (
            playerX < doorX + 50 &&
            playerX + 50 > doorX &&
            playerY < doorY + 50 &&
            playerY + 50 > doorY
          ) {
            if (isKeycardCollected) {
              isGameRunning = false;
              alert("Congratulations! You unlocked the blue door and won the game!");
            } else {
              isGameRunning = false;
              alert("Need a Keycard!");
            }
          }

// Update bird position
          if (birdX + birdSpeed > canvas.width || birdX + birdSpeed < 0) {
            birdSpeed = -birdSpeed;
          }
          birdX += birdSpeed;
        }
      }

// Handle touch events
      function handleTouchStart(event) {
        event.preventDefault();
        playerX = event.touches[0].clientX - 25;
        playerY = event.touches[0].clientY - 25;
      }

function handleTouchMove(event) {
        event.preventDefault();
        playerX = event.touches[0].clientX - 25;
        playerY = event.touches[0].clientY - 25;
      }

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