AI game creator

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

No:19605

←

Prev Next

→

Basketball
Developer User8707｜Date and time 23/10/5 1:56:59
Build time 23.546 sec｜Game capacity 4.222KB｜

Script

Sure! Here's a simple basketball game implemented as a single HTML file using JavaScript:

To play the game, you can open the HTML file on a smartphone's web browser, and the game will start automatically. The goal of the game is to bounce the ball off the paddle and prevent it from touching the bottom of the canvas. Use the left and right arrow keys or the corresponding buttons on the touchscreen to move the paddle and keep the ball in play. If the ball touches the bottom of the canvas, a "Game Over" alert will be displayed, and the game will restart when dismissed. Please note that this is a basic implementation of a basketball game, and you can modify and enhance it further according to your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple basketball game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Basketball Game</title>
    <style>
        canvas {
            border: 1px solid black;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<canvas id="game-canvas" width="500" height="400"></canvas>
    <script>
        // Initialize the game canvas
        const canvas = document.getElementById('game-canvas');
        const context = canvas.getContext('2d');

// Ball initial position and speed
        let ballX = canvas.width / 2;
        let ballY = canvas.height - 30;
        let ballSpeedX = 2;
        let ballSpeedY = -2;

// Paddle properties
        const paddleHeight = 20;
        const paddleWidth = 100;
        let paddleX = (canvas.width - paddleWidth) / 2;
        let rightPressed = false;
        let leftPressed = false;

// Event listeners for paddle movement
        document.addEventListener('keydown', keyDownHandler);
        document.addEventListener('keyup', keyUpHandler);

function keyDownHandler(event) {
            if (event.key == 'Right' || event.key == 'ArrowRight') {
                rightPressed = true;
            } else if (event.key == 'Left' || event.key == 'ArrowLeft') {
                leftPressed = true;
            }
        }

function keyUpHandler(event) {
            if (event.key == 'Right' || event.key == 'ArrowRight') {
                rightPressed = false;
            } else if (event.key == 'Left' || event.key == 'ArrowLeft') {
                leftPressed = false;
            }
        }

// Update game state and redraw the canvas
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();
            drawPaddle();

// Ball movement and collision detection
            ballX += ballSpeedX;
            ballY += ballSpeedY;
            if (ballX + ballSpeedX > canvas.width - 10 || ballX + ballSpeedX < 10) {
                ballSpeedX = -ballSpeedX;
            }
            if (ballY + ballSpeedY < 10) {
                ballSpeedY = -ballSpeedY;
            } else if (ballY + ballSpeedY > canvas.height - 20) {
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    ballSpeedY = -ballSpeedY;
                } else {
                    // Game over
                    alert('Game Over');
                    document.location.reload();
                }
            }

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

requestAnimationFrame(draw);
        }

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

// Draw the paddle on the canvas
        function drawPaddle() {
            context.beginPath();
            context.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            context.fillStyle = 'blue';
            context.fill();
            context.closePath();
        }

draw();
    </script>

</body>
</html>
```

Please note that this is a basic implementation of a basketball game, and you can modify and enhance it further according to your requirements.