Fire JS Bin - Bubble-Trouble

You can jump to the latest bin by adding /latest to your URL

Find

→ ←

⟲

Replace

⊗ All Replace

// XWUZ standard code
// Having thoughts? Ask here: xwuz@tjp.hu
/*global XWUZ */
/*jslint browser:true */

XWUZ = {};

// will be stuffed by the games itselves:
XWUZ.games = {};

// the name of the current game:
XWUZ.game = '';

// frame / object check
//XWUZ.framecheck = function () {
//  if (top.frames.length === 0 && navigator.userAgent.indexOf('iPhone') === -1 && window.location.href.indexOf('i2.html') === -1) {
//    window.location.href = 'game.html';
//  }
//};

//alert
XWUZ.say = function () {
  return {
    alert: function (question) {
      XWUZ.flow.pause();
      document.getElementById('alertbox').style.display = 'block';
      document.getElementById('alertbox_content').innerHTML = question + '<br style="clear:both" /><br /><a href="#" onclick="XWUZ.say.dismiss(); XWUZ.flow.restart();return false;"><img src="/attach/bubble/b_okay.png" alt="Okay" /></a><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=331614220&mt=8"><img src="/attach/bubble/appstore.png" alt="Available on the App Store" style="margin-top:20px;" /></a>';
    },
    confirm: function (question) {
      XWUZ.flow.pause();
      document.getElementById('alertbox').style.display = 'block';
      document.getElementById('alertbox_content').innerHTML = question + '<br style="clear:both" /><br /><a href="#" onclick="XWUZ.say.dismiss(); XWUZ.flow.restart();return false;"><img src="/attach/bubble/b_yes.png" alt="Yes" /></a><a href="#" onclick="XWUZ.say.dismiss(); XWUZ.flow.resume(); return false;"><img src="/attach/bubble/b_no.png" alt="No" /></a><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=331614220&mt=8"><img src="/attach/bubble/appstore.png" alt="Available on the App Store" style="margin-top:40px;" /></a>';
    },
    dismiss: function () {
      document.getElementById('alertbox').style.display = '';
      document.getElementById('alertbox_content').innerHTML = '';
    }
  };
}();

//cookie
XWUZ.cookie = function () {
  var now = new Date();
  var expire = new Date();
  var domain = 'xwuz.com';
  expire.setTime(now.getTime() + 1000 * 60 * 60 * 24 * 90); //90 days
  return {
    set: function (name, value) {
      document.cookie = name + "=" + encodeURIComponent(value) + "; expires=" + expire.toGMTString() + ";domain=" + domain + ";path=/;";
      return value;
    },
    get: function (name) {
      var search, offset, end;
      search = name + "=";
      if (document.cookie.length > 0) {
        offset = document.cookie.indexOf(search);
        if (offset !== -1) {
          offset += search.length;
          end = document.cookie.indexOf(";", offset);
          if (end === -1) {
            end = document.cookie.length;
          }
          return decodeURIComponent(document.cookie.substring(offset, end));
        }
      }
      return ''; //falsy
    },
    del: function (name) {
      var expireNow = new Date();
      document.cookie = name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT" + "; domain=" + domain + ";path=/;";
    }
  };
}();

