Fly yourself to the moon in space's game

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

No:17563

116

←

Prev Next

→

Fly yourself to the moon in space
Developer User7720｜Date and time 23/9/23 23:13:04
Build time 33.653 sec｜Game capacity 3.172KB｜

Script

Sure! Here's an example of an HTML game that allows you to control a spaceship and fly to the moon. It uses JavaScript and pictograms for a smartphone-friendly interface. Just save the code below as a ".html" file, open it in a web browser, and you can start playing!

When you run this HTML code in a web browser, you'll see a canvas with a spaceship and a moon pictogram. Tapping the left half of the canvas moves the spaceship up, and tapping the right half moves it down. The objective is to reach the moon at the top of the screen. Once you reach the moon, an alert message will congratulate you. Note: This is a basic example just to show the concept. You can customize and enhance the game as per your requirements. Enjoy flying to the moon!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Fly to the Moon!</title>
    <style>
        body {
            margin: 0;
        }
        #canvas {
            background-color: #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        // Get the canvas element
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

// Spaceship position
        const spaceship = {
            x: 100,
            y: 200,
            speed: 5
        };

// Moon position
        const moon = {
            x: 500,
            y: 50
        };

// Draw spaceship pictogram
        function drawSpaceship() {
            ctx.fillStyle = '#fff';
            ctx.beginPath();
            ctx.moveTo(spaceship.x, spaceship.y);
            ctx.lineTo(spaceship.x - 20, spaceship.y + 20);
            ctx.lineTo(spaceship.x, spaceship.y + 40);
            ctx.lineTo(spaceship.x + 20, spaceship.y + 20);
            ctx.closePath();
            ctx.fill();
        }

// Draw moon pictogram
        function drawMoon() {
            ctx.fillStyle = '#fff';
            ctx.font = '36px sans-serif';
            ctx.fillText('🌕', moon.x, moon.y);
        }

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

// Update spaceship position
        function updateSpaceship() {
            if (spaceship.y > moon.y) {
                // Reached the moon, game over
                clearInterval(gameInterval);
                alert('Congratulations! You made it to the Moon!');
                return;
            }

clearCanvas();
            drawSpaceship();
            drawMoon();
        }

// Handle touch events
        canvas.addEventListener('touchstart', function (e) {
            if (e.touches[0].clientX < canvas.width / 2) {
                // Move spaceship up
                spaceship.y -= spaceship.speed;
            } else {
                // Move spaceship down
                spaceship.y += spaceship.speed;
            }
            e.preventDefault();
        });

// Start the game loop
        const gameInterval = setInterval(updateSpaceship, 1000 / 60);
    </script>
</body>
</html>
```

Note: This is a basic example just to show the concept. You can customize and enhance the game as per your requirements. Enjoy flying to the moon!