ceremony in which Bodhidharma fallen from the heavenly bodies to the repose of a buddhas body's game

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

No:4987

102

←

Prev Next

→

ceremony in which Bodhidharma fallen from the heav..ALL
Developer User3806｜Date and time 23/6/29 6:03:48
Build time 31.813 sec｜Game capacity 3.071KB｜

Script

了解です。「だるま落とし」ゲームを作ります。以下に、実際のプログラムを記述します。

このプログラムは、HTMLのキャンバス要素を使用して「だるま落とし」ゲームを実装しています。スマートフォン上で操作可能であり、プログラム内のJavaScriptコードによって、だるまの位置をスマホの操作によって移動させ、ボールをキャッチすることでスコアを増やしていくゲームです。画面外にボールが出た場合や、ボールとだるまが衝突した場合にゲームオーバーとなります。スコアはキャンバス上に表示されます。

←

Prev　Next

→ 　

Back　

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

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

了解です。「だるま落とし」ゲームを作ります。

以下に、実際のプログラムを記述します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>だるま落とし</title>
</head>
<body>
    <canvas id="canvas" width="400" height="600"></canvas>
</body>
<script>
    // キャンバスの取得
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

// ゲームの状態
    let gameover = false;
    let score = 0;

// だるまの初期位置とサイズ
    let darumaX = canvas.width / 2;
    let darumaY = canvas.height - 50;
    const darumaSize = 50;

// ボールの初期位置とサイズ
    let ballX = canvas.width / 2;
    let ballY = 0;
    const ballSize = 20;
    const ballSpeed = 3;

// スマホ操作用の変数
    let touchX = 0;

// スマホ操作
    canvas.addEventListener('touchstart', (e) => {
        touchX = e.touches[0].clientX;
    });

canvas.addEventListener('touchmove', (e) => {
        const moveX = e.touches[0].clientX - touchX;
        darumaX += moveX;
        touchX = e.touches[0].clientX;
    });

// ゲームループ
    function gameLoop() {
        if (gameover) {
            // ゲームオーバー時の処理
            alert('Game Over! Score: ' + score);
            return;
        }

// キャンバスのクリア
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// だるまの描画
        ctx.fillStyle = 'red';
        ctx.fillRect(darumaX - darumaSize/2, darumaY - darumaSize/2, darumaSize, darumaSize);

// ボールの描画
        ctx.fillStyle = 'black';
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballSize, 0, Math.PI*2);
        ctx.closePath();
        ctx.fill();

// ボールの移動
        ballY += ballSpeed;

// ボールが画面外に出たらゲームオーバー
        if (ballY > canvas.height) {
            gameover = true;
        }

// ボールとだるまの当たり判定
        if (Math.abs(ballX - darumaX) < (ballSize + darumaSize)/2 && Math.abs(ballY - darumaY) < (ballSize + darumaSize)/2) {
            score++;
            ballY = 0;
            ballX = Math.random() * canvas.width;
        }

// スコアの表示
        ctx.font = '30px Arial';
        ctx.fillText('Score: ' + score, 10, 30);

requestAnimationFrame(gameLoop);
    }

gameLoop();
</script>
</html>
```