AI game creator

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

No:22275

←

Prev Next

→

Rhythm game
Developer User10166｜Date and time 23/10/21 23:58:23
Build time 43.791 sec｜Game capacity 2.268KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Rhythm Game</title>
  <style>
    body {
      background-color: #f1f1f1;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

#container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

#gameArea {
      width: 400px;
      height: 400px;
      background-color: #fff;
      border: 2px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

.note {
      position: absolute;
      bottom: 0;
      width: 50px;
      height: 50px;
      background-color: #3498db;
      border-radius: 50%;
      animation: noteFall 1s linear infinite;
    }

.score {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
      font-weight: bold;
    }

@keyframes noteFall {
      0% {
        top: 0;
      }
      100% {
        top: 93%;
      }
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="gameArea">
      <div class="score">0</div>
    </div>
  </div>

// Pictograms representing the notes 
    const pictograms = ['🎵', '🎶', '🎵', '🎶', '🎵', '🎶'];

function createNote() {
      const note = document.createElement('div');
      note.innerHTML = pictograms[Math.floor(Math.random() * pictograms.length)];
      note.classList.add('note');
      gameArea.appendChild(note);
    }

function updateScore() {
      score++;
      scoreElement.textContent = score;
    }

function startGame() {
      setInterval(() => {
        createNote();
        checkNoteClicked();
      }, 1000);
    }

startGame();
  </script>
</body>
</html>