Create a basketball game that represent realistic basketball play and physics's game

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

No:10735

←

Prev Next

→

Create a basketball game that represent realistic ..ALL
Developer User4622｜Date and time 23/8/2 13:59:47
Build time 15.96 sec｜Game capacity 5.132KB｜

Script

Sure! Here's an example of a simple basketball game implemented as a single HTML file using JavaScript. It includes realistic basketball physics and can be played on a smartphone. The game uses pictograms to represent the basketball and the hoop.

To play the game, you can copy the above code into a new HTML file (e.g., `basketball_game.html`), save it, and open it in a web browser on your smartphone. You can drag the basketball (represented by a pictogram) to aim and release it to shoot. The goal is to throw the basketball into the hoop (also represented by a pictogram) as many times as possible before the ball hits the ground. The score is displayed, and the game is over when the ball hits the ground.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="600"></canvas>

// Initialize the game
        function init() {
            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");

// Create the basketball (pictogram)
            ball = {
                x: canvas.width / 2 - 25,
                y: canvas.height - 50,
                radius: 25,
                color: "#FF5722"
            };

// Create the hoop (pictogram)
            hoop = {
                x: canvas.width / 2 - 25,
                y: 50,
                width: 50,
                height: 10,
                color: "#019875"
            };

// Add event listeners for touch and mouse events
            canvas.addEventListener("touchstart", startDrag);
            canvas.addEventListener("touchend", endDrag);
            canvas.addEventListener("mousedown", startDrag);
            canvas.addEventListener("mouseup", endDrag);

// Start the game loop
            requestAnimationFrame(gameLoop);
        }

// Game loop
        function gameLoop() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update and draw the basketball
            updateBall();
            drawBall();

// Draw the hoop
            drawHoop();

// Update the score
            drawScore();

// Check if the ball went into the hoop
            checkCollision();

// Check if the game is over
            if (!isGameOver) {
                requestAnimationFrame(gameLoop);
            }
        }

// Update the position of the basketball based on dragging
        function updateBall() {
            if (isDragging) {
                ball.x = dragX;
                ball.y = dragY;
            }
        }

// Draw the basketball
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
            ctx.fillStyle = ball.color;
            ctx.fill();
            ctx.closePath();
        }

// Draw the hoop
        function drawHoop() {
            ctx.beginPath();
            ctx.rect(hoop.x, hoop.y, hoop.width, hoop.height);
            ctx.fillStyle = hoop.color;
            ctx.fill();
            ctx.closePath();
        }

// Draw the score
        function drawScore() {
            ctx.font = "20px Arial";
            ctx.fillStyle = "#000";
            ctx.fillText("Score: " + score, 10, 30);
        }

// Start dragging the basketball
        function startDrag(event) {
            event.preventDefault();
            isDragging = true;

if (event.type === "touchstart") {
                dragX = event.touches[0].clientX - canvas.offsetLeft;
                dragY = event.touches[0].clientY - canvas.offsetTop;
            } else {
                dragX = event.clientX - canvas.offsetLeft;
                dragY = event.clientY - canvas.offsetTop;
            }
        }

// End dragging the basketball
        function endDrag() {
            isDragging = false;
        }

// Check if the basketball went into the hoop
        function checkCollision() {
            if (ball.y <= hoop.y + hoop.height && ball.y >= hoop.y &&
                ball.x >= hoop.x && ball.x <= hoop.x + hoop.width) {
                score++; // Increment the score
                resetBall(); // Reset the ball position
            }

// Check if the ball hit the ground
            if (ball.y + ball.radius >= canvas.height) {
                isGameOver = true;
                alert("Game Over!\nFinal Score: " + score);
            }
        }

// Reset the ball position
        function resetBall() {
            ball.x = canvas.width / 2 - 25;
            ball.y = canvas.height - 50;
        }

// Start the game
        init();
    </script>
</body>
</html>
```