A space exploration game's game

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

No:30386

←

Prev Next

→

A space exploration game
Developer User14752｜Date and time 23/12/21 10:09:32
Build time 14.099 sec｜Game capacity 4.803KB｜

Script

Coins: 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;}
        canvas {display: block;}
        button {font-size: 16px; margin: 10px;}
        #score {font-size: 18px; margin: 10px;}
    </style>
    <title>Space Exploration Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <div id="score">Coins: <span id="coinCount">0</span></div>
    <button onclick="moveSpaceship('left')">Left</button>
    <button onclick="moveSpaceship('up')">Up</button>
    <button onclick="moveSpaceship('right')">Right</button>
    <button onclick="moveSpaceship('down')">Down</button>
    <button onclick="buyUpgrade()">Buy Upgrade</button>

const spaceship = {
            x: 50,
            y: canvas.height / 2,
            speed: 5,
        };

const coinBag = {
            x: 0,
            y: 0,
            radius: 15,
            value: 5,
            isCollected: false,
        };

let coins = 0;
        let upgradeCost = 10;
        let upgradeMultiplier = 2;

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

function drawCoinBag() {
            if (!coinBag.isCollected) {
                ctx.beginPath();
                ctx.arc(coinBag.x, coinBag.y, coinBag.radius, 0, Math.PI * 2);
                ctx.fillStyle = "#f39c12";
                ctx.fill();
                ctx.closePath();
            }
        }

function drawCoins() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#f39c12";
            ctx.fillText("💰", canvas.width - 30, 20);
            ctx.fillText(coins, canvas.width - 15, 20);
        }

function drawUpgradeCost() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#2ecc71";
            ctx.fillText("Upgrade Cost: " + upgradeCost + " 💰", canvas.width - 120, canvas.height - 20);
        }

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

function updateGameArea() {
            clearCanvas();
            drawSpaceship();
            drawCoinBag();
            drawCoins();
            drawUpgradeCost();
        }

function moveSpaceship(direction) {
            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 - 30) spaceship.x += spaceship.speed;
                    break;
                case "down":
                    if (spaceship.y < canvas.height - 20) spaceship.y += spaceship.speed;
                    break;
                default:
                    break;
            }
            checkCollision();
            updateGameArea();
        }

function buyUpgrade() {
            if (coins >= upgradeCost) {
                coins -= upgradeCost;
                upgradeCost *= upgradeMultiplier;
                spaceship.speed += 1; // Upgrade speed
                updateGameArea();
            }
        }

function spawnCoinBag() {
            coinBag.x = Math.random() * (canvas.width - 2 * coinBag.radius) + coinBag.radius;
            coinBag.y = Math.random() * (canvas.height - 2 * coinBag.radius) + coinBag.radius;
            coinBag.isCollected = false;
        }

function checkCollision() {
            const distance = Math.sqrt(
                Math.pow(coinBag.x - spaceship.x, 2) + Math.pow(coinBag.y - spaceship.y, 2)
            );

if (distance < coinBag.radius + 20 && !coinBag.isCollected) {
                coinBag.isCollected = true;
                coins += coinBag.value;
                spawnCoinBag();
            }
        }

// Game loop
        function gameLoop() {
            // Add game logic here (e.g., spawn coins, handle collisions, etc.)
            // For simplicity, we'll just update the game area here.
            updateGameArea();
            requestAnimationFrame(gameLoop);
        }

spawnCoinBag(); // Initial coin bag spawn
        gameLoop();
    </script>
</body>
</html>