AI game creator

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

No:418

203

←

Prev Next

→

Basketball Shooting
Developer User2906｜Date and time 23/6/14 0:45:37
Build time 36.552 sec｜Game capacity 2.682KB｜

Script

The game was created to Below is the actual program.

The rules of the game are as follows 1. the user can tap and shoot a basketball that automatically falls from the top of the screen. 2. the goal is the basket ring in the center of the screen、Shooting into the ring adds one point to the score. 3. when the user removes the chute、The falling basketball appears again from the top of the screen. Scores are displayed at the top of the screen and、It can be reset.

←

Prev　Next

→ 　

Back　

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

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

をするゲームを作成しました。

以下が実際のプログラムです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Basketball Shot Game</title>
    <style>
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

const BALL_IMAGE = "🏀";
        const HOOP_IMAGE = "🏀";
        const BALL_SIZE = 50;
        const BASKET_SIZE = BALL_SIZE * 4;

let ballX = canvas.width / 2 - BALL_SIZE / 2;
        let ballY = canvas.height - BALL_SIZE;
        let basketX = canvas.width / 2 - BASKET_SIZE / 2;
        let basketY = canvas.height / 3;
        let score = 0;

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.font = `${BALL_SIZE}px serif`;
            ctx.fillText(BALL_IMAGE, ballX, ballY);

ctx.fillText(HOOP_IMAGE, basketX, basketY, BASKET_SIZE);

ctx.font = "30px sans-serif";
            ctx.fillText(`Score: ${score}`, 20, 50);
        }

draw();

function update() {
            ballY -= 5;

if (ballY <= basketY && ballX >= basketX && ballX <= basketX + BASKET_SIZE) {
                score++;
                resetBall();
            } else if (ballY <= -BALL_SIZE) {
                resetBall();
            }

draw();
            requestAnimationFrame(update);
        }

function resetBall() {
            ballX = Math.random() * (canvas.width - BALL_SIZE);
            ballY = canvas.height - BALL_SIZE;
        }

canvas.addEventListener("mousedown", function(event) {
            if (event.clientX >= ballX && event.clientX <= ballX + BALL_SIZE &&
                event.clientY >= ballY && event.clientY <= ballY + BALL_SIZE) {
                resetBall();
            }
        });

update();
    </script>
</body>
</html>
```

ゲームのルールは以下の通りです。

1. ユーザーは画面上部から自動的に落ちてくるバスケットボールをタップしてシュートすることができます。
2. ゴールは画面中央のバスケットリングで、リングの中にシュートするとスコアが1点加算されます。
3. ユーザーがシュートを外すと、落ちてくるバスケットボールが再び画面上部から現れます。
4. スコアは画面上部に表示され、リセットすることができます。