0

I am making a game using HTML that doesn't have any graphics, it is supposed to be a text-based point and click. I have gotten to certain point where I want to add background music in the game and using <audio loop autoplay src="mymusic.mp3"></audio> works, it restarts the music whenever I go to a new page, only hear the first 20 seconds of the song, does anyone know a solution?

To play the game click here

grizzthedj
  • 7,131
  • 16
  • 42
  • 62
Teo
  • 13
  • 5
  • 1
    questions on the site: one example: https://stackoverflow.com/questions/15612120/how-do-i-make-an-audio-file-play-continuously-on-all-pages – epascarello Feb 20 '18 at 16:41
  • https://stackoverflow.com/questions/15612120/how-do-i-make-an-audio-file-play-continuously-on-all-pages – F. Guerra Feb 20 '18 at 16:50

1 Answers1

0

Instead of making hundreds of individual pages with just a few words on them, just make it one huge page where you show and hide divs on click. That way you only ever have to edit one page anyways and the music won't stop. I feel that that would be the easiest way. It would also keep the browser history from being hella long.

Here, try this, super simplified:

.black{
background-color:#000;
color:#fff;
}
.black button{
background-color:#fff;
color:#000;
}
.white{
background-color:#fff;
color:#000;
}
.black button{
background-color:#000;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('section:not(#start)').hide();
  $('.btn').on('click', function(){
    showThis = $(this).data('target');
    $('section').hide();
    $(showThis).show();
  });
});
</script>
<section id="start" class="black">
Go <button class="btn" data-target="#upstairs">Upstairs</button>
Go <button class="btn" data-target="#downstairs">Downstairs</button>
</section>
<section id="upstairs" class="white">
Go back <button class="btn" data-target="#downstairs">Downstairs</button>
Go to the <button class="btn" data-target="#bathroom">bathroom</button>
</section>
<section id="downstairs" class="white">
Go to the <button class="btn" data-target="#bathroom">bathroom</button>
</section>
<section id="bathroom" class="black">
You're Dead. Start  <button class="btn" data-target="#start">again</button>
</section>
Sensoray
  • 2,360
  • 2
  • 18
  • 27
  • ok thanks, when I started the game I was pretty new to html and this didn't even come to my mind, It'll take a while but I think i'll give it a shot – Teo Feb 20 '18 at 21:33
  • It'd definitely be worth it. You'd have to add in some small javascript, but it would just be to hide or show a div when a link is clicked. Give each section an ID and....I'll just update my answer to show you. – Sensoray Feb 20 '18 at 21:36
  • Hi, i've tried doing what you have above with my own game and jQuery isn't working. I have the link to the library in the head and copy and pasted your code above but changed the classes of the .btn id and section to div. when I open the game in chrome nothing happens, as if jQuery wasn't there, but when I try to use a code snippet on this website and copy and paste from my files to stack overflow's code snippet it works for some reason. If you have a solution please tell me, and if you don't can you give me a script to do this without jQuery? thanks – Teo Feb 22 '18 at 20:59
  • @Teo I updated my answer. The reason it probably wasn't working is that jQuery scripts need to be wrapped in a `document.ready(function(){ code here });` I think the snippets here pre-load that or automatically take it into account so that 's why it works here. Does that fix it for you? :) – Sensoray Feb 22 '18 at 21:18