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

No:43731

←

Prev Next

→

Alley roller document
Developer User19243｜Date and time 24/2/16 13:13:16
Build time 12.94 sec｜Game capacity 3.999KB｜

Script

Alley Roller Game

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Alley Roller Game</title>
    
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

canvas {
            border: 1px solid black;
        }

#score {
            font-size: 20px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Alley Roller Game</h1>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <div id="score">Score: 0</div>

ballX = canvas.width / 2;
            ballY = canvas.height - 30;
            ballRadius = 10;

paddleWidth = 75;
            paddleHeight = 10;
            paddleX = (canvas.width - paddleWidth) / 2;

dx = 2;
            dy = -2;

rightPressed = false;
            leftPressed = false;

score = 0;

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

draw();
        }

// Draw the game objects on canvas
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas

drawBall();
            drawPaddle();
            drawScore();

// Handle ball collision with walls
            if (ballX + dx > canvas.width - ballRadius || ballX + dx < ballRadius) {
                dx = -dx;
            }
            if (ballY + dy < ballRadius) {
                dy = -dy;
            } else if (ballY + dy > canvas.height - ballRadius) {
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    dy = -dy;
                    score++;
                } else {
                    // Game over
                    alert("Game Over! Your score is: " + score);
                    document.location.reload();
                }
            }

// Move the paddle
            if (rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += 7;
            } else if (leftPressed && paddleX > 0) {
                paddleX -= 7;
            }

ballX += dx;
            ballY += dy;

requestAnimationFrame(draw);
        }

// Draw the ball on canvas
        function drawBall() {
            context.beginPath();
            context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            context.fillStyle = "red";
            context.fill();
            context.closePath();
        }

// Draw the paddle on canvas
        function drawPaddle() {
            context.beginPath();
            context.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            context.fillStyle = "blue";
            context.fill();
            context.closePath();
        }
        
        // Draw the score on canvas
        function drawScore() {
            context.font = "20px Arial";
            context.fillStyle = "black";
            context.fillText("Score: " + score, 8, 20);
        }

// Event handlers for keyboard input
        function keyDownHandler(event) {
            if (event.keyCode === 39) {
                rightPressed = true;
            } else if (event.keyCode === 37) {
                leftPressed = true;
            }
        }

function keyUpHandler(event) {
            if (event.keyCode === 39) {
                rightPressed = false;
            } else if (event.keyCode === 37) {
                leftPressed = false;
            }
        }

initGame();
    </script>
</body>
</html>