Atari Pong with a spikeball instead's game

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

No:17024

141

←

Prev Next

→

Atari Pong with a spikeball instead
Developer User7570｜Date and time 23/9/22 6:30:32
Build time 39.429 sec｜Game capacity 4.939KB｜

Script

Sure! Here's a simple implementation of Atari Pong with a spikeball using HTML, CSS, and JavaScript as a single HTML file:

This HTML file creates a canvas element to render the game and uses JavaScript to handle the game logic such as moving the paddles, bouncing the spikeball, and detecting collisions. The game starts automatically when the page loads, and you can control the left and right paddles by swiping up and down on the screen on a smartphone. The spikeball and paddles are represented with simple colored rectangles.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of Atari Pong with a spikeball using HTML, CSS, and JavaScript as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #gameCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .paddle {
            width: 10px;
            height: 60px;
            background-color: white;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        #leftPaddle {
            left: 10px;
        }
        #rightPaddle {
            right: 10px;
        }
        #ball {
            width: 15px;
            height: 15px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

var paddleHeight = 60;
        var paddleWidth = 10;
        var leftPaddleY = (canvas.height - paddleHeight) / 2;
        var rightPaddleY = (canvas.height - paddleHeight) / 2;
        var ballX = canvas.width / 2;
        var ballY = canvas.height / 2;
        var ballSpeedX = -4;
        var ballSpeedY = 4;

// Update game logic
        function update() {
            movePaddle();
            moveBall();
            collisionDetection();
        }

// Move paddles based on touch events
        function movePaddle() {
            canvas.addEventListener("touchmove", function (event) {
                var touchY = event.touches[0].clientY;
                if (touchY >= paddleHeight / 2 && touchY <= canvas.height - paddleHeight / 2) {
                    if (event.target.id === "leftPaddle") {
                        leftPaddleY = touchY - paddleHeight / 2;
                    }
                    if (event.target.id === "rightPaddle") {
                        rightPaddleY = touchY - paddleHeight / 2;
                    }
                }
            });
        }

// Move the ball and check for collision with paddles and walls
        function moveBall() {
            ballX += ballSpeedX;
            ballY += ballSpeedY;

if (ballY < 0 || ballY > canvas.height) {
                ballSpeedY = -ballSpeedY;
            }

if (
                ballX < paddleWidth &&
                ballY > leftPaddleY &&
                ballY < leftPaddleY + paddleHeight
            ) {
                ballSpeedX = -ballSpeedX;
            }

if (
                ballX > canvas.width - paddleWidth &&
                ballY > rightPaddleY &&
                ballY < rightPaddleY + paddleHeight
            ) {
                ballSpeedX = -ballSpeedX;
            }
        }

// Check for collision with paddles and update ball's direction
        function collisionDetection() {
            if (ballX < 0) {
                ballX = canvas.width / 2;
                ballSpeedX = -ballSpeedX;
            }

if (ballX > canvas.width) {
                ballX = canvas.width / 2;
                ballSpeedX = -ballSpeedX;
            }
        }

// Render game elements
        function draw() {
            // Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw paddles
            context.fillStyle = "white";
            context.fillRect(10, leftPaddleY, paddleWidth, paddleHeight);
            context.fillRect(canvas.width - paddleWidth - 10, rightPaddleY, paddleWidth, paddleHeight);

// Draw ball
            context.beginPath();
            context.arc(ballX, ballY, 8, 0, Math.PI * 2, false);
            context.fillStyle = "red";
            context.fill();
            context.closePath();
        }

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

// Start the game
        function startGame() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

gameLoop();
        }

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