Browse files

Add audio mute button and fix music playback bug

  • Loading branch information...
1 parent 10f930a commit 8b46157329689180177c9683a87aeb77cb971a6f @Seldaek committed Nov 26, 2012
Showing with 64 additions and 14 deletions.
  1. +4 −2 README.md
  2. +13 −0 css/styles.css
  3. +9 −3 index.html
  4. +38 −9 js/split.js
View
6 README.md
@@ -14,16 +14,18 @@ I set out to imagine a game where your only way of moving is to fork/branch out,
![](https://dl.dropbox.com/u/1634226/split/screenshot1.png)
![](https://dl.dropbox.com/u/1634226/split/screenshot2.png)
-# Tools
+# Projects and media files used
No external libs are used for the core of the game. The game is simple enough that it does not require (and also does not really fit) the use of a game engine to render elements or track the game logic. I figured one can handle this with the browser APIs alone these days, plus it was a good learning exercise.
-For audio playback the game uses [SoundManager2](http://www.schillmania.com/projects/soundmanager2/) and the following audio files kindly CC-BY-NC-licensed:
+For audio playback the game uses [SoundManager2](http://www.schillmania.com/projects/soundmanager2/) and the following CC-BY / CC-BY-NC licensed audio files:
- Black Hole ([soundtrack](http://www.jamendo.com/en/track/135925/black-hole))
- laserzips ([split sound](http://www.freesound.org/people/bennychico11/sounds/125111/))
- electric-wire-20 ([collision sound](http://www.freesound.org/people/Glaneur%20de%20sons/sounds/34169/))
+The music icon is CC-BY licensed from [Dmitry Baranovskiy of The Noun Project](http://thenounproject.com/noun/music/#icon-No5029).
+
# Author
This has been conceived and put together by [Jordi Boggiano](http://seld.be/) ([@seldaek](https://twitter.com/seldaek)).
View
13 css/styles.css
@@ -11,6 +11,7 @@ footer {
width: 320px;
margin: auto;
font-size: 15px;
+ opacity: 0.7;
}
a, a:link, a:visited, a:hover {
color: #bcaedb;
@@ -39,6 +40,18 @@ a, a:link, a:visited, a:hover {
visibility: visible;
}
+#audio {
+ left: 11px;
+ top: 9px;
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ cursor: pointer;
+ opacity: 0.7;
+}
+#audio.muted {
+ opacity: 0.2;
+}
#score {
right: 19px;
top: 14px;
View
12 index.html
@@ -17,20 +17,25 @@
<section id="game">
<canvas id="trails" height="480" width="320"></canvas>
<canvas id="base" height="480" width="320"></canvas>
+ <div id="score"></div>
<div id="ingame">
<div id="strength">STRENGTH</div>
<div id="energy-bar">
<div id="energy"></div>
<div id="force"></div>
</div>
+ <div id="audio">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+ <path fill="white" d="M10.96,8.042v6.041v9.862c-0.677-0.45-1.636-0.736-2.708-0.736c-2.048,0-3.708,1.025-3.708,2.292 c0,1.265,1.66,2.291,3.708,2.291s3.708-1.026,3.708-2.291V13.786l10.916-3.24v9.565c-0.678-0.45-1.635-0.736-2.709-0.736 c-2.047,0-3.707,1.025-3.707,2.292c0,1.265,1.66,2.291,3.707,2.291c2.049,0,3.709-1.026,3.709-2.291V10.249V4.208L10.96,8.042z"/>
+ </svg>
+ </div>
</div>
- <div id="score"></div>
<div id="messages"><noscript>This game really needs JavaScript to run, you should enable it.</noscript></div>
</section>
<footer>
<p>Split, a game conceived and put together by <a href="http://seld.be">Jordi&nbsp;Boggiano</a> for the GitHub&nbsp;Game&nbsp;Off&nbsp;2012. Graphics by <a href="http://meret.com">Meret&nbsp;Vollenweider</a>.</p>
<p>Game sources <a href="https://github.com/Seldaek/split">available on GitHub</a>.</p>
- <p>Audio files used under Creative Commons license by <a href="http://www.jamendo.com/en/artist/3281/kanchi">Kanchi</a>, <a href="http://www.freesound.org/people/Glaneur%20de%20sons/">Glaneur de sons</a> and <a href="http://www.freesound.org/people/bennychico11/">bennychico11</a>.</p>
+ <p>Audio and icons by <a href="http://www.jamendo.com/en/artist/3281/kanchi">Kanchi</a>, <a href="http://www.freesound.org/people/Glaneur%20de%20sons/">Glaneur de sons</a>, <a href="http://www.freesound.org/people/bennychico11/">bennychico11</a> and <a href="http://thenounproject.com/noun/music/#icon-No5029" title="Dmitry Baranovskiy, from The Noun Project">Dmitry Baranovskiy</a></p>
</footer>
<script src="js/split.js"></script>
<script src="js/node.js"></script>
@@ -50,7 +55,8 @@
document.getElementById('force'),
document.getElementById('score'),
document.getElementById('messages'),
- document.getElementById('ingame')
+ document.getElementById('ingame'),
+ document.getElementById('audio')
);
soundManager.setup({
url: 'lib/soundmanager/',
View
47 js/split.js
@@ -1,4 +1,4 @@
-var Split = function (node, trailsNode, energyNode, forceNode, scoreNode, messagesNode, ingameNode) {
+var Split = function (node, trailsNode, energyNode, forceNode, scoreNode, messagesNode, ingameNode, audioNode) {
this.canvas = node;
this.messagesNode = messagesNode;
@@ -16,6 +16,7 @@ var Split = function (node, trailsNode, energyNode, forceNode, scoreNode, messag
this.energyBar = new EnergyBar(this, energyNode, forceNode);
this.scoreNode = scoreNode;
this.ingameNode = ingameNode;
+ this.audioNode = audioNode;
if (window.localStorage && !isNaN(parseInt(window.localStorage.getItem('highscore'), 10))) {
this.scoreNode.innerHTML = "<span>HIGHSCORE</span>" + window.localStorage.getItem('highscore') + "";
@@ -32,6 +33,8 @@ var Split = function (node, trailsNode, energyNode, forceNode, scoreNode, messag
this.setMessage('SPLIT<br/><br/><br/>You are trapped in a void.<br/>[SPACE] is your only way out.<br/>Longer presses go further.<br/><br/><br/>Press [SPACE] To Start', function () {
this.start();
});
+
+ this.initMuteControls();
};
Split.prototype.start = function () {
@@ -63,14 +66,8 @@ Split.prototype.start = function () {
this.tick();
- if (this.soundManager && !this.soundManager.createSound({id:'music'}).playState) {
- (function loopSound(sound) {
- sound.play({
- onfinish: function () {
- loopSound(sound);
- }
- });
- })(this.soundManager.createSound({id:'music'}));
+ if (this.soundManager) {
+ this.startMusic();
}
_gaq.push(['_trackEvent', 'Game', 'Play', 'Split', this.plays++]);
@@ -261,6 +258,22 @@ Split.prototype.initControls = function () {
window.addEventListener('touchstart', this.controls);
};
+Split.prototype.initMuteControls = function () {
+ var that = this;
+
+ this.audioNode.addEventListener('click', function (e) {
+ if (this.className === 'muted') {
+ if (that.soundManager) {
+ this.className = '';
+ that.soundManager.unmute();
+ }
+ } else if (that.soundManager) {
+ this.className = 'muted';
+ that.soundManager.mute();
+ }
+ });
+};
+
Split.prototype.togglePause = function () {
var that = this;
@@ -392,6 +405,22 @@ Split.prototype.setSoundManager = function (soundManager) {
volume: 4,
autoPlay: false
}).load();
+
+ if (this.playing) {
+ this.startMusic();
+ }
+};
+
+Split.prototype.startMusic = function () {
+ if (!this.soundManager.createSound({id:'music'}).playState) {
+ (function loopSound(sound) {
+ sound.play({
+ onfinish: function () {
+ loopSound(sound);
+ }
+ });
+ })(this.soundManager.createSound({id:'music'}));
+ }
};
if (undefined === window.requestAnimationFrame) {

0 comments on commit 8b46157

Please sign in to comment.