AI game creator

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

No:33376

←

Prev Next

→

Just Dance
Developer User11298｜Date and time 24/1/3 23:53:46
Build time 30.102 sec｜Game capacity 3.554KB｜

Script

Score: 0

Click on the dance moves as they appear!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>

<head>
  <title>Just Dance</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f9f9f9;
      overflow: hidden;
      font-family: Arial, sans-serif;
    }

.game-container {
      position: relative;
      width: 100%;
      height: calc(100vh - 20px);
      max-height: 800px;
      max-width: 800px;
      border: 2px solid #333;
      border-radius: 10px;
      overflow: hidden;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

@media (max-width: 768px) {
      .game-container {
        height: 100vh;
        width: 100vw;
        border-radius: 0;
      }
    }

.score-board {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 10px;
      background-color: #333;
      color: #fff;
      font-size: 20px;
    }

.score-board span {
      font-weight: bold;
      margin-left: 5px;
    }

.dance-moves-container {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
    }

.dance-move {
      flex-basis: calc(25% - 20px);
      margin: 10px;
      text-align: center;
    }

.dance-move img {
      width: 100%;
      max-width: 150px;
      height: auto;
    }

.dance-move p {
      margin-top: 10px;
    }

.click-instruction {
      text-align: center;
      margin-top: 20px;
      font-size: 20px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="game-container">
    <div class="score-board">
      Score: <span id="score">0</span>
    </div>
    <div class="dance-moves-container"></div>
    <div class="click-instruction">Click on the dance moves as they appear!</div>
  </div>

const gameContainer = document.querySelector('.game-container');
      const danceMovesContainer = document.querySelector('.dance-moves-container');
      const scoreDisplay = document.getElementById('score');
      let score = 0;

danceMoves.forEach(function (move) {
        const danceMove = document.createElement('div');
        danceMove.className = 'dance-move';
        danceMove.innerHTML = `
          <img src="${move.image}" alt="${move.name}">
          <p>${move.name}</p>
        `;

danceMove.addEventListener('click', function () {
          playSound(move.soundEffect);
          increaseScore();
          danceMove.remove();
        });

danceMovesContainer.appendChild(danceMove);
      });

function playSound(soundUrl) {
        const audio = new Audio(soundUrl);
        audio.play();
      }

function increaseScore() {
        score += 1;
        scoreDisplay.innerText = score;
      }
    });
  </script>
</body>

</html>