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

No:39262

Piano game where you follow a rhythm to win and th..ALL
Developer User17554｜Date and time 24/1/27 13:10:46
Build time 14.615 sec｜Game capacity 3.424KB｜

Script

Sure! Here's a simple piano game implemented as a single HTML file using JavaScript. The game uses pictograms to represent the piano keys and requires the player to follow a rhythm to win. It also includes a 50-second timer, and when the timer runs out, the player wins.

Piano Game

This implementation includes four piano keys represented by pictograms. The keys can be played by pressing the corresponding number key on the keyboard (1, 2, 3, 4) or by using the keys 'q', 'w', 'e', 'r' respectively. The player needs to press the keys in the correct sequence to win the game. If the player completes the sequence correctly within 50 seconds, they win the game.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Piano Game</title>
  <style>
    button {
      width: 70px;
      height: 70px;
      font-size: 24px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <h1>Piano Game</h1>
  
  <div>
    <button id="key1">🎵</button>
    <button id="key2">🎸</button>
    <button id="key3">🎹</button>
    <button id="key4">🎻</button>
  </div>

<div>
    <button onclick="startGame()">Start Game</button>
  </div>

function startGame() {
      var keysPressed = [];
      var timeLeft = 50; // Timer set to 50 seconds

disableKeys();
      timerInterval = setInterval(timer, 1000);

// Event listener to handle key presses
      document.addEventListener('keydown', function (event) {
        if (event.key === '1' || event.key === 'q') {
          playKey('key1');
          keysPressed.push('key1');
        } else if (event.key === '2' || event.key === 'w') {
          playKey('key2');
          keysPressed.push('key2');
        } else if (event.key === '3' || event.key === 'e') {
          playKey('key3');
          keysPressed.push('key3');
        } else if (event.key === '4' || event.key === 'r') {
          playKey('key4');
          keysPressed.push('key4');
        }

checkWin(keysPressed);
      });

// Function to play a piano key
      function playKey(keyId) {
        var key = document.getElementById(keyId);
        key.style.backgroundColor = 'lightblue';
        setTimeout(function () {
          key.style.backgroundColor = 'white';
        }, 200);
      }

// Function to check if the player wins
      function checkWin(keysPressed) {
        var winningSequence = ['key1', 'key2', 'key3', 'key4'];
        var numKeys = winningSequence.length;

if (keysPressed.length === numKeys) { // All keys are pressed
          for (var i = 0; i < numKeys; i++) {
            if (keysPressed[i] !== winningSequence[i]) {
              return; // The sequence is incorrect
            }
          }
          clearInterval(timerInterval);
          alert('Congratulations! You win!');
        }
      }

// Function to handle the timer
      function timer() {
        if (timeLeft <= 0) {
          clearInterval(timerInterval);
          alert('Time is up! You win!');
        } else {
          document.getElementById('timer').innerText = 'Time Left: ' + timeLeft;
          timeLeft--;
        }
      }

// Function to disable the piano keys during the game
      function disableKeys() {
        var keys = document.getElementsByTagName('button');
        for (var i = 0; i < keys.length; i++) {
          keys[i].disabled = true;
        }
      }
    }
  </script>
</body>
</html>
```