AI game creator

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

No:33886

←

Prev Next

→

Retro game
Developer User15940｜Date and time 24/1/6 23:12:43
Build time 34.949 sec｜Game capacity 3.369KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Retro Game</title>
  <style>
    #game-container {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #000;
      color: #fff;
    }
  </style>
</head>
<body>
  <script>
    window.onload = () => {
      const gameContainer = document.getElementById('game-container');
      const gameScoreDisplay = document.createElement('div');
      const startButton = document.createElement('button');

// Game variables
      let score = 0;
      let isGameStarted = false;

// Pictograms
      const gameIcons = {
        player: '🚀',
        obstacle: '⛰️'
      };

// Game functions
      function createGameElement(id, content) {
        const element = document.createElement('div');
        element.id = id;
        element.style.fontSize = '40px';
        element.style.margin = '10px';
        element.innerHTML = content;
        element.style.position = 'absolute';
        return element;
      }

function startGame() {
        isGameStarted = true;
        score = 0;
        gameScoreDisplay.innerHTML = `Score: ${score}`;
        gameScoreDisplay.style.fontSize = '30px';
        gameScoreDisplay.style.position = 'absolute';
        gameScoreDisplay.style.top = '10px';
        gameScoreDisplay.style.right = '10px';
        gameContainer.appendChild(gameScoreDisplay);
        gameContainer.removeChild(startButton);
        spawnObstacle();
      }

function endGame() {
        isGameStarted = false;
        gameContainer.removeChild(gameScoreDisplay);
        gameContainer.appendChild(startButton);
        startButton.innerText = 'Play Again';
        startButton.addEventListener('click', startGame);
      }

function updateScore() {
        score++;
        gameScoreDisplay.innerHTML = `Score: ${score}`;
      }

function spawnObstacle() {
        if (!isGameStarted) return;

const obstacle = createGameElement('obstacle', gameIcons.obstacle);
        obstacle.style.left = '100vw';
        obstacle.style.top = `${Math.random() * 90 + 5}vh`;
        gameContainer.appendChild(obstacle);

const obstacleMovementInterval = setInterval(() => {
          if (!isGameStarted) {
            clearInterval(obstacleMovementInterval);
            return;
          }

obstacle.style.left = `${parseInt(obstacle.style.left) - 10}px`;
          const playerPosition = parseInt(player.style.top);
          const obstaclePosition = parseInt(obstacle.style.top);

if (
            parseInt(obstacle.style.left) < 10 &&
            Math.abs(playerPosition - obstaclePosition) < 50
          ) {
            endGame();
          }

if (parseInt(obstacle.style.left) < -10) {
            updateScore();
            gameContainer.removeChild(obstacle);
            spawnObstacle();
          }
        }, 30);
      }

// Game Initialization
      const player = createGameElement('player', gameIcons.player);
      player.style.left = '10px';
      player.style.top = '50vh';
      gameContainer.appendChild(player);

startButton.innerText = 'Start Game';
      startButton.addEventListener('click', startGame);
      gameContainer.appendChild(startButton);
    };
  </script>
  <div id="game-container"></div>
</body>
</html>