AI game creator

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

No:34675

←

Prev Next

→

3d flappy bird
Developer User16298｜Date and time 24/1/11 8:15:57
Build time 18.836 sec｜Game capacity 5.432KB｜

Script

Sure! Below is an implementation of a simplified 3D version of the game Flappy Bird using JavaScript and HTML. The game can be played on smartphones and utilizes pictograms for the visuals. Just copy the code into a single HTML file and open it in a web browser on your smartphone to play the game.

Score: 0

Please note that for the code to work, you'll need to replace the `emozi_all/bird.png` file with an actual pictogram or image of a bird. You can find various bird pictograms available online.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>3D Flappy Bird</title>
  <style>
    #container {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 600px;
    }
    
    #bird {
      position: absolute;
      width: 50px;
      height: 50px;
    }
    
    .pillar {
      position: absolute;
      bottom: 0;
      width: 100px;
      height: 100%;
      background-color: green;
      animation: moveRight 2s linear infinite;
    }
    
    @keyframes moveRight {
      0% { transform: translateX(120%); }
      100% { transform: translateX(-100%); }
    }
    
    #score {
      position: fixed;
      top: 10px;
      right: 10px;
      color: white;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="container">
    <img id="bird" src="bird.png" alt="Bird">
  </div>
  
  <div id="score">Score: 0</div>
  
  <script>
    var bird = document.getElementById("bird");
    var container = document.getElementById("container");
    var score = document.getElementById("score");
    var pillars = [];
    var gameRunning = false;
    var birdPosY = 0;
    var gravity = 0.3;
    var jumpForce = 7;
    var scoreValue = 0;
    
    function startGame() {
      resetGame();
      gameRunning = true;
      document.addEventListener('touchstart', handleJump);
      animateGame();
      spawnPillars();
    }
    
    function resetGame() {
      birdPosY = 0;
      pillars = [];
      scoreValue = 0;
      score.innerText = "Score: " + scoreValue;
      bird.style.transform = "translateZ(0px)";
      while (container.firstChild) {
        container.removeChild(container.firstChild);
      }
    }
    
    function animateGame() {
      if (gameRunning) {
        requestAnimationFrame(animateGame);
        updateBird();
        updatePillars();
        checkCollision();
      }
    }
    
    function updateBird() {
      birdPosY += gravity;
      bird.style.transform = "translateZ(" + birdPosY + "px)";
    }
    
    function handleJump() {
      birdPosY -= jumpForce;
    }
    
    function spawnPillars() {
      var pillarGap = 200;
      var containerWidth = container.offsetWidth;
      
      for (var i = 0; i < containerWidth / pillarGap; i++) {
        var pillarHeight = Math.floor(Math.random() * (container.offsetHeight - pillarGap));
        
        var upperPillar = document.createElement('div');
        upperPillar.className = "pillar";
        upperPillar.style.height = pillarHeight + "px";
        
        var lowerPillar = document.createElement('div');
        lowerPillar.className = "pillar";
        lowerPillar.style.height = container.offsetHeight - pillarHeight - pillarGap + "px";
        
        container.appendChild(upperPillar);
        container.appendChild(lowerPillar);
        
        pillars.push({
          upper: upperPillar,
          lower: lowerPillar,
          x: i * pillarGap
        });
      }
    }
    
    function updatePillars() {
      for (var i = 0; i < pillars.length; i++) {
        pillars[i].x -= 2;
        pillars[i].upper.style.transform = "translateX(" + pillars[i].x + "px)";
        pillars[i].lower.style.transform = "translateX(" + pillars[i].x + "px)";
        
        if (pillars[i].x + 100 < 0) {
          container.removeChild(pillars[i].upper);
          container.removeChild(pillars[i].lower);
          pillars.splice(i, 1);
          i--;
        }
      }
      
      if (pillars.length < 5) {
        spawnPillars();
      }
    }
    
    function checkCollision() {
      var birdRect = bird.getBoundingClientRect();
      
      for (var i = 0; i < pillars.length; i++) {
        var upperRect = pillars[i].upper.getBoundingClientRect();
        var lowerRect = pillars[i].lower.getBoundingClientRect();
        
        if (
          birdRect.left < upperRect.right && 
          birdRect.right > upperRect.left && 
          birdRect.top < upperRect.bottom && 
          birdRect.bottom > upperRect.top
        ) {
          gameOver();
        }
        
        if (
          birdRect.left < lowerRect.right && 
          birdRect.right > lowerRect.left && 
          birdRect.top < lowerRect.bottom && 
          birdRect.bottom > lowerRect.top
        ) {
          gameOver();
        }
        
        if (birdRect.bottom >= container.offsetHeight) {
          gameOver();
        }
        
        if (birdRect.top <= 0) {
          birdPosY = 0;
        }
        
        if (birdRect.right >= upperRect.left && !pillars[i].passed) {
          pillars[i].passed = true;
          scoreValue++;
          score.innerText = "Score: " + scoreValue;
        }
      }
    }
    
    function gameOver() {
      gameRunning = false;
      document.removeEventListener('touchstart', handleJump);
      alert("Game Over!\nYour score: " + scoreValue);
    }
    
    // Start the game
    startGame();
  </script>
</body>
</html>
```

Please note that for the code to work, you'll need to replace the `bird.png` file with an actual pictogram or image of a bird. You can find various bird pictograms available online.