AI game creator

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

No:48225

←

Prev Next

→

Ping pong
Developer User20718｜Date and time 24/3/1 19:41:27
Build time 17.635 sec｜Game capacity 3.251KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
<style>
    #canvas {
        background-color: black;
        display: block;
        margin: auto;
    }
</style>
<script>
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 300;
    canvas.height = 200;
    document.body.appendChild(canvas);
    
    const player1 = { x: 20, y: 100, width: 10, height: 40, score: 0 };
    const player2 = { x: 270, y: 100, width: 10, height: 40, score: 0 };
    const ball = { x: 150, y: 100, radius: 5, speedX: 1, speedY: 1 };
    
    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);
        ctx.fill();
    }
    
    function drawText(text, x, y, color) {
        ctx.fillStyle = color;
        ctx.font = '12px Arial';
        ctx.fillText(text, x, y);
    }
    
    function update() {
        ball.x += ball.speedX;
        ball.y += ball.speedY;
        
        if (ball.y + ball.radius >= canvas.height || ball.y - ball.radius <= 0) {
            ball.speedY = -ball.speedY;
        }
        
        if (ball.x - ball.radius <= player1.x + player1.width && 
            ball.y >= player1.y && ball.y <= player1.y + player1.height) {
            ball.speedX = -ball.speedX;
        }
        
        if (ball.x + ball.radius >= player2.x && 
            ball.y >= player2.y && ball.y <= player2.y + player2.height) {
            ball.speedX = -ball.speedX;
        }
        
        if (ball.x - ball.radius <= 0) {
            player2.score++;
            ball.x = 150;
            ball.y = 100;
        }
        
        if (ball.x + ball.radius >= canvas.width) {
            player1.score++;
            ball.x = 150;
            ball.y = 100;
        }
        
        if (player1.score >= 3 || player2.score >= 3) {
            alert(player1.score > player2.score ? 'Player 1 Wins!' : 'Player 2 Wins!');
            player1.score = 0;
            player2.score = 0;
        }
    }
    
    function render() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        drawRect(player1.x, player1.y, player1.width, player1.height, 'white');
        drawRect(player2.x, player2.y, player2.width, player2.height, 'white');
        drawCircle(ball.x, ball.y, ball.radius, 'white');
        
        drawText(player1.score, 50, 20, 'white');
        drawText(player2.score, 250, 20, 'white');
    }
    
    function gameLoop() {
        update();
        render();
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === 's' && player1.y + player1.height < canvas.height) {
            player1.y += 10;
        }
        if (event.key === 'w' && player1.y > 0) {
            player1.y -= 10;
        }
        if (event.key === 'ArrowDown' && player2.y + player2.height < canvas.height) {
            player2.y += 10;
        }
        if (event.key === 'ArrowUp' && player2.y > 0) {
            player2.y -= 10;
        }
    });
    
    setInterval(gameLoop, 1000/60);
</script>
</head>
<body>
</body>
</html>