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

No:8946

←

Prev Next

→

poptepic
Developer User4271｜Date and time 23/7/19 21:11:43
Build time 34.819 sec｜Game capacity 3.502KB｜

Script

了解しました。以下にポプテピピックというゲームを作成したプログラムを示します。このゲームでは、ポプテピピックのキャラクターを横に動かして、ミサイルや敵キャラクターを避けながらスコアを競います。

ポプテピピックゲーム

🐱

このプログラムでは、キャラクターの操作には上矢印キー（上に移動）と下矢印キー（下に移動）を使用します。ミサイルや敵キャラクターとキャラクターが衝突するとゲームオーバーとなり、スコアが表示されます。スコアは衝突せずに経過した時間に応じて増加します。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>ポプテピピックゲーム</title>
  <style>
    #player {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 30px;
    }
    
    .missile {
      position: absolute;
      font-size: 30px;
      animation: moveMissile 2s infinite linear;
    }
    
    .enemy {
      position: absolute;
      font-size: 30px;
      animation: moveEnemy 2s infinite linear;
    }
    
    @keyframes moveMissile {
      0% {
        left: 100%;
      }
      
      100% {
        left: -100px;
      }
    }
    
    @keyframes moveEnemy {
      0% {
        left: 100%;
      }
      
      100% {
        left: -100px;
      }
    }
  </style>
</head>
<body>
  <h1>ポプテピピックゲーム</h1>
  <div id="player">🐱</div>
  <script>
    var player = document.getElementById("player");
    var score = 0;

function startGame() {
      document.addEventListener("keydown", movePlayer);
      setInterval(spawnMissile, 1000);
      setInterval(spawnEnemy, 2000);
    }

function spawnMissile() {
      var missile = document.createElement("div");
      missile.className = "missile";
      missile.innerHTML = "💣";
      missile.style.top = randomPosition() + "px";

missile.addEventListener("animationend", function() {
        this.remove();
      });

document.body.appendChild(missile);
    }

function spawnEnemy() {
      var enemy = document.createElement("div");
      enemy.className = "enemy";
      enemy.innerHTML = "👾";
      enemy.style.top = randomPosition() + "px";

enemy.addEventListener("animationend", function() {
        this.remove();
      });

enemy.addEventListener("animationiteration", function() {
        if (collision(player, this)) {
          gameOver();
        } else {
          score++;
        }
      });

document.body.appendChild(enemy);
    }

function randomPosition() {
      return Math.floor(Math.random() * (window.innerHeight - 50));
    }

function collision(element1, element2) {
      var rect1 = element1.getBoundingClientRect();
      var rect2 = element2.getBoundingClientRect();
      return !(
        rect1.top > rect2.bottom ||
        rect1.bottom < rect2.top ||
        rect1.right < rect2.left ||
        rect1.left > rect2.right
      );
    }

function gameOver() {
      alert("Game Over! Your score: " + score);
      location.reload();
    }

startGame();
  </script>
</body>
</html>
```