AI game creator

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

No:46303

108

←

Prev Next

→

ブロック崩し
Developer User20046｜Date and time 24/2/24 12:55:42
Build time 9.3 sec｜Game capacity 2.942KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block Breaker Game</title>
<style>
    body {
        margin: 0;
        overflow: hidden;
    }
    #canvas {
        background: #f2f2f2;
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    let ball = {
        x: canvas.width / 2,
        y: canvas.height - 30,
        dx: 2,
        dy: -2,
        radius: 10
    };
    
    let paddle = {
        width: 150,
        height: 10,
        x: (canvas.width - 150) / 2,
        speed: 10
    };
    
    function drawBall() {
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.closePath();
    }
    
    function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
        ctx.fillStyle = 'blue';
        ctx.fill();
        ctx.closePath();
    }
    
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();
        drawPaddle();
        
        ball.x += ball.dx;
        ball.y += ball.dy;
        
        if(ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
            ball.dx = -ball.dx;
        }
        
        if(ball.y + ball.dy < ball.radius) {
            ball.dy = -ball.dy;
        } else if(ball.y + ball.dy > canvas.height - ball.radius) {
            if(ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
                ball.dy = -ball.dy;
            } else {
                alert('Game Over!');
                document.location.reload();
            }
        }
        
        if(rightPressed && paddle.x < canvas.width - paddle.width) {
            paddle.x += paddle.speed;
        } else if(leftPressed && paddle.x > 0) {
            paddle.x -= paddle.speed;
        }
    }
    
    document.addEventListener('keydown', keyDownHandler, false);
    document.addEventListener('keyup', keyUpHandler, false);
    
    let rightPressed = false;
    let leftPressed = false;
    
    function keyDownHandler(e) {
        if(e.key === 'Right' || e.key === 'ArrowRight') {
            rightPressed = true;
        } else if(e.key === 'Left' || e.key === 'ArrowLeft') {
            leftPressed = true;
        }
    }
    
    function keyUpHandler(e) {
        if(e.key === 'Right' || e.key === 'ArrowRight') {
            rightPressed = false;
        } else if(e.key === 'Left' || e.key === 'ArrowLeft') {
            leftPressed = false;
        }
    }
    
    setInterval(draw, 10);
</script>
</body>
</html>