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

No:15992

114

←

Prev Next

→

リズムゲーム
Developer はにわ｜Date and time 23/9/14 19:55:43
Build time 24.285 sec｜Game capacity 2.222KB｜

Script

了解です。以下にHTMLとJavaScriptを使用したリズムゲームの例を示します。

Rhythm Game

Score: 0

このゲームでは、適当なタイミングでブロックが上下に移動します。プレイヤーはブロックが下に来た時にクリックしてスコアを増やすことが目的です。スコアは画面上部に表示されます。なお、スマートフォンでプレイする場合は適宜CSSを修正してください。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解です。以下にHTMLとJavaScriptを使用したリズムゲームの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Rhythm Game</title>
    <style>
        body {
            text-align: center;
        }
        #score {
            font-size: 24px;
            margin-bottom: 20px;
        }
        #game-container {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid black;
            position: relative;
        }
        .block {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            top: 0;
            transition: top 1s linear;
        }
    </style>
</head>
<body>
    <h1>Rhythm Game</h1>
    <div id="score">Score: 0</div>
    <div id="game-container">
        <div class="block"></div>
    </div>
    
    <script>
        var score = 0;
        var block = document.querySelector('.block');
        var gameContainer = document.querySelector('#game-container');

function moveBlock() {
            var containerHeight = gameContainer.offsetHeight;
            var blockHeight = block.offsetHeight;
            var maxHeight = containerHeight - blockHeight;

var randomPosition = Math.random() * maxHeight;
            block.style.top = randomPosition + 'px';

setTimeout(moveBlock, 2000); // ブロックの移動を2秒ごとに繰り返す
        }

function increaseScore() {
            score += 10;
            document.querySelector('#score').textContent = 'Score: ' + score;
        }
        
        block.addEventListener('click', increaseScore); // ブロックをクリックしたらスコアを増やす

moveBlock(); // ブロックの移動を開始
        
    </script>
</body>
</html>
```