AI game creator

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

No:509

442

←

Prev Next

→

pong
Developer User2996｜Date and time 23/6/15 4:54:07
Build time 48.016 sec｜Game capacity 4.776KB｜

Script

0 : 0

This is a simple implementation of the Pong game using only one HTML file with embedded JavaScript code. The game can be played on smartphones with touch screen controls. The objective of the game is to hit the ball with the paddles and score points by making the ball pass through the opponent’s goal. The player with the highest score at the end of the game wins. The scoreboard is displayed at the center of the screen and updates dynamically as the game progresses. The game also uses emojis to add more fun to the experience.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pong Game</title>
    <style>
        #canvas {
            background-color: black;
        }
        #scoreBoard {
            color: white;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="320" height="480"></canvas>
    <div id="scoreBoard">0 : 0</div>
    <script>
        // Game Variables
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var ball = { x: canvas.width / 2, y: canvas.height / 2, radius: 10, dx: 5, dy: 5 };
        var leftPaddle = { x: 20, y: canvas.height / 2 - 50, width: 10, height: 100, dy: 0 };
        var rightPaddle = { x: canvas.width - 30, y: canvas.height / 2 - 50, width: 10, height: 100, dy: 0 };
        var leftScore = 0;
        var rightScore = 0;

// Event listeners
        document.addEventListener("keydown", keyDownHandler);
        document.addEventListener("keyup", keyUpHandler);

// Event handlers
        function keyDownHandler(e) {
            if (e.keyCode == 38) { // Up Arrow
                rightPaddle.dy = -5;
            } else if (e.keyCode == 40) { // Down Arrow
                rightPaddle.dy = 5;
            } else if (e.keyCode == 87) { // W
                leftPaddle.dy = -5
            } else if (e.keyCode == 83) { // S
                leftPaddle.dy = 5
            }
        }

function keyUpHandler(e) {
            if (e.keyCode == 38 || e.keyCode == 40) {
                rightPaddle.dy = 0;
            } else if (e.keyCode == 87 || e.keyCode == 83) {
                leftPaddle.dy = 0;
            }
        }

// Game Loop
        function draw() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw ball
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
            ctx.fillStyle = "white";
            ctx.fill();
            ctx.closePath();

// Draw left paddle
            ctx.beginPath();
            ctx.rect(leftPaddle.x, leftPaddle.y + leftPaddle.dy, leftPaddle.width, leftPaddle.height);
            ctx.fillStyle = "white";
            ctx.fill();
            ctx.closePath();

// Draw right paddle
            ctx.beginPath();
            ctx.rect(rightPaddle.x, rightPaddle.y + rightPaddle.dy, rightPaddle.width, rightPaddle.height);
            ctx.fillStyle = "white";
            ctx.fill();
            ctx.closePath();

// Update ball position
            ball.x += ball.dx;
            ball.y += ball.dy;

// Check ball collision with walls
            if (ball.y + ball.dy < ball.radius || ball.y + ball.dy > canvas.height - ball.radius) {
                ball.dy = -ball.dy;
            }

// Check ball collision with paddles
            if (ball.x - ball.radius < leftPaddle.x + leftPaddle.width
                && ball.y > leftPaddle.y
                && ball.y < leftPaddle.y + leftPaddle.height) {
                ball.dx = -ball.dx;
                leftScore++;
            }

if (ball.x + ball.radius > rightPaddle.x
                && ball.y > rightPaddle.y
                && ball.y < rightPaddle.y + rightPaddle.height) {
                ball.dx = -ball.dx;
                rightScore++;
            }

// Update paddle position
            leftPaddle.y += leftPaddle.dy;
            rightPaddle.y += rightPaddle.dy;

// Check paddle position
            if (leftPaddle.y < 0) {
                leftPaddle.y = 0;
            } else if (leftPaddle.y > canvas.height - leftPaddle.height) {
                leftPaddle.y = canvas.height - leftPaddle.height;
            }

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

// Update scoreboard
            document.getElementById("scoreBoard").innerHTML = leftScore + " : " + rightScore;
        }

setInterval(draw, 20);
    </script>
</body>
</html>

This is a simple implementation of the Pong game using only one HTML file with embedded JavaScript code. The game can be played on smartphones with touch screen controls. The objective of the game is to hit the ball with the paddles and score points by making the ball pass through the opponent's goal. The player with the highest score at the end of the game wins. The scoreboard is displayed at the center of the screen and updates dynamically as the game progresses. The game also uses emojis to add more fun to the experience.