0
\$\begingroup\$

I am working on sound labyrinth game. My game is about a person getting trapped in the basement and the only way to navigate and get out is through sound. I have created a map over the basement and for each square there has to be a sound. Overview of the basement with each square representing a sound

The player starts in b5 with an intro sound and then has to move forward using the arrow keys. I've created this bit of code that plays a sound when forward arrow (keycode === 38) is pressed:

var thriller=new Audio("thriller.mp3");

document.addEventListener('keydown',
function (background) {
    if (background.keyCode === 38){
        thriller.play();
    }
}, false);

My question is:

  • How does the code know in which square the player is situated? Is there some smart way in which I can systematize the squares and the sounds they represent?
\$\endgroup\$
1
\$\begingroup\$

Remember that what you display (or don't display) to the user doesn't have to be the same as the information you keep about the player and the game world.

Design your game as if you were to display the player's location on a map, then instead of showing which square they're in, play the sound for the square they're in.

That means designing a map and keeping track of player position. The arrow keys will change the player position. When the player position is inside one of the zones you've specified in your map, you play the sound for that zone.

\$\endgroup\$
0
\$\begingroup\$

http://www.needsmorejquery.com/

Perhaps something like ...

HTML:

<div data-role="map">
  <div data-location="a1" data-role="tile" data-sound="thriller.mp3" />
  <div data-location="a2" data-role="tile" data-sound="thriller2.mp3" />
  <div data-location="a3" data-role="tile" data-sound="thriller3.mp3" />
  ...
</div>

JS:

$(document).on("enter", "tile", function() {
   var tile = $("this");
   var soundName = $("this").data("sound");
   var sound = new Audio(soundName);
   sound.play();
});

Now you just need to raise this enter event on your tiles ...

So presumably you have some sort of character object that you can handle move events on?

This is where you game logic comes in to play, how does your character move? about exactly?

$(document).on("keydown", "#avatar", function(background) {
   if(background.keyCode === up) {
     avatar.move("up");
   }

   ...
});


var avatar = {
  isInNewTile: false,
  move: function(direction) {
    move logic in here ...
    if(avatar.isInNewTile) {
      tile.enter();
    }
  }
}

Ok so some final thoughts ...

  1. Lots of assumptions made here.
  2. This is "seudocode" thus I don't claim it works in any manner but it should help to explain the approach to you.
  3. Hopefully from here you can (from your game code) figure out the exact solution.
\$\endgroup\$
0
\$\begingroup\$

You need to declare variables that will contain the played character's position. Decide if the game is 2d in nature or 3d. You need to do collisions an play a sound during a collision like any other game using tutorials to guide you. To compute the sounds intensity, define sound sources in the map and then compute the distance from them, the sound intensity could something like ~100% / distance. You could also consider walls as something that dampens sound.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.