Skip to content

audio slider implementation (work on chromium ) issue 173 #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tosirap wants to merge 1 commit into
base: master
Choose a base branch
from
Open

audio slider implementation (work on chromium ) issue 173 #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 26 additions & 58 deletions Game.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const specialKeys = {
18:'Alt',
19:'Pause/break',
20:'Caps lock',
27: 'Escape',
27:'Escape',
32:'Space',
33:'Page up',
34:'Page down',
Expand Down Expand Up @@ -247,7 +247,6 @@ let musicToggled = false; //this is just for muting music when game paused
let dir; // which way character faces. 1 is right, -1 is left
var highscore = 0;


function KeyDown(event) {
var key;
key = event.which;
Expand Down Expand Up @@ -293,40 +292,19 @@ function KeyDown(event) {
}
}

// Toggle music at 'M' key press
function muteMusic() {
musicMuted = !musicMuted;
var imgButton = document.getElementById('audioButton');
if (musicMuted) {
imgButton.src = 'Pictures/audioOff.png';
if (!gamePaused && !displayOptionsModal) { //If the game is running, just turn the audio off
audio.pause();
} else { //Otherwise, we need to change our musicToggled variable, so that the audio resumes properly with the game
musicToggled = false;
}
} else {
imgButton.src = 'Pictures/audioOn.png';
if (!gamePaused && !displayOptionsModal) {
audio.load();
} else {
musicToggled = true;
}
}
updateSoundPng(); //Ensures that the mute button in the options page remains updated
function checkMusicVolume() {
var audioSlider = document.getElementById('audioSlider');
audioSlider.addEventListener('input', (slider) => {
var sliderVal = slider.target.value
var audioVolume = sliderVal / 100
audio.volume = (audioVolume == 0.01) ? 0 : audioVolume;
})
}

function pauseGame() {
gamePaused = !gamePaused;
}

function updateSoundPng(){
if(musicMuted){
document.getElementById('MImg').src = 'Pictures/audioOff.png';
}else{
document.getElementById('MImg').src = 'Pictures/audioOn.png';
}
}

function gameOptions(){
displayOptionsModal = !displayOptionsModal;
}
Expand Down Expand Up @@ -434,10 +412,13 @@ function initialize_game() {
audio = document.getElementById('bgm');
audio.autoplay = true;
audio.loop = true;

if (!musicMuted) {
audio.load();
}

// Initialize volume to val of slider
audio.volume = 0.5;
// Reset val of slider to 50 in case of game restart
document.getElementById('audioSlider').value = 50;
audio.load();
checkMusicVolume();

startLevel();
}
Expand Down Expand Up @@ -716,6 +697,7 @@ function Component() {
return smoosh;
};

gameArea.stop();
//gravity property
this.newPos = function() {
this.y += this.speedY; //increment y position with his speed
Expand Down Expand Up @@ -805,13 +787,13 @@ function gameOver() {
modal.style.display = 'block';

audio = document.getElementById('bgm');
audio.volume = 0.5
audio.pause();

if (!musicMuted) {
gameover = document.getElementById('gameover');
gameover.autoplay = true;
gameover.load();
}
gameover = document.getElementById('gameover');
gameover.autoplay = true;
gameover.load();

}

function restartGame() {
Expand All @@ -827,13 +809,11 @@ function gameComplete() {
highscore = score;
}

if (!musicMuted) {
audio = document.getElementById('bgm');
audio.pause();
gamewon = document.getElementById('gamewon');
gamewon.autoplay = true;
gamewon.load();
}
audio = document.getElementById('bgm');
audio.pause();
gamewon = document.getElementById('gamewon');
gamewon.autoplay = true;
gamewon.load();
}

//Adjust character to a valid position if it moves out of border
Expand Down Expand Up @@ -915,25 +895,13 @@ function updateGameArea() {
let optionsModal = document.getElementById('optionsModal');
if (gamePaused) {
pausemodal.style.display = 'block';
if (!musicMuted) { //Then mute music, and keep musicToggled on so that we know it's not muted for real
audio.pause();
musicToggled = true;
}
return;
} else if (displayOptionsModal){
optionsModal.style.display = 'block';
if (!musicMuted) {
audio.pause();
musicToggled = true;
}
return;
} else {
pausemodal.style.display = 'none';
optionsModal.style.display = 'none';
if (musicToggled) { //Then unmute the music, and cancel musicToggled so that this won't re-trigger
audio.load();
musicToggled = false;
}
}
//when frame number reaches 3000 (point at which obstacles end) end level
//check current level, if more than 5 (because there are five levels currently), show game complete modal
Expand Down
47 changes: 47 additions & 0 deletions Style-Sheets/InstructionsModal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,50 @@
text-decoration: none;
cursor: pointer;
}

.minAudio, .maxAudio {
width: 45px;
}

.slidecontainer {
width: 100%;
margin-top: 7%;
}

.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

.slider:hover {
opacity: 1;
opacity: 1;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: rgb(254, 184, 35);
cursor: pointer;
}

.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: rgb(254, 184, 35);
cursor: pointer;
}

#audioSlider {
border: 1px solid black;
width: 52%;
}
10 changes: 7 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ <h3>Instructions</h3>
</div>
<div class="row">
<div class="col-25">
<label ><img class="Sound" src="Pictures/audioOn.png" alt="OptionGame" onclick="dispMess('M','SOUND')" id="MImg"></label>
<label><img class="Sound" src="Pictures/audioOn.png" alt="OptionGame" onclick="dispMess('M','SOUND')" id="MImg"></label>
</div>
<div class="col-75">
<button class="button" id="buttonOptions" onClick="gameOptions()">
Expand Down Expand Up @@ -268,8 +268,12 @@ <h3>Instructions</h3>
</button>
</div>
<div id="buttonPauseAudio">
<button class="button" id="buttonAudio" onClick="muteMusic()" >
<img class="buttonImages" id="audioButton" src="Pictures/audioOn.png" alt="MuteMusic">
<button class="button" id="buttonAudio">
<div class="slidecontainer">
<img class="buttonImages minAudio" src="Pictures/audioOff.png" alt="MuteMusic">
<input type="range" min="1" max="100" value="50" class="slider" id="audioSlider">
<img class="buttonImages maxAudio" src="Pictures/audioOn.png" alt="MuteMusic">
</div>
</button>
<button class="button" id="buttonPause" onClick="pauseGame()">
<img class="buttonImages" src="Pictures/pause.png" alt="PauseGame">
Expand Down