I have created a Harry Potter Flip-Card Matching Game in HTML/CSS/JavaScript that plays sound based on various events within the game. Everything works in the HTML/CSS/JavaScript files, EXCEPT audio from the downloaded mp3 and/or wave files. All of the file paths, names and corresponding code matches.
I have researched many forums and video examples on how to import the audio files if local path is not working, but most appear outdated or not applicable. However, I did come across this HTML5 audio player that provided the code below to insert into my html file, but it does not appear to work either.
<audio autoplay loop preload="metadata" style=" width:300px;">
<source src="https://www.zedge.net/ringtone/06f0c685-25ea-3ad0-913e-f2340b40e44c" type="audio/wav">
Your browser does not support the audio element.
</audio><br />
<a href="http://scriptgenerator.net/really-simple-embed-audio-player-script/" title="Generate here your HTML5 audio player" style="text-align: right;display: block">HTML5 Audio Player</a>
HTML5 Audio Image Details These includes what I selected for the wave file when the audio plays in the game. However, it does not work. Here is the actual mp3 link I downloaded for the theme song to automatically play when the game is on.
How should I go about adding the audio files (mp3 and wav) to the app.js file below to play the sound when the game is played?
class AudioController {
constructor() {
this.bgMusic = new Audio('assets/audio/harry-potter-theme.mp3');
this.flipSound = new Audio('Assets/Audio/flip.wav');
this.matchSound = new Audio('Assets/Audio/match.wav');
this.victorySound = new Audio('Assets/Audio/victory.wav');
this.gameOverSound = new Audio('Assets/Audio/gameOver.wav');
this.bgMusic.volume = 0.5;
this.bgMusic.loop = true;
}
startMusic() {
this.bgMusic.play();
}
stopMusic() {
this.bgMusic.pause();
this.bgMusic.currentTime = 0;
}
flip() {
this.flipSound.play();
}
match() {
this.matchSound.play();
}
victory() {
this.stopMusic();
this.victorySound.play();
}
gameOver() {
this.stopMusic();
this.gameOverSound.play();
}
}
class MixOrMatch {
constructor(totalTime, cards) {
this.cardsArray = cards;
this.totalTime = totalTime;
this.timeRemaining = totalTime;
this.timer = document.getElementById('time-remaining')
this.ticker = document.getElementById('flips');
this.audioController = new AudioController();
}
startGame() {
this.totalClicks = 0;
this.timeRemaining = this.totalTime;
this.cardToCheck = null;
this.matchedCards = [];
this.busy = true;
setTimeout(() => {
this.audioController.startMusic();
this.shuffleCards(this.cardsArray);
this.countdown = this.startCountdown();
this.busy = false;
}, 500)
this.hideCards();
this.timer.innerText = this.timeRemaining;
this.ticker.innerText = this.totalClicks;
}
startCountdown() {
return setInterval(() => {
this.timeRemaining--;
this.timer.innerText = this.timeRemaining;
if(this.timeRemaining === 0)
this.gameOver();
}, 1000);
}
gameOver() {
clearInterval(this.countdown);
this.audioController.gameOver();
document.getElementById('game-over-text').classList.add('visible');
}
victory() {
clearInterval(this.countdown);
this.audioController.victory();
document.getElementById('victory-text').classList.add('visible');
}
hideCards() {
this.cardsArray.forEach(card => {
card.classList.remove('visible');
card.classList.remove('matched');
});
}
flipCard(card) {
if(this.canFlipCard(card)) {
this.audioController.flip();
this.totalClicks++;
this.ticker.innerText = this.totalClicks;
card.classList.add('visible');
if(this.cardToCheck) {
this.checkForCardMatch(card);
} else {
this.cardToCheck = card;
}
}
}
checkForCardMatch(card) {
if(this.getCardType(card) === this.getCardType(this.cardToCheck))
this.cardMatch(card, this.cardToCheck);
else
this.cardMismatch(card, this.cardToCheck);
this.cardToCheck = null;
}
cardMatch(card1, card2) {
this.matchedCards.push(card1);
this.matchedCards.push(card2);
card1.classList.add('matched');
card2.classList.add('matched');
this.audioController.match();
if(this.matchedCards.length === this.cardsArray.length)
this.victory();
}
cardMismatch(card1, card2) {
this.busy = true;
setTimeout(() => {
card1.classList.remove('visible');
card2.classList.remove('visible');
this.busy = false;
}, 1000);
}
shuffleCards(cardsArray) { // Fisher-Yates Shuffle Algorithm.
for (let i = cardsArray.length - 1; i > 0; i--) {
let randIndex = Math.floor(Math.random() * (i + 1));
cardsArray[randIndex].style.order = i;
cardsArray[i].style.order = randIndex;
}
}
getCardType(card) {
return card.getElementsByClassName('card-value')[0].src;
}
canFlipCard(card) {
return !this.busy && !this.matchedCards.includes(card) && card !== this.cardToCheck;
}
}
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready);
} else {
ready();
}
function ready() {
let overlays = Array.from(document.getElementsByClassName('overlay-text'));
let cards = Array.from(document.getElementsByClassName('card'));
let game = new MixOrMatch(60,cards);
overlays.forEach(overlay => {
overlay.addEventListener('click', () => {
overlay.classList.remove('visible');
game.startGame();
});
});
cards.forEach(card => {
card.addEventListener('click', () => {
game.flipCard(card);
});
});
}
Aucun commentaire:
Enregistrer un commentaire