AI game creator

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

No:33166

←

Prev Next

→

Ping Pong
Developer User15666｜Date and time 24/1/2 19:56:39
Build time 24.314 sec｜Game capacity 3.037KB｜

Script

Ping Pong

←

Prev　Next

→ 　

Back　

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

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

Ping Pong

<!DOCTYPE html>
<html>
<head>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body onload="startGame()">

function startGame() {
            canvas = document.createElement("canvas");
            canvas.width = 480;
            canvas.height = 320;
            context = canvas.getContext("2d");
            document.body.appendChild(canvas);

ball = {
                x: canvas.width / 2,
                y: canvas.height - 30,
                radius: 10,
                dx: 2,
                dy: -2
            };

paddle = {
                width: 75,
                height: 10,
                x: (canvas.width - 75) / 2
            };

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

setInterval(draw, 10);
        }

function drawBall() {
            context.beginPath();
            context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
            context.fillStyle = "#0095DD";
            context.fill();
            context.closePath();
        }

function drawPaddle() {
            context.beginPath();
            context.rect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
            context.fillStyle = "#0095DD";
            context.fill();
            context.closePath();
        }

function keyDownHandler(event) {
            if (event.keyCode == 39) {
                paddle.dx = 7;
            } else if (event.keyCode == 37) {
                paddle.dx = -7;
            }
        }

function keyUpHandler(event) {
            if (event.keyCode == 39 || event.keyCode == 37) {
                paddle.dx = 0;
            }
        }

function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();
            drawPaddle();

collisionDetection();

ball.x += ball.dx;
            ball.y += ball.dy;

paddle.x += paddle.dx;
            if (paddle.x < 0) {
                paddle.x = 0;
            } else if (paddle.x > canvas.width - paddle.width) {
                paddle.x = canvas.width - paddle.width;
            }
        }
    </script>

</body>
</html>