Please could you create a 2d top down shooter that's pixel art where the player who's a dinosaur has to shoot away meteors.'s game

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

No:12639

←

Prev Next

→

Please could you create a 2d top down shooter that..ALL
Developer User5358｜Date and time 23/8/21 6:32:43
Build time 15.072 sec｜Game capacity 4.9KB｜

Script

Sure! Here's a simple implementation of a 2D top-down shooter game where the player, represented as a dinosaur, has to shoot away meteors using pixel art. This implementation is designed to work on smartphones.

To play the game, you can copy the above code and save it as an HTML file (e.g., `dino_shooter.html`). Then, open the HTML file on your smartphone using any browser that supports JavaScript. The player can control the dinosaur using the arrow keys or by tapping the sides of the screen if using a touch interface. The objective is to shoot away the falling meteors by moving the dinosaur left or right. If a meteor hits the dinosaur, the game will end and display a "Game Over" message.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Dino Shooter</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Set up the player
        var player = {
            x: canvas.width / 2,
            y: canvas.height - 50,
            size: 50,
        };

// Set up meteor variables
        var meteors = [];
        var meteorSize = 25;
        var meteorSpeed = 2;
        var meteorSpawnRate = 1500; // Milliseconds

// Set up input variables
        var isRightPressed = false;
        var isLeftPressed = false;

// Function to handle key down events
        function keyDownHandler(event) {
            if (event.key === "Right" || event.key === "ArrowRight") {
                isRightPressed = true;
            } else if (event.key === "Left" || event.key === "ArrowLeft") {
                isLeftPressed = true;
            }
        }

// Function to handle key up events
        function keyUpHandler(event) {
            if (event.key === "Right" || event.key === "ArrowRight") {
                isRightPressed = false;
            } else if (event.key === "Left" || event.key === "ArrowLeft") {
                isLeftPressed = false;
            }
        }

// Function to handle touch events
        function touchStartHandler(event) {
            if (event.touches[0].clientX > canvas.width / 2) {
                isRightPressed = true;
            } else {
                isLeftPressed = true;
            }
        }

// Function to handle touch end events
        function touchEndHandler(event) {
            isRightPressed = false;
            isLeftPressed = false;
        }

// Set up event listeners for key and touch events
        document.addEventListener("keydown", keyDownHandler);
        document.addEventListener("keyup", keyUpHandler);
        canvas.addEventListener("touchstart", touchStartHandler);
        canvas.addEventListener("touchend", touchEndHandler);

// Function to create and spawn meteors
        function spawnMeteors() {
            var meteor = {
                x: Math.random() * canvas.width,
                y: -meteorSize,
            };
            meteors.push(meteor);
        }

// Function to update the game state
        function update() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Move the player
            if (isRightPressed && player.x < canvas.width - player.size) {
                player.x += 5;
            }
            if (isLeftPressed && player.x > 0) {
                player.x -= 5;
            }

// Draw the player
            ctx.fillStyle = "green";
            ctx.fillRect(player.x, player.y, player.size, player.size);

// Move and draw the meteors
            for (var i = 0; i < meteors.length; i++) {
                var meteor = meteors[i];
                meteor.y += meteorSpeed;
                ctx.fillStyle = "gray";
                ctx.fillRect(meteor.x, meteor.y, meteorSize, meteorSize);

// Check for collision with player
                if (
                    meteor.x < player.x + player.size &&
                    meteor.x + meteorSize > player.x &&
                    meteor.y + meteorSize > player.y &&
                    meteor.y < player.y + player.size
                ) {
                    // Player hit, game over
                    alert("Game Over!");
                    location.reload();
                }

// Remove meteors that are off the screen
                if (meteor.y > canvas.height) {
                    meteors.splice(i, 1);
                    i--;
                }
            }
        }

// Start the game loop
        setInterval(update, 10);

// Start spawning meteors
        setInterval(spawnMeteors, meteorSpawnRate);
    </script>
</body>
</html>
```