AI game creator

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

No:37721

←

Prev Next

→

Asteroids
Developer User17106｜Date and time 24/1/21 13:11:05
Build time 9.805 sec｜Game capacity 2.962KB｜

Script

Sure, here is a simple implementation of the classic game "Asteroids" using HTML, JavaScript, and pictograms. Please note that this is a basic version and can be further enhanced for a fully-functional game:

To play the game, open the HTML file in a web browser (preferably on a smartphone) and use the arrow keys to control the spaceship. The spaceship will move forward, rotate counterclockwise on pressing the left arrow key, and rotate clockwise on pressing the right arrow key.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Asteroids</title>
  <style>
    #gameCanvas {
      border: 2px solid black;
      background: black;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="600" height="400"></canvas>

// Set up initial game state
    let spaceshipX = canvas.width / 2;
    let spaceshipY = canvas.height / 2;
    let spaceshipRotation = 0;

// Function to handle keyboard input for spaceship movement
    function handleKeyPress(event) {
      if (event.key === "ArrowUp") {
        // Move the spaceship forward
        const radians = ((spaceshipRotation - 90) * Math.PI) / 180;
        spaceshipX += Math.cos(radians) * 5;
        spaceshipY += Math.sin(radians) * 5;
      } else if (event.key === "ArrowLeft") {
        // Rotate the spaceship counterclockwise
        spaceshipRotation -= 5;
      } else if (event.key === "ArrowRight") {
        // Rotate the spaceship clockwise
        spaceshipRotation += 5;
      }
    }

// Function to clear the canvas and draw the updated game state
    function drawGame() {
      // Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the spaceship
      const spaceshipSize = 20;
      context.save(); // Save the current drawing state
      context.translate(spaceshipX, spaceshipY); // Set the spaceship position
      context.rotate((spaceshipRotation * Math.PI) / 180); // Rotate the spaceship
      context.fillStyle = "white";
      context.beginPath();
      context.moveTo(0, -spaceshipSize / 2);
      context.lineTo(spaceshipSize / 2, spaceshipSize / 2);
      context.lineTo(-spaceshipSize / 2, spaceshipSize / 2);
      context.closePath();
      context.fill();
      context.restore(); // Restore the previous drawing state
    }

// Add event listener for keyboard input
    document.addEventListener("keydown", handleKeyPress);

// Game loop to continuously update and redraw the game state
    function gameLoop() {
      drawGame();
      requestAnimationFrame(gameLoop);
    }

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