AI game creator

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

No:45820

←

Prev Next

→

Pong
Developer User19693｜Date and time 24/2/21 11:41:41
Build time 15.516 sec｜Game capacity 4.015KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Pong</title>
<style>
    #canvas {
        background: black;
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    const player1 = {
        x: 50,
        y: canvas.height / 2 - 50,
        width: 10,
        height: 100,
        color: 'white',
        score: 0
    };
    
    const player2 = {
        x: canvas.width - 60,
        y: canvas.height / 2 - 50,
        width: 10,
        height: 100,
        color: 'white',
        score: 0
    };
    
    const ball = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 10,
        speedX: 5,
        speedY: 5,
        color: 'white'
    };
    
    const net = {
        x: canvas.width / 2 - 1,
        y: 0,
        width: 2,
        height: 10,
        color: 'white'
    };
    
    let upArrowPressed = false;
    let downArrowPressed = false;
    
    canvas.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowUp') {
            upArrowPressed = true;
        } else if (e.key === 'ArrowDown') {
            downArrowPressed = true;
        }
    });
    
    canvas.addEventListener('keyup', (e) => {
        if (e.key === 'ArrowUp' && upArrowPressed) {
            upArrowPressed = false;
        } else if (e.key === 'ArrowDown' && downArrowPressed) {
            downArrowPressed = false;
        }
    });
    
    function drawRect(x, y, width, height, color) {
        ctx.fillStyle = color;
        ctx.fillRect(x, y, width, height);
    }
    
    function drawCircle(x, y, radius, color) {
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
    }
    
    function drawNet() {
        for (let i = 0; i <= canvas.height; i += 15) {
            drawRect(net.x, net.y + i, net.width, net.height, net.color);
        }
    }
    
    function drawScore(x, y, score) {
        ctx.fillStyle = 'white';
        ctx.font = '30px Arial';
        ctx.fillText(score, x, y);
    }
    
    function resetBall() {
        ball.x = canvas.width / 2;
        ball.y = canvas.height / 2;
        ball.speedX = -ball.speedX;
    }
    
    function update() {
        if (upArrowPressed && player1.y > 0) {
            player1.y -= 5;
        } else if (downArrowPressed && player1.y < canvas.height - player1.height) {
            player1.y += 5;
        }
        
        if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
            ball.speedY = -ball.speedY;
        }
        
        if (ball.x + ball.radius > canvas.width) {
            player1.score++;
            resetBall();
        } else if (ball.x - ball.radius < 0) {
            player2.score++;
            resetBall();
        }
        
        if (ball.x + ball.radius > player2.x && ball.y > player2.y && ball.y < player2.y + player2.height) {
            ball.speedX = -ball.speedX;
        } else if (ball.x - ball.radius < player1.x + player1.width && ball.y > player1.y && ball.y < player1.y + player1.height) {
            ball.speedX = -ball.speedX;
        }
        
        ball.x += ball.speedX;
        ball.y += ball.speedY;
    }
    
    function render() {
        drawRect(0, 0, canvas.width, canvas.height, 'black');
        
        drawNet();
        drawRect(player1.x, player1.y, player1.width, player1.height, player1.color);
        drawRect(player2.x, player2.y, player2.width, player2.height, player2.color);
        drawScore(canvas.width / 4, canvas.height / 6, player1.score);
        drawScore(3 * canvas.width / 4, canvas.height / 6, player2.score);
        drawCircle(ball.x, ball.y, ball.radius, ball.color);
    }
    
    function gameLoop() {
        update();
        render();
    }
    
    setInterval(gameLoop, 1000 / 60);
</script>
</body>
</html>