AI game creator

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

No:30403

134

←

Prev Next

→

Don't play this
Developer User14752｜Date and time 23/12/21 12:38:57
Build time 18.046 sec｜Game capacity 8.93KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {margin: 0; overflow: hidden;}
        canvas {display: block;}
        button {font-size: 16px; margin: 10px; position: absolute;}
        #score {font-size: 18px; margin: 10px; position: absolute; top: 10px; left: 10px; color: #f39c12;}
    </style>
    <title>Space Exploration Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <div id="score">Score: <span id="scoreCount">0</span></div>
    <button id="leftBtn" onclick="moveSpaceship('left')" style="bottom: 80px; left: 10px;">Left</button>
    <button id="upBtn" onclick="moveSpaceship('up')" style="bottom: 40px; left: 70px;">Up</button>
    <button id="rightBtn" onclick="moveSpaceship('right')" style="bottom: 80px; left: 130px;">Right</button>
    <button id="downBtn" onclick="moveSpaceship('down')" style="bottom: 40px; left: 190px;">Down</button>
    <button id="liftOffBtn" onclick="liftOff()" style="display: none; bottom: 40px; left: 250px;">Lift Off</button>
    <button id="playBtn" onclick="restartGame()" style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px; font-size: 20px;">Play Again</button>

const spaceship = {
            x: 50,
            y: canvas.height / 2,
            speed: 8,
            width: 30,
            height: 20,
            isLanded: false,
        };

const meteors = [];
        const planets = [];

let score = 0;
        let isGameOver = false;
        let isTransitioning = false;

function drawSpaceBackground() {
            ctx.fillStyle = "#000";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "#fff";
            for (let i = 0; i < 50; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                ctx.fillRect(x, y, 2, 2);
            }
        }

function drawSpaceship() {
            ctx.beginPath();
            ctx.rect(spaceship.x, spaceship.y, spaceship.width, spaceship.height);
            ctx.fillStyle = "#3498db";
            ctx.fill();
            ctx.closePath();
        }

function drawMeteors() {
            ctx.fillStyle = "#ff0000";
            for (const meteor of meteors) {
                ctx.beginPath();
                ctx.arc(meteor.x, meteor.y, meteor.radius, 0, Math.PI * 2);
                ctx.fill();
                ctx.closePath();
            }
        }

function drawPlanets() {
            for (const planet of planets) {
                ctx.beginPath();
                ctx.arc(planet.x, planet.y, planet.radius, 0, Math.PI * 2);
                ctx.fillStyle = planet.color;
                ctx.fill();
                ctx.closePath();
            }
        }

function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

function updateGameArea() {
            if (isGameOver) {
                ctx.font = "30px Arial";
                ctx.fillStyle = "#fff";
                ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
                document.getElementById("playBtn").style.display = "block";
                return;
            }

drawSpaceBackground();
            drawSpaceship();
            drawMeteors();
            drawPlanets();

for (const meteor of meteors) {
                meteor.y += meteor.speed;
                checkCollision(meteor);
            }

for (const planet of planets) {
                checkCollision(planet);
            }

meteors.forEach((meteor, index) => {
                if (meteor.y > canvas.height) {
                    meteors.splice(index, 1);
                    spawnMeteor(); // Respawn meteor after it goes out of screen
                    increaseScore();
                }
            });

if (spaceship.isLanded && !isTransitioning) {
                document.getElementById("liftOffBtn").style.display = "block";
            } else {
                document.getElementById("liftOffBtn").style.display = "none";
            }
        }

function moveSpaceship(direction) {
            if (isGameOver || isTransitioning) return;

if (spaceship.isLanded) {
                spaceship.isLanded = false;
                updateGameArea();
                return;
            }

switch (direction) {
                case "left":
                    if (spaceship.x > 0) spaceship.x -= spaceship.speed;
                    break;
                case "up":
                    if (spaceship.y > 0) spaceship.y -= spaceship.speed;
                    break;
                case "right":
                    if (spaceship.x < canvas.width - spaceship.width) spaceship.x += spaceship.speed;
                    break;
                case "down":
                    if (spaceship.y < canvas.height - spaceship.height) spaceship.y += spaceship.speed;
                    break;
                default:
                    break;
            }
            updateGameArea();
        }

function liftOff() {
            if (spaceship.isLanded && !isTransitioning) {
                spaceship.isLanded = false;
                isTransitioning = true;
                document.getElementById("liftOffBtn").style.display = "none";
                updateGameArea();
            }
        }

function spawnMeteor() {
            const meteor = {
                x: Math.random() * canvas.width,
                y: 0,
                radius: Math.random() * 30 + 15, // Increase meteor hitbox size
                speed: Math.random() * 3 + 1,
            };
            meteors.push(meteor);
        }

function spawnPlanet() {
            const planet = {
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                radius: Math.random() * 30 + 20,
                color: getRandomColor(),
                isPlanet: true,
            };
            planets.push(planet);
        }

function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

function increaseScore() {
            score++;
            document.getElementById("scoreCount").textContent = score;
        }

function drawLandedText() {
            ctx.font = "20px Arial";
            ctx.fillStyle = "#fff";
            ctx.fillText("Landed on a Planet! Press Lift Off to take off.", 50, canvas.height - 50);
        }

function transitionToPlanetScreen() {
            clearCanvas();
            drawLandedText();
            setTimeout(() => {
                isTransitioning = false;
                spaceship.isLanded = false;
                updateGameArea();
            }, 2000);
        }

function gameOver() {
            isGameOver = true;
            document.getElementById("playBtn").style.display = "block";
        }

function restartGame() {
            isGameOver = false;
            document.getElementById("playBtn").style.display = "none";
            meteors.length = 0;
            planets.length = 0;
            score = 0;
            spaceship.isLanded = false;
            spawnMeteor();
            spawnPlanet();
            updateGameArea();
        }

function gameLoop() {
            clearCanvas();
            updateGameArea();
            requestAnimationFrame(gameLoop);
        }

// Initial setup
        spawnMeteor();
        spawnPlanet();
        gameLoop();
    </script>
</body>
</html>