Rhythm game like DDR with fingers's game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
Rhythm game like DDR with fingers's game | AI game creator

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

No:5747

2004

←

Prev Next

→

Rhythm game like DDR with fingers
Developer User3840｜Date and time 23/6/30 18:37:38
Build time 31.583 sec｜Game capacity 2.47KB｜

Script

了解しました。以下は指でプレイ可能なDDR風のリズムゲームの例です。プログラムは1枚のHTMLファイルとして実装し、JavaScriptを含むようにします。

↑

←

↓

→

このゲームでは、上矢印キー、左矢印キー、下矢印キー、右矢印キーを押したタイミングでそれぞれの矢印が点滅します。矢印を押したタイミングに応じてスコアが変動し、スコアが表示されます。このゲームは主にキーボード操作を前提としていますが、スマートフォンでもタップ操作などに修正すればプレイ可能です。また、絵文字ではなくテキストで矢印を表現していますが、違う絵文字を使ったり、画像を表示させたりすることも可能です。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解しました。以下は指でプレイ可能なDDR風のリズムゲームの例です。プログラムは1枚のHTMLファイルとして実装し、JavaScriptを含むようにします。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Rhythm Game</title>
  <style>
    #game-board {
      width: 300px;
      height: 300px;
      margin: 0 auto;
      border: 1px solid black;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 50px;
    }
    .arrow {
      width: 50px;
      height: 50px;
      margin: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div class="arrow" id="up-arrow">↑</div>
    <div class="arrow" id="left-arrow">←</div>
    <div class="arrow" id="down-arrow">↓</div>
    <div class="arrow" id="right-arrow">→</div>
  </div>

let score = 0;
    let time = 0;

document.addEventListener('keydown', function(event) {
      const key = event.key.toLowerCase();
      if (arrows.includes(key)) {
        const arrowElement = document.querySelector(`#${key}-arrow`);
        arrowElement.style.color = 'red';
        setTimeout(function() {
          arrowElement.style.color = 'black';
        }, 300);

if (time <= 1000) {
          score += 100;
        } else if (time <= 2000) {
          score += 50;
        } else {
          score += 10;
        }

time += 100;
        updateScore();
      }
    });

function updateScore() {
      const scoreElement = document.createElement('div');
      scoreElement.textContent = `Score: ${score}`;
      document.body.appendChild(scoreElement);
    }
  </script>
</body>
</html>
```