Atari Pong and Meteors's game

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

No:17085

150

←

Prev Next

→

Atari Pong and Meteors
Developer User7570｜Date and time 23/9/22 8:12:33
Build time 29.336 sec｜Game capacity 4.8KB｜

Script

Here's a simplified implementation of a game that combines elements of Atari Pong and Meteors. The game can be played on a smartphone and uses pictograms for visual representation. The code is enclosed in script tags and written in JavaScript within a single HTML file.

You can save the above code into a file with a .html extension, and then open it in a web browser to play the game. The game will start immediately, and you can control the paddle's movement by moving your finger on the screen. The objective is to bounce the meteor off the paddle and prevent it from reaching the right side of the screen. Your score increases each time you successfully bounce the meteor. The game ends when the meteor crosses the right edge of the screen, and your final score is displayed in an alert.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Atari Pong & Meteors Game</title>
    <style>
        #gameCanvas {
            background-color: black;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Game state variables
        let canvas;
        let ctx;
        let playerPaddleY;
        let meteorX;
        let meteorY;
        let meteorDirectionX;
        let meteorDirectionY;
        let score;

// Initialize the game
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            playerPaddleY = canvasHeight / 2 - paddleHeight / 2;
            meteorX = canvasWidth / 2;
            meteorY = canvasHeight / 2;
            meteorDirectionX = Math.random() < 0.5 ? -1 : 1;
            meteorDirectionY = Math.random() < 0.5 ? -1 : 1;
            score = 0;

setInterval(updateGame, 10);
            document.addEventListener("mousemove", movePaddle);
        }

// Update game state and render on each frame
        function updateGame() {
            clearCanvas();
            moveMeteor();
            checkCollision();
            drawPaddle();
            drawMeteor();
            drawScore();
        }

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

// Move the player paddle based on mouse movement
        function movePaddle(event) {
            playerPaddleY = event.clientY - paddleHeight / 2;
            if (playerPaddleY < 0) playerPaddleY = 0;
            if (playerPaddleY > canvasHeight - paddleHeight) playerPaddleY = canvasHeight - paddleHeight;
        }

// Move the meteor across the canvas
        function moveMeteor() {
            meteorX += meteorSpeed * meteorDirectionX;
            meteorY += meteorSpeed * meteorDirectionY;

if (
                meteorY + meteorSize >= canvasHeight ||
                meteorY <= 0
            ) {
                meteorDirectionY *= -1;
            }
        }

// Check collision between meteor and paddle
        function checkCollision() {
            if (
                meteorX - ballRadius <= paddleWidth &&
                meteorY + meteorSize >= playerPaddleY &&
                meteorY <= playerPaddleY + paddleHeight
            ) {
                meteorDirectionX *= -1;
                score++;
            }

if (meteorX + ballRadius >= canvasWidth) {
                gameOver();
            }
        }

// Draw the player paddle
        function drawPaddle() {
            ctx.fillStyle = "white";
            ctx.fillRect(paddleWidth, playerPaddleY, paddleWidth, paddleHeight);
        }

// Draw the meteor
        function drawMeteor() {
            ctx.fillStyle = "red";
            ctx.beginPath();
            ctx.arc(meteorX, meteorY, ballRadius, 0, Math.PI * 2);
            ctx.fill();
            ctx.closePath();
        }

// Draw the score
        function drawScore() {
            ctx.fillStyle = "white";
            ctx.font = "16px Arial";
            ctx.fillText("Score: " + score, 8, 20);
        }

// Game over
        function gameOver() {
            clearInterval(updateGame);
            alert("Game Over! Your score: " + score);
            startGame();
        }

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