// menuswitch
XWUZ.menu = function () {
  var menu, status;
  menu = {
    game: {
      position: 0,
      bgpos: 0
    },
    highscore: {
      position: -320,
      bgpos: -72
    },
    about: {
      position: -640,
      bgpos: -182
    }
  };
  menu.game.active = true;

status = {
    running: false,
    steps: 5
  };

return {
    get: function () {
      var name;
      for (name in menu) {
        if (menu.hasOwnProperty(name)) {
          if (menu[name].active) {
            return name;
          }
        }
      }  
    },
    set: function (what) {
      var step, oldwhat;
      if (status.running) {
        return false;
      }
      if (menu[what].active && what === 'game') {
        //if we're at the game and she clicks it again, we're asking her if she wants to start a new game
        XWUZ.say.confirm('<h1>New game</h1>Do you really want to<br />restart your game?');
        return;
      }
      
      if (menu[what].active) {
        return false;
      }
      
      oldwhat = XWUZ.menu.get();
      
      status.running = true;
      status.from = menu[oldwhat].position;
      status.to = menu[what].position;
      status.stepnow = 0;
      
      menu[oldwhat].active = false;
      menu[what].active = true;
      
      document.getElementById('button_' + what).getElementsByTagName('span')[0].style.backgroundPosition = menu[what].bgpos + 'px 0';
      document.getElementById('button_' + oldwhat).getElementsByTagName('span')[0].style.backgroundPosition = menu[oldwhat].bgpos + 'px -41px';
      
      step = function () {
        if (status.stepnow < status.steps) {
          status.stepnow += 1;
          document.getElementById('stage_contents').style.marginLeft = status.from + (status.to - status.from) * ((status.stepnow === status.steps)?(1):(1 - 1 / Math.pow(2, status.stepnow))) + 'px';
          setTimeout(step, 50);
        } else {
          delete status.from;
          delete status.to;
          delete status.stepnow;
          status.running = false;
        }
      };
      step();
      return false;
    }
    
  };
}();

//game pause/resume/restart
XWUZ.flow = function () {
  var status = 'STATIC';
  //we don't have a lot of flow controls by default
  return {
    getstatus: function () {
      return status;
    }, 
    restart: function () {},
    pause: function () {},
    resume: function () {}
  };
}();

//let's roll
//XWUZ.framecheck();

/*global XWUZ */
XWUZ.game = 'bubble';
      
