AI game creator

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

No:6082

3293

←

Prev Next

→

Retro Game
Developer User3860｜Date and time 23/7/1 16:23:56
Build time 31.092 sec｜Game capacity 3.668KB｜

Script

Sure, here is a simple retro game implementation using JavaScript, HTML, and CSS. It's a classic game where the player controls a spaceship and tries to avoid obstacles while collecting points.

Score: 0

You can save the above code in an HTML file (e.g., `retro_game.html`) and open it in any web browser to play the game. In this game, the player controls the spaceship by touching and moving horizontally on a touchscreen device. The objective is to avoid the randomly generated blue obstacles and collect points as the game progresses. The score is displayed at the top, and the game ends when the player collides with an obstacle. After the game ends, an alert is shown with the final score, and the game restarts automatically.

←

Prev　Next

→ 　

Back　

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

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

Sure, here is a simple retro game implementation using JavaScript, HTML, and CSS. It's a classic game where the player controls a spaceship and tries to avoid obstacles while collecting points.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Retro Game</title>
  <style>
    #game-container {
      position: relative;
      width: 400px;
      height: 600px;
      border: 1px solid black;
      margin: 0 auto;
    }

#player {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: red;
      top: 550px;
      left: 175px;
    }

.obstacle {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: blue;
    }

#score {
      margin-top: 10px;
      text-align: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="player"></div>
  </div>
  <div id="score">Score: 0</div>

// Function to initialize the game
    function startGame() {
      player = { x: 175, y: 550 };
      obstacles = [];
      score = 0;

// Reset the player's position
      document.getElementById('player').style.left = player.x + 'px';

// Start the game loop
      setInterval(updateGame, 20);
      setInterval(generateObstacle, 2000);
    }

// Function to update the game state
    function updateGame() {
      // Move the player left or right based on touch input
      document.addEventListener('touchmove', function(e) {
        player.x = e.touches[0].clientX - 25;
        document.getElementById('player').style.left = player.x + 'px';
      });

// Check for collisions with obstacles
      obstacles.forEach(function(obstacle, index) {
        var playerRect = document.getElementById('player').getBoundingClientRect();
        var obstacleRect = obstacle.getBoundingClientRect();

if (playerRect.left < obstacleRect.right && playerRect.right > obstacleRect.left &&
            playerRect.top < obstacleRect.bottom && playerRect.bottom > obstacleRect.top) {
          // Collision detected!
          clearInterval(updateGame);
          clearInterval(generateObstacle);
          alert('Game Over! Your score: ' + score);
          startGame();
        }

// Move the obstacles downwards
        obstacle.style.top = obstacle.offsetTop + 5 + 'px';

// Remove obstacles when they go off screen
        if (obstacle.offsetTop > 600) {
          obstacle.remove();
          obstacles.splice(index, 1);
        }
      });

// Update the score
      score++;
      document.getElementById('score').textContent = 'Score: ' + score;
    }

// Function to generate obstacles
    function generateObstacle() {
      var obstacle = document.createElement('div');
      obstacle.className = 'obstacle';
      obstacle.style.left = Math.floor(Math.random() * 350) + 'px';
      document.getElementById('game-container').appendChild(obstacle);
      obstacles.push(obstacle);
    }

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