Auto Atari Pong with lasers And 18 Balls's game

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

No:17081

145

←

Prev Next

→

Auto Atari Pong with lasers And 18 Balls
Developer User7570｜Date and time 23/9/22 8:07:07
Build time 55.866 sec｜Game capacity 8.735KB｜

Script

Sure! Here's a simple implementation of an Atari Pong game with lasers and 18 balls, designed for smartphone operation. The game will be played on a canvas element and will use pictograms for visualization. Please note that this is a basic implementation and can be further enhanced and customized.

To play the game, simply copy the above code into a new HTML file and open it with any modern web browser. The game will start automatically, and you can control the player paddle using your smartphone's touch input. Click/tap anywhere on the canvas to shoot lasers. The objective is to hit the balls with the laser while preventing them from passing through your paddle. You earn points for each successful hit and win the game if you reach the maximum score of 10 points. Enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

// Game objects
        const player = {
            x: 0,
            y: canvas.height / 2 - paddleHeight / 2,
            width: paddleWidth,
            height: paddleHeight,
            dy: 0,
            score: 0
        };

const computer = {
            x: canvas.width - paddleWidth,
            y: canvas.height / 2 - paddleHeight / 2,
            width: paddleWidth,
            height: paddleHeight,
            dy: 0,
            score: 0
        };

const balls = [];

const laser = {
            x: 0,
            y: 0,
            width: laserWidth,
            height: laserHeight,
            dx: 0,
            dy: 0,
            visible: false
        };

// Event listeners
        canvas.addEventListener("mousemove", handleMouseMove);
        canvas.addEventListener("click", handleCanvasClick);

// Move player paddle on mouse move
        function handleMouseMove(event) {
            const rect = canvas.getBoundingClientRect();
            player.y = event.clientY - rect.top - player.height / 2;
        }

// Shoot laser on canvas click
        function handleCanvasClick() {
            if (!laser.visible) {
                laser.visible = true;
                laser.x = player.x + player.width;
                laser.y = player.y + player.height / 2 - laser.height / 2;
                laser.dx = laserSpeed;
                laser.dy = 0;
            }
        }

// Create initial balls
        for (let i = 0; i < maxBalls; i++) {
            createBall();
        }

// Create a new ball
        function createBall() {
            const ball = {
                x: canvas.width / 2,
                y: Math.random() * (canvas.height - ballRadius * 2) + ballRadius,
                radius: ballRadius,
                dx: Math.random() > 0.5 ? ballSpeed : -ballSpeed,
                dy: Math.random() > 0.5 ? ballSpeed : -ballSpeed
            };

balls.push(ball);
        }

// Update game objects
        function update() {
            movePlayer();
            moveLaser();
            moveBalls();
            moveComputer();
            detectCollisions();
        }

// Move player paddle
        function movePlayer() {
            player.y += player.dy;

if (player.y < 0) {
                player.y = 0;
            } else if (player.y + player.height > canvas.height) {
                player.y = canvas.height - player.height;
            }
        }

// Move laser
        function moveLaser() {
            if (laser.visible) {
                laser.x += laser.dx;

if (laser.x + laser.width > canvas.width) {
                    laser.visible = false;
                }
            }
        }

// Move balls
        function moveBalls() {
            balls.forEach(ball => {
                ball.x += ball.dx;
                ball.y += ball.dy;

if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
                    ball.dy *= -1;
                }

if (ball.x + ball.radius > canvas.width) {
                    ball.dx *= -1;
                }
            });
        }

// Move computer paddle
        function moveComputer() {
            const computerCenter = computer.y + computer.height / 2;

if (computerCenter > canvas.height / 2 && computerCenter < canvas.height / 2 + paddleSpeed) {
                computer.y = canvas.height / 2 - computer.height / 2;
                computer.dy = 0;
            } else if (computerCenter > player.y + paddleHeight) {
                computer.dy = -paddleSpeed;
            } else if (computerCenter < player.y) {
                computer.dy = paddleSpeed;
            }

computer.y += computer.dy;

if (computer.y < 0) {
                computer.y = 0;
            } else if (computer.y + computer.height > canvas.height) {
                computer.y = canvas.height - computer.height;
            }
        }

// Detect collisions
        function detectCollisions() {
            balls.forEach(ball => {
                // Collisions with player paddle
                if (
                    ball.x - ball.radius < player.x + player.width &&
                    ball.y + ball.radius > player.y &&
                    ball.y - ball.radius < player.y + player.height
                ) {
                    ball.dx *= -1;
                }

// Collisions with computer paddle
                if (
                    ball.x + ball.radius > computer.x &&
                    ball.y + ball.radius > computer.y &&
                    ball.y - ball.radius < computer.y + computer.height
                ) {
                    ball.dx *= -1;
                }

// Collisions with laser
                if (
                    laser.visible &&
                    ball.x - ball.radius < laser.x + laser.width &&
                    ball.y + ball.radius > laser.y &&
                    ball.y - ball.radius < laser.y + laser.height
                ) {
                    ball.dx *= -1;
                    laser.visible = false;
                    player.score++;
                    createBall();

if (player.score >= maxScore) {
                        alert("Congratulations! You won!");
                        resetGame();
                    }
                }
            });
        }

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

// Draw game objects
        function draw() {
            clearCanvas();

// Draw player paddle
            context.fillStyle = "white";
            context.fillRect(player.x, player.y, player.width, player.height);

// Draw computer paddle
            context.fillRect(computer.x, computer.y, computer.width, computer.height);

// Draw balls
            balls.forEach(ball => {
                context.beginPath();
                context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
                context.fillStyle = "white";
                context.fill();
                context.closePath();
            });

// Draw laser
            if (laser.visible) {
                context.fillStyle = "red";
                context.fillRect(laser.x, laser.y, laser.width, laser.height);
            }

// Draw scores
            context.fillStyle = "white";
            context.fillText(`Player: ${player.score}`, 10, 10);
            context.fillText(`Computer: ${computer.score}`, canvas.width - 100, 10);
        }

// Game loop
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

// Reset game
        function resetGame() {
            player.score = 0;
            for (let i = 0; i < balls.length; i++) {
                balls.splice(i, 1);
                i--;
            }
            for (let i = 0; i < maxBalls; i++) {
                createBall();
            }
        }

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