XWUZ.games.bubble = function () {
  return {
    init: function () {
      XWUZ.flow = XWUZ.games[XWUZ.game].flow; //bubble flow controls remapped
      XWUZ.games.bubble.engine.start();
      XWUZ.say.alert('<h1>Bubble Trouble</h1><p style="margin: 0 20px 0 20px; text-align:left;"><img src="/attach/bubble/icon.png" alt="Bubble Trouble" style="width:64px; height:64px;float:left; margin-right:5px;"/>Pop the same color adjecent bubbles. Blocks of at least 3 pop. The more bubbles you pop in a tap, the more points you get.</p>' + '<div style="width:110px; margin:30px auto -30px auto;"></div>');
//<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input type="hidden" name="cmd" value="_s-xclick"><input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" border="0" name="submit" alt="Make payments with PayPal - it\'s fast, free and secure!"><img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----"></form>
      document.body.addEventListener("touchmove", function(e) {
        e.preventDefault();
      }, false);
    },
    flow: function () {
      var status = 'splash';
      //splash, running, paused, gameover
      return {
        getstatus: function () {
          return status;
        }, 
        restart: function () {
          if (status === 'splash') {
            //we have inited and paused before the splash screen appeared
            status = 'running';
            XWUZ.games.bubble.flow.resume();
          } else {
            status = 'running';
            XWUZ.games.bubble.engine.start();
          }
        },
        pause: function () {
          if (status === 'running') {
            status = 'paused';
          }
        },
        resume: function () {
          if (status === 'paused') {
            status = 'running';
          }
        }
      };
    }(),
    engine: function () {
      var gamevars = {
        tablew: 9,
        tableh: 8,
        bubblew: 33,
        bubbleh: 33
      };
      
      var getbubble = function (coords) {
        if (coords.x >= 0 && coords.y >= 0 && coords.x < gamevars.tablew && coords.y < gamevars.tableh) {
          if (document.getElementById('bubble_elem_' + coords.x + '_' + coords.y)) {
            return document.getElementById('bubble_elem_' + coords.x + '_' + coords.y);
          }
        }
      };

that.onmousedown = function () {
          var filled = {};
          var ourcolor = getbubble({x: this.x, y: this.y}).type;

if (XWUZ.games.bubble.engine.floodcheck({x: this.x, y: this.y, type: this.type})) {
            gamevars.points[gamevars.cycle] = 0;
            XWUZ.games.bubble.engine.floodrem({x: this.x, y: this.y});
            XWUZ.games.bubble.engine.setscore();
            gamevars.cycle += 1;
          }
          return false;
        };
        that.ontouchstart = that.onmousedown;
        return that;
      };
      
      return {
        cleanup: function () {
          var x, y;
          gamevars.level = 0;
          gamevars.scoreperlevel = [0];
          gamevars.score = 0;
          gamevars.cycle = 0;
          gamevars.points = [0];
          gamevars.evil = 0.8;
          gamevars.colors = 3;
          for (x = 0; x < gamevars.tablew; x += 1) {
            for (y = 0; y < gamevars.tableh; y += 1) {
              if (getbubble({x: x, y: y})) {
                getbubble({x: x, y: y}).remove();
              }
            }
          }
          //cleanup showing
          document.getElementById('score').className = '';
          document.getElementById('score').innerHTML = gamevars.score;
          document.getElementById('level').innerHTML = gamevars.level;
          document.getElementById('combo').innerHTML = gamevars.points[gamevars.cycle];
          document.getElementById('gamesplayed').innerHTML = gamevars.gamesplayed;
          document.getElementById('yourbest').innerHTML = gamevars.yourbest;
        },
        start: function () {
          gamevars.gamesplayed = parseInt(XWUZ.cookie.get('bubble_gamesplayed'), 10) || 0;
          gamevars.yourbest = parseInt(XWUZ.cookie.get('bubble_bestscore'), 10) || 0;
          XWUZ.games.bubble.engine.cleanup();
          XWUZ.games.bubble.engine.newlevel();
        },
        newlevel: function () {
          if (gamevars.level === 5) {
            gamevars.colors = 4;
            gamevars.evil = 0.7;
          } else if (gamevars.level === 10) {
            gamevars.colors = 5;
            gamevars.evil = 0.6;
          } else if (gamevars.level === 15) {
            gamevars.colors = 6;
            gamevars.evil = 0.5;
          }
          
          gamevars.level += 1;

XWUZ.games.bubble.engine.setlevel();

var x, y, newbubble, newbubbles;
          newbubbles = [];
          for (x = 0; x < gamevars.tablew; x += 1) {
            for (y = 0; y < gamevars.tableh; y += 1) {
              if (!getbubble({x: x, y: y})) {
                newbubble = bubbleconstructor({
                  x: x,
                  y: y,
                  type: Math.random() > gamevars.evil ? (x + y * 2) % 4 : Math.floor(Math.random() * gamevars.colors)
                });
                newbubble.append();
                newbubbles.push({x: x, y: y});
              }
            }
          }
          XWUZ.games.bubble.engine.bulkshow(newbubbles);
          
          //if the level has ended when we just filled up the area, it's over
          if (XWUZ.games.bubble.engine.levelendcheck()) {
            setTimeout(XWUZ.games.bubble.engine.gameover, 600);
          }
        },
        setscore: function () {
          gamevars.score += Math.floor((gamevars.points[gamevars.cycle] * (gamevars.points[gamevars.cycle] - 1)) / 2 * (Math.log(gamevars.level) + 1));
          gamevars.scoreperlevel[gamevars.level] = gamevars.score;
          document.getElementById('score').innerHTML = gamevars.score;
          if (gamevars.score > gamevars.yourbest) {
            document.getElementById('score').className = 'highscore';
          }
          document.getElementById('combo').innerHTML = gamevars.points[gamevars.cycle];
        },
        setlevel: function () {
          document.getElementById('level').innerHTML = gamevars.level;
        },
        floodcheck: function (coords) {
          var dir = {};
          var rv = 0;
          if (getbubble({x: coords.x - 1, y: coords.y}) && getbubble({x: coords.x - 1, y: coords.y}).type === coords.type) {
            rv += 1;
            dir = {x: coords.x - 1, y: coords.y};
          }
          if (getbubble({x: coords.x, y: coords.y - 1}) && getbubble({x: coords.x, y: coords.y - 1}).type === coords.type) {
            rv += 1;
            dir = {x: coords.x, y: coords.y - 1};
          }
          if (getbubble({x: coords.x + 1, y: coords.y}) && getbubble({x: coords.x + 1, y: coords.y}).type === coords.type) {
            rv += 1;
            dir = {x: coords.x + 1, y: coords.y};
          }
          if (getbubble({x: coords.x, y: coords.y + 1}) && getbubble({x: coords.x, y: coords.y + 1}).type === coords.type) {
            rv += 1;
            dir = {x: coords.x, y: coords.y + 1};
          }
          
          if (rv === 0) {
            return false;
          } else if (rv >= 2) {
            return true;
          } else {
            if (coords.tried) {
              return false;
            } else {
              dir.type = coords.type;
              dir.tried = true;
              return XWUZ.games.bubble.engine.floodcheck(dir);
            }
          }
        },
        bulkshow: function (bubbles) {
          //show the bubbles in nphase phases (to save resources)
          var i;
          var nphase = 5;
          var phases = [];
          for (i = 0; i < nphase ; i += 1) {
            phases[i] = [];
          }
          for (i = 0; i < bubbles.length; i += 1) {
            phases[Math.floor(Math.random() * nphase)].push(getbubble({x:  bubbles[i].x, y: bubbles[i].y}));
          }
          var step = function () {
            var i, toshownow, over;
            over = 0;
            if (phases.length > 0) {
              do {
                toshownow = phases.pop();
              } while (toshownow && toshownow.length === 0);
              if (toshownow) {
                for (i = 0; i < toshownow.length; i += 1) {
                  toshownow[i].show();
                }
                setTimeout(step, 50);
              }
            }
          };
          step();
        },
        bulkfall: function (bubbles) {
          var i = 0;
          var step = function () {
            var j;
            if (i < bubbles.length + 3) {
              if (bubbles[i]) {
                for (j = 0; j < bubbles[i].length; j += 1) {
                  bubbles[i][j].style.marginTop = Math.floor(bubbles[i][j].y * gamevars.bubbleh - gamevars.bubbleh / 2) + 'px';
                }
              }
              
              if (bubbles[i - 1]) {
                for (j = 0; j < bubbles[i - 1].length; j += 1) {
                  bubbles[i - 1][j].style.marginTop = bubbles[i - 1][j].y * gamevars.bubbleh - 1 + 'px';
                }
              }
              
              if (bubbles[i - 2]) {
                for (j = 0; j < bubbles[i - 2].length; j += 1) {
                  bubbles[i - 2][j].style.marginTop = bubbles[i - 2][j].y * gamevars.bubbleh - 2 + 'px';
                }
              }

if (bubbles[i - 3]) {
                for (j = 0; j < bubbles[i - 3].length; j += 1) {
                  bubbles[i - 3][j].style.marginTop = bubbles[i - 3][j].y * gamevars.bubbleh + 'px';
                }
              }
              i += 1;
              setTimeout(step, 50);
            }
          };
          step();
        },
        floodrem: function (coords) {
          var ourcolor = getbubble({x: coords.x, y: coords.y}).type;
          var step = function (coordsin) {
            var gb;
            gb = getbubble({x: coordsin.x, y: coordsin.y});
            if (gb && gb.type === ourcolor) {
              gamevars.points[gamevars.cycle] += 1;
              getbubble({x: coordsin.x, y: coordsin.y}).remove();
              step({x: coordsin.x - 1, y: coordsin.y});
              step({x: coordsin.x, y: coordsin.y - 1});
              step({x: coordsin.x + 1, y: coordsin.y});
              step({x: coordsin.x, y: coordsin.y + 1});
            }
          };
          step(coords);
          XWUZ.games.bubble.engine.fall();

//if the level ends after a click, we start a new one
          if (XWUZ.games.bubble.engine.levelendcheck()) {
            setTimeout(XWUZ.games.bubble.engine.newlevel, 200);
          }
        },
        fall: function () {
          var x, y, bubble, bubbles, bubblescol, lastgoody;
          bubbles = [];
          for (x = 0; x < gamevars.tablew; x += 1) {
            bubblescol = [];
            lastgoody = gamevars.tableh - 1;
            for (y = gamevars.tableh - 1; y >= 0 ; y -= 1) {
              bubble = getbubble({x: x, y: y});
              if (bubble) {
                if (lastgoody > y) {
                  bubble.fall({y: lastgoody});
                  bubblescol.push(bubble);
                }
                lastgoody -= 1;
              }
            }
            if (bubblescol.length > 0) {
              bubbles.push(bubblescol);
            }
          }
          XWUZ.games.bubble.engine.bulkfall(bubbles);
        },
        levelendcheck: function () {
          var i;
          var bubbles = document.getElementById('bt_realarea').getElementsByTagName('span');
          for (i = 0; i < bubbles.length; i += 1) {
            if (XWUZ.games.bubble.engine.floodcheck({x: bubbles[i].x, y: bubbles[i].y, type: bubbles[i].type})) {
              return false;
            }
          }
          return true;
        },
        gameover: function () {
          gamevars.gamesplayed += 1;
          XWUZ.cookie.set('bubble_gamesplayed', gamevars.gamesplayed);
          if (gamevars.score > gamevars.yourbest) {
            XWUZ.say.alert('<h1>Game over</h1>Hey, you\'ve beaten your highscore!');
            gamevars.yourbest = gamevars.score;
            XWUZ.cookie.set('bubble_bestscore', gamevars.yourbest);
          } else {
            XWUZ.say.alert('<h1>Game over</h1>How about a new game?');
          }
        }
      };      
    }()
  };
}();

