2

I created a whack a mole game. However, I am trying to add the Price is Right theme to the background as the user plays the game. Is there anything I need to add to the javascript to make this happen? I have the mp3 file saved inside of a sounds folder.

Here is the index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Whack A Mole</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Whack a Skeletor!</h1>
    <h2>Your Score:</h2>
    <h2 id="score">0</h2>
    <h2>Seconds Left:</h2>
    <h2 id="time-left">60</h2>
    <div class="grid">
      <div class="square" id="1"></div>
      <div class="square" id="2"></div>
      <div class="square" id="3"></div>
      <div class="square" id="4"></div>
      <div class="square" id="5"></div>
      <div class="square" id="6"></div>
      <div class="square" id="7"></div>
      <div class="square" id="8"></div>
      <div class="square" id="9"></div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

Here is the JavaScript file

const squares = document.querySelectorAll('.square');
const mole = document.querySelector('.mole');
const timeLeft = document.querySelector('#time-left');
const score = document.querySelector('#score');

let result = 0;
let hitPosition;
let currentTime = 60;
let timerId = null;
let evilLaugh = new Audio('sounds/laugh.mp3');
evilLaugh.volume = 0.3;



function randomSquare() {
  squares.forEach((square) => {
    square.classList.remove('mole');
  });

  let randomSquare = squares[Math.floor(Math.random() * 9)];
  randomSquare.classList.add('mole');

  hitPosition = randomSquare.id;
}

squares.forEach((square) => {
  square.addEventListener('mousedown', () => {
    if (square.id == hitPosition) {
      result++;
      score.textContent = result;
      hitPosition = null;
    }
  });
});

function moveMole() {
  timerId = setInterval(randomSquare, 500);
}

moveMole();
function countDown() {
  currentTime--;
  timeLeft.textContent = currentTime;

  if (currentTime == 0) {
    clearInterval(countDownTimerId);
    clearInterval(timerId);
    alert('GAME OVER! Your final score is ' + result);
    evilLaugh.play();
  }
}

let countDownTimerId = setInterval(countDown, 1000);

Here is the CSS file

* {
  background-color: black;
  color: red;
}

.square {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-color: lime;
}

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  width: 618px;
  height: 618px;
}

.mole {
  background-image: url(skeletor.jpeg);
  background-size: cover;
}
Chaz Carothers
  • 180
  • 12

1 Answers1

1

What you're doing with evilLaugh is the same thing that you would do with your Price is Right sound. The only addition would be that we would need some way to repeat the song each time it ends, which is well covered in this Stack Overflow question. So you could do:

let myPriceAudio = new Audio('sounds/nameOfFile.mp3');

myPriceAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myPriceAudio.play();

The linked Stack Overflow question does say that all major browsers support myPriceAudio.loop = true;, so you could also do that instead of the .addEventListener() functionality.

charlie-map
  • 556
  • 5
  • 17