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

No:19911

←

Prev Next

→

リズムゲーム
Developer バファリンヌ｜Date and time 23/10/7 8:19:51
Build time 11.922 sec｜Game capacity 2.862KB｜

Script

了解しました。リズムゲームを実装してみます。以下が、1枚のhtmlファイルとして実装したリズムゲームのコードです。

Rhythm Game

Score: 0

このコードでは、ゲーム画面上にランダムに配置されるターゲットをクリックすることでスコアが加算されるリズムゲームを実装しています。ターゲットの位置は1秒ごとに更新されます。実際に上記のコードをhtmlファイルとして保存し、ブラウザで開くことでゲームをプレイすることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

了解しました。リズムゲームを実装してみます。

以下が、1枚のhtmlファイルとして実装したリズムゲームのコードです。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Rhythm Game</title>
</head>
<body>
    <h1>Rhythm Game</h1>
    <p id="score">Score: 0</p>
    <div id="game">
        <div id="target"></div>
    </div>

// ゲームの盤面の初期化
        const game = document.getElementById('game');
        const target = document.getElementById('target');
        let gameWidth = game.clientWidth;
        let gameHeight = game.clientHeight;

// ターゲットの初期位置
        let targetX = 0;
        let targetY = 0;

// タップ時の処理
        const onTap = () => {
            score++;
            scoreDisplay.innerText = `Score: ${score}`;
        };

// クリック時またはスワイプ時の処理
        const onAction = (event) => {
            const touch = event.touches[0] || event.changedTouches[0];
            const x = touch.clientX - game.offsetLeft;
            const y = touch.clientY - game.offsetTop;
            
            // クリック位置にターゲットがある場合、スコアを加算
            if (x >= targetX && x <= targetX + target.clientWidth && y >= targetY && y <= targetY + target.clientHeight) {
                onTap();
            }
        };

// ゲーム画面上でのタッチ関連イベントの登録
        game.addEventListener('touchstart', onAction);
        game.addEventListener('click', onAction);

game.addEventListener('touchmove', (event) => {
            event.preventDefault(); // スクロールしないようにする
        });

// ゲームループ
        const gameLoop = () => {
            // ターゲットの位置を更新
            targetX = Math.floor(Math.random() * (gameWidth - target.clientWidth));
            targetY = Math.floor(Math.random() * (gameHeight - target.clientHeight));
            target.style.left = `${targetX}px`;
            target.style.top = `${targetY}px`;

// 1秒ごとにゲームループを繰り返し実行する
            setTimeout(gameLoop, 1000);
        };

// ゲームスタート
        gameLoop();
    </script>
</body>
</html>
```

このコードでは、ゲーム画面上にランダムに配置されるターゲットをクリックすることでスコアが加算されるリズムゲームを実装しています。ターゲットの位置は1秒ごとに更新されます。

実際に上記のコードをhtmlファイルとして保存し、ブラウザで開くことでゲームをプレイすることができます。