XWUZ.games[XWUZ.game].init();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <title>Bubble Trouble by XWUZ Entertainment</title> 
  <meta name="viewport" content="width = 320,initial-scale=1,user-scalable=no" /> 
  <meta name="description" content="XWUZ Bubble Trouble is a simple but beautiful bubble popping puzzle game optimized for the iPhone. Pop the same color adjecent bubbles by tapping on them. Also works on Safari and Firefox." />

<p>This is an XWUZ game. Check out <a href="http://xwuz.com/" target="_top">our homepage</a> for more games.</p><p>Take a picture of yourself playing the game and send it to <a href="mailto:xwuz@tjp.hu" target="_top">xwuz@tjp.hu</a> :)</p> 
    <table width="100%" id="table_about"> 
      <tr> 
        <td valign="bottom"><a href="http://tjp.hu/" target="_top"><img src="/attach/bubble/l_tjp.png" alt="tjp" /></a></td> 
        <td valign="bottom"><a href="http://trn.hu/" target="_top"><img src="/attach/bubble/l_trn.png" alt="trn" /></a></td> 
        <td valign="bottom"><a href="http://www.xms.hu/" target="_top"><img src="/attach/bubble/l_xms.png" alt="xms" /></a></td> 
        <td valign="bottom"><a href="http://volll.com/" target="_top"><img src="/attach/bubble/l_volll.png" alt="volll" /></a></td> 
      </tr> 
      <tr> 
        <td>Code</td> 
        <td>Design</td> 
        <td>iPhone</td> 
        <td>Big hugs</td> 
      </tr> 
    </table> 
  </div> 
