A short rhythm game with 2 songs and music 4 arrows's game

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

No:25996

←

Prev Next

→

A short rhythm game with 2 songs and music 4 arrow..ALL
Developer User12779｜Date and time 23/11/26 2:41:53
Build time 101.008 sec｜Game capacity 3.268KB｜

Script

Sure! Here's an example of a short rhythm game implemented as a single HTML file using JavaScript. In this game, you will need to press the corresponding arrow keys in time with the music. Since it's a smartphone game, I'll use pictograms to represent the arrows.

⬆

⬇

To play the game, load the HTML file on your smartphone and tap the correct arrow (⬆ or ⬇) keys in time with the music. The game will display a message if you press the correct keys and move on to the next song after you hit all the arrows. If you press the wrong arrow, the game will end. Enjoy playing the rhythm game!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Rhythm Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f1f1f1;
      font-family: Arial, sans-serif;
      overflow: hidden;
    }
    
    #game-container {
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    #arrow-container {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    
    .arrow {
      font-size: 50px;
      margin: 0 10px;
    }
    
    #message {
      font-size: 20px;
      color: #333;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="arrow-container">
      <div id="up-arrow" class="arrow">⬆</div>
      <div id="down-arrow" class="arrow">⬇</div>
    </div>
    <div id="message"></div>
  </div>

let currentSongIndex = 0;
    let currentArrowIndex = 0;
    let arrowsPressed = [];

// Handle arrow key press events
    document.addEventListener('keydown', (event) => {
      arrowsPressed.push(event.keyCode);
      updateGame();
    });

// Update the game state
    function updateGame() {
      const currentSong = getCurrentSong();
      
      // Check if the correct arrow key was pressed
      if (arrowsPressed[currentArrowIndex] === currentSong[currentArrowIndex]) {
        currentArrowIndex++;
        if (currentArrowIndex === currentSong.length) {
          showMessage('You hit all the arrows! Next song coming up...');
          resetGame();
          playNextSong();
        }
      } else {
        showMessage('Wrong arrow! Game over.');
        resetGame();
      }
    }

// Get the current playing song
    function getCurrentSong() {
      return currentSongIndex === 0 ? song1 : song2;
    }

// Play the next song
    function playNextSong() {
      currentSongIndex = (currentSongIndex + 1) % 2;
      showMessage(`Playing Song ${currentSongIndex + 1}`);
    }

// Reset the game state
    function resetGame() {
      arrowsPressed = [];
      currentArrowIndex = 0;
    }

// Show a message on the screen
    function showMessage(message) {
      document.getElementById('message').innerText = message;
    }

// Start the game
    playNextSong();
  </script>
</body>
</html>
```