</div></div> 
<div style="width:320px; height: 104px;"> 
<div style="height: 48px; background: #333344; text-align: center; font-size: 16px; line-height: 48px;"> 
  <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=331614220&mt=8" style="color: #9999aa; font-weight: bold;"><span style="color: red;">Now</span> available on the App Store</a> 
</div>

</div>

</div></body> 
</html>

html {
  overflow:hidden;
}

body {
  font-family: helvetica, arial;
  background-color: #000000;
  color: #a3b3c3;
  border:0;
  padding:0;
  margin:0;
  font-size:11px;
  overflow:hidden;
  width: 320px;
  margin: auto;
}

h1 {
  margin:0;
  margin-left:.5em;
}

h2 {
  margin:.4em;
}

h3 {
  font-size:13px;
  margin:12px;
  padding-left:0;margin-bottom:.5em;
  color: #ffffff;
}

p {
  margin:0;
  margin:12px;
  margin-top:.5em;
  margin-bottom:.5em;
}

a {
  color: #ffffff;
}

td {
  text-align:center;
  font-size: 10px;
}

img {
  border:0;
}

.ibox {
  width:320px;
  height:306px;
  overflow:hidden;
  background-color: #000000;
  margin:auto;
}

.iboxcontent {
  width:320px;
  height:306px;
  float:left;
  overflow:hidden;
}

.ibc1 {
  background-color: #3b4859;
  background-image:url(/attach/bubble/bg1.png);
}

.ibc2 {
  background-color: #404d5e;
  background-image:url(/attach/bubble/bg2.png);
}

.adbox {
  text-align:center;
  margin:10px;
}

.fontostext {
  color: #ffffff;
}

#stage_contents {
  width: 10000px;
}

#home_ourgames {
  margin:auto;
}

#gamecontainer {
  width:320px;
  margin:auto;
}

#gamecontainer object {
  width:320px;
  height:356px;
  border:0;
  padding:0;
  margin:0;
  overflow:hidden;
}

#container {
  width:320px;
}

#alertbox {
  display:none;position:absolute;
  z-index:200;
}

#alertbox_flekk {
  position:absolute;
  width:320px;
  height: 356px;
  background-color:#000000;
  opacity: .8;
}

#alertbox_content {
  position:absolute;
  width:320px;
  height:256px;
  margin-top:70px;
  text-align:center;
  color:#ffffff;
}

#alertbox_content .fontostext {
  color:#a3b3c3;
}

#alertbox a {
  margin:10px;
  width:114px;
  height:54px;
  
}

#logo {
  float:right;
  padding:10px;
}

#imenu {
  width:320px;height:41px;
  margin:auto;
  text-align:center;
  background-image:url(/attach/bubble/menu.png);
  background-position:0 0px;
}

#imenu a {
  height:41px;
  display:block;
  float:left;
  overflow:hidden;
}

#imenu #button_game {
  width: 72px;

}

#imenu #button_highscore {
  width: 110px;
}

#imenu #button_about {
  width:70px;
}

#imenu a span {
  background-image:url(/attach/bubble/menu.png);
  display:block;
  height:41px;
}

#imenu #button_game span {
  background-position: 0 0;
  width: 72px;
}

#imenu #button_highscore span {
  background-position: -72px -41px;
  width: 110px;
}

#imenu #button_about span {
  background-position: -182px -41px;
}

#imenu a:hover {
  opacity: .5;
}

#score.highscore {
  color: #ff4444;
}

#button_xwuz {
  position:absolute;
  display:block;
  width:45px;
  height:57px;
  margin: 5px 0 0 267px;
  background-image:url(/attach/bubble/xwuz.png);z-index:1;
  cursor:pointer;
}

#yourbest {
  text-align:center;
  font-weight:bold;
  color:#ffffff;font-size: 45px;
  margin: .5em auto .5em auto;
  background-image:url(/attach/bubble/flekk.png);
  width:296px;
  height:65px;
  padding-top:15px;
}

#preload {
  width:320px;position:absolute;
  visibility:hidden;
  overflow:hidden;
}

#table_about {
  margin-top: 10px;
}

#table_about img {
  vertical-align:middle;
}

#scoretable {
  width: 237px;
  margin-left: 13px;
  margin-top:10px;
  font-size:12px;
  height:17px;
  overflow:hidden;
}

#scoretable div {
  float:left;
}

#score, #combo, #level {
  color:#ffffff;
}

#score {
  width:2em;
}

#level {
  width:1em;
}

#combo {
  width:1.5em;
}

#levelp {
  margin-left: 1.5em;
}

#combop {
  float:right !important;
}

/* BUBBLE TROUBLE [ */
#bt_realarea {
  clear:both;
  padding:0;
  margin-left:11px;
  margin-top:12px;
  width:297px;
  height:264px;
  background-image: url(/attach/bubble/bgch.png); 
  position: relative; /* if it's not here, safari breaks bad */
}

.bubble {
  position:absolute;
  background-image: url(/attach/bubble/b.png);
  display: block;
  width: 33px;
  height: 33px;
  opacity: 0;
}

/* ] BUBBLE TROUBLE */

/* STACK THE LOG [ */
/* ] STACK THE LOG */

Pop out