Fire JS Bin - Entanglement

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

Find

→ ←

⟲

Replace

⊗ All Replace

function aMap(canvas, x, y, width, height, scale)
{
  this.canvas = document.getElementById(canvas);
  this.canvas.code = this;
  this.maxX = 0;
  this.maxY = 0;

this.setWindow = function(width, height)
  {
    if(width && height)
    {
      this.width = width;
      this.height = height;
    } else {
      this.canvas.width = this.canvas.offsetWidth;
      this.canvas.height = this.canvas.offsetHeight;
      this.width = this.canvas.offsetWidth;
      this.height = this.canvas.offsetHeight;
    }
  }
  this.setWindow(width, height);

this.setFocus = function(x,y,scale)
  {
    this.scale = scale;
    this.x = x + (this.width/(2 * scale));
    this.y = y + (this.height/(2 * scale));
  }
  this.setFocus(x, y, scale);

this.rescale = function(x,y)
  {
    if (!x && !y)
    {
      this.setWindow();
      this.setFocus(0, 0, this.scale);
      this.render();
    }
    if (Math.abs(x) > this.maxX)
    {
      this.maxX = Math.abs(x);
      if (this.scale > (this.width / (2 * (this.maxX + GRID_X))))
      {
        this.setWindow();
        this.setFocus(0, 0, this.width / (2 * (this.maxX + GRID_X)));
        this.render();
      }
    }
    if (Math.abs(y) > this.maxY)
    {
      this.maxY = Math.abs(y);
      if (this.scale > (this.height / (2 * (this.maxY + GRID_Y))))
      {
        this.setWindow();
        this.setFocus(0, 0, this.height / (2 * (this.maxY + GRID_Y)));
        this.render();
      }
    }
  }

this.holding = false;
  this.mouseX = 0;
  this.mouseY = 0;
  this.canvas.onmousemove = function (e)
  {
    if(e.offsetX) {
        this.code.mouseX = e.offsetX;
        this.code.mouseY = e.offsetY;
    }
    else
    {
      if(e.layerX) {
        this.code.mouseX = e.layerX;
        this.code.mouseY = e.layerY;
      }
      else
      {
        this.code.mouseX = e.clientX;
        this.code.mouseY = e.clientY;
      }
    }
  }
  this.canvas.onclick = function (e)
  {
  }

this.context = this.canvas.getContext("2d");
  this.map = new Array();

this.add = function(item)
  {
    this.map.splice(0,0,item);
    this.isZ = false;
    return item;
  }

this.remove = function(item)
  {
    for (x in this.map) if(item == this.map[x]) this.map.splice(x,1);
  }

// Conversions

this.world2windowX = function(worldX, windowX) {return (this.x + worldX + windowX) * this.scale;};
  this.world2windowY = function(worldY, windowY) {return ((this.y + worldY) + windowY) * this.scale;};
  this.window2worldX = function(windowX) {return (windowX / this.scale) - this.x;};
  this.window2worldY = function(windowY) {return (windowY / this.scale) - this.y;};

this.isZ = false; //makes sure all map items are in the right Z order
  this.update = function()
  {
    for (x in this.map)
    {
      this.map[x].update();
    }
    if (!this.isZ)
    {
      this.map.sort(function(a, b){return (a.offsetZ) - (b.offsetZ);});
      this.isZ = true;
    }
  }

this.render = function()
  {
    this.context.clearRect(0, 0, this.width, this.height);
    for (x in this.map)
    {
      this.map[x].render();
    }
  }

this.drawPath = function(x, y, scale, point1, point2, color1, color2, backgroundColor)
  {
   if ((color1 != 'gray') || (!gameHasBeenWon))
   {
    var oX = (this.x + x) * this.scale;
    var oY = (this.y + y) * this.scale;
    var rX = OFFSET_X * scale;
    var rY = OFFSET_Y * scale;

var x1 = oX + getPointX(point1, rX);
    var y1 = oY + getPointY(point1, rY);
    var x2 = oX + getPointX(point2, rX);
    var y2 = oY + getPointY(point2, rY);

// Path Border
    if (!backgroundColor)
    {
      this.context.strokeStyle = '#fff';
    } else {
      this.context.strokeStyle = backgroundColor;
    }
    this.context.lineWidth = 22 * scale;
    if (gameHasBeenWon) this.context.lineWidth = 36 * scale;
    this.context.beginPath();
    this.context.moveTo(x1, y1);
    this.context.bezierCurveTo(oX + getBezierX(point1, rX), oY + getBezierY(point1, rY), oX + getBezierX(point2, rX), oY + getBezierY(point2, rY), x2, y2);
//  this.context.closePath();
    this.context.stroke();

// Colorful Path
    if ((!color2) || (color1 == color2))
    {
      this.context.strokeStyle = color1;
    } else {
      var gradient = this.context.createLinearGradient(x1, y1, x2, y2);
      gradient.addColorStop(0.1, color1);
      gradient.addColorStop(0.9, color2);
      this.context.strokeStyle = gradient;
    }
    this.context.lineWidth = 14 * scale;
    if (gameHasBeenWon) this.context.lineWidth = 28 * scale;
    this.context.beginPath();
    this.context.moveTo(x1, y1);
    this.context.bezierCurveTo(oX + getBezierX(point1, rX), oY + getBezierY(point1, rY), oX + getBezierX(point2, rX), oY + getBezierY(point2, rY), x2, y2);
//  this.context.closePath();
    this.context.stroke();
   }
  }

this.drawHexagon = function(x, y, scale, color)
  {
//   if (!gameHasBeenWon)

var oX = (this.x + x) * this.scale;
    var oY = (this.y + y) * this.scale;
    var sY = OFFSET_Y * scale;
    var sX = OFFSET_X * scale;

this.context.fillStyle = color;
    this.context.strokeStyle = '#aaa';
    this.context.lineWidth = this.scale;

this.context.beginPath();
    this.context.moveTo(oX - sX, oY - sY);
    this.context.lineTo(oX + sX, oY - sY);
    this.context.lineTo(oX + 2 * sX, oY);
    this.context.lineTo(oX + sX, oY + sY);
    this.context.lineTo(oX - sX, oY + sY);
    this.context.lineTo(oX - 2 * sX, oY);
    this.context.lineTo(oX - sX, oY - sY);
    this.context.closePath();

this.context.fill();
//    this.context.stroke();

var bevel = +0.92;
    var clear = 'rgba(255,255,255,0)';
    var front = 'rgba(255,255,255,0.5)';
    var frontSide = 'rgba(255,255,255,0.15)';
    var back = 'rgba(0,0,0,0.5)';
    var backSide = 'rgba(0,0,0,0.15)';
    var gradient;

gradient = this.context.createLinearGradient(oX, oY, oX, oY - sY);
    gradient.addColorStop(bevel, clear);
    gradient.addColorStop(1, frontSide);
    this.context.fillStyle = gradient;
    this.context.beginPath();
    this.context.moveTo(oX, oY);
    this.context.lineTo(oX - sX, oY - sY);
    this.context.lineTo(oX + sX, oY - sY);
    this.context.closePath();
    this.context.fill();

gradient = this.context.createLinearGradient(oX, oY, oX + 1.5 * sX, oY - 0.5 * sY);
    gradient.addColorStop(bevel, clear);
    gradient.addColorStop(1, backSide);
    this.context.fillStyle = gradient;
    this.context.beginPath();
    this.context.moveTo(oX, oY);
    this.context.lineTo(oX + sX, oY - sY);
    this.context.lineTo(oX + 2 * sX, oY);
    this.context.closePath();
    this.context.fill();

gradient = this.context.createLinearGradient(oX, oY, oX + 1.5 * sX, oY + 0.5 * sY);
    gradient.addColorStop(bevel, clear);
    gradient.addColorStop(1, back);
    this.context.fillStyle = gradient;
    this.context.beginPath();
    this.context.moveTo(oX, oY);
    this.context.lineTo(oX + 2 * sX, oY);
    this.context.lineTo(oX + sX, oY + sY);
    this.context.closePath();
    this.context.fill();

gradient = this.context.createLinearGradient(oX, oY, oX, oY + sY);
    gradient.addColorStop(bevel, clear);
    gradient.addColorStop(1, backSide);
    this.context.fillStyle = gradient;
    this.context.beginPath();
    this.context.moveTo(oX, oY);
    this.context.lineTo(oX + sX, oY + sY);
    this.context.lineTo(oX - sX, oY + sY);
    this.context.closePath();
    this.context.fill();

gradient = this.context.createLinearGradient(oX, oY, oX - 1.5 * sX, oY + 0.5 * sY);
    gradient.addColorStop(bevel, clear);
    gradient.addColorStop(1, frontSide);
    this.context.fillStyle = gradient;
    this.context.beginPath();
    this.context.moveTo(oX, oY);
    this.context.lineTo(oX - sX, oY + sY);
    this.context.lineTo(oX - 2 * sX, oY);
    this.context.closePath();
    this.context.fill();

gradient = this.context.createLinearGradient(oX, oY, oX - 1.5 * sX, oY - 0.5 * sY);
    gradient.addColorStop(bevel, clear);
    gradient.addColorStop(1, front);
    this.context.fillStyle = gradient;
    this.context.beginPath();
    this.context.moveTo(oX, oY);
    this.context.lineTo(oX - 2 * sX, oY);
    this.context.lineTo(oX - sX, oY - sY);
    this.context.closePath();
    this.context.fill();

//    this.context.stroke();

}

this.update = function ()
  {
  }

this.tiles = [];
  this.addTile = function(item)
  {
    this.tiles.splice(0,0,item);
    return item;
  }

this.removeTile = function(item)
  {
    if (!item) item = this.tiles[0];
    for (x in this.tiles) if(item == this.tiles[x])
    {
      this.tiles.splice(x,1);
      return item;
    }
    return false;
  }

this.swapTiles = function() //puts the last tile in the sequence at the front
  {
    if (this.tiles.length > 1)
    {
      return this.addTile(this.removeTile(this.tiles[this.tiles.length - 1]));
    }
    return false;
  }

this.highScore = 0;
  this.score = 0;

}

This code comes from: http://www.quirksmode.org/js/cookies.html
Copyright Information: http://www.quirksmode.org/about/copyright.html

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function eraseCookie(name) {
  createCookie(name,"",-1);
}

//gamemenu.js
function beginGame()
{
  if (!readCookie('hi')) showMessage(INSTRUCTIONS, 400, 300, false, false, true);
  document.getElementById('menu').style.display = 'block';
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <title>Entanglement</title> 
    <meta name="keywords" http-equiv="keywords" content="What a tangled web we weave." /> 
    <meta name="description" content="Get more tangled than your friends to win the game of Entanglement." /> 
    <meta http-equiv="X-UA-Compatible" content="chrome=1"> 
  </head> 
  <body class="solitaire" onload="loadPage();" onresize="gameBoard.rescale(); if(numberOfTeams == 1) drawSolitaireScore();"> 
    <h1 id="title"><span>Entanglement</span></h1> 
    <div id="scores"></div> 
    <div id="msg"> 
    </div> 
    <form action="http://gopherwoodstudios.com/entanglement/" method="get" id="menu"> 
      <div id="form-go"> 
        <select name="n"> 
          <option value="1">Basic Solitaire</option> 
          <option value="1a">Two Tile Tangle (Locked)</option> 
          <option value="local-multiplayer">Local Multiplayer</option> 
        </select> 
        <input type="submit" value="Go >" /> 
      </div> 
      <div id="form-stop"></div> 
    </form> 
 
    <canvas id="game"></canvas> 
    <canvas id="preview" width="200" height="200"></canvas> 
    <canvas id="queue" width="200" height="200"></canvas> 
    <div style="position: absolute; z-index: 93; right: 10px; bottom: 5px; font-weight: bold; font-size: 12px; font-family: candara, arial, sans-serif;"><a href="javascript:showMessage(INSTRUCTIONS, 400, 300, false, false, true);" style="font-weight: bold; color: #800;">HOW TO PLAY</a> - <a href="http://blog.gopherwoodstudios.com/" style="color: #aaa; text-decoration: none;"> Stay updated or report issues »</a></div> 
    <a href="http://gopherwoodstudios.com/game.asp" class="corner-link"><span>More Games</span></a> 
    <div id="message-box"></div> 
  </body> 
</html>

body {
   background: #fff8bc url('/attach/bg.png');
   font-family: arial, sans serif;
   margin: 0;
   padding: 0;
   overflow: hidden;
 }
   
 .local-multiplayer {
   background: url('/attach/bg-local.png');
 }
   
   h1 {font-size: 1.2em; color: #222; position: absolute; z-index: 100; top: 0px; left: 0px; right: 0px; height: 55px; background: url('/attach/entanglement-logo.png') 25px 5px no-repeat;}
   h1 span {display: none;}
   img {border: none;}
 form {position: absolute; top: 240px; left: 150px;}

#tag-line {display: none;}
   #branding {position: absolute; right: 10px; top: 55px;}
   #menu {position: absolute; top: 75px; left: 2px; display: none; z-index: 98; background: url('/attach/menu.png') no-repeat; padding: 188px 0 0 170px;}
   #ban-button {position: absolute; top: 238px; right: 5px; font-size: 0.6em;}
   #game {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     margin: 0;
 }

#preview {position: absolute; width: 20px; height: 20px; cursor: pointer;}
   #queue {position: absolute; width: 200px; height: 200px; cursor: pointer; bottom: 63px; left: 10px;}
   #msg {text-align: center; font-size: 0.9em; font-weight: bold; position: absolute; bottom: 205px; left: 15px; width: 180px; z-index: 99;}
   #scores {text-align: left; font-size: 0.9em; font-weight: bold; position: absolute; top: 60px; left: 15px; z-index: 98;}
   #form-stop {text-align: left; font-size: 0.9em; font-weight: bold;}
   #bar {width: 100%; position: absolute; bottom: 0px; height: 15px;}
   .progress {background: yellow;}
   #begin {font-size: 1.2em; line-height: 1.6em; padding: 5px 15px; width: 200px; text-align: center; margin: 0.4em; background: #fff; cursor: pointer; display: block; font-weight: bold;}
   #instructions {text-align: justify; position: absolute; top: 75px; bottom: 175px; left: 3em; right: 3em; padding: 0 2em; line-height: 1.6em; font-size: 0.9em; background: transparent url('/attach/instructions-bg.png') bottom center no-repeat;}
 #guesses {font-size: 0.8em; color: #888; margin: 1em;}

a.corner-link {background: url('/attach/flip.png') 5px 0px no-repeat; width: 34px; height: 30px; z-index: 1000; position: absolute; display: block; top: 0px; right: 0px;}
   a.corner-link:hover {background: url('/attach/flip.png') bottom left no-repeat; width: 100px; height: 100px; position: absolute; display: block; top: 0px; right: 0px;}
 a.corner-link span {display: none;}

a {text-decoration: none;}

/* Message Box Properties */
    h2 {font-size: 1em; margin: 0; padding: 0; line-height: 1.8em; background: #eee; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.64, #fff), color-stop(0.27, #eee)); background: -moz-linear-gradient(center bottom, #fff 64%, #eee 27%);}
    #message-box {display: none; z-index: 1008; position: absolute; top: 50%; left: 50%; border: 3px solid #fff; border-radius: 5px; text-align: center; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAANSURBVBhXY/j///9dAAnZA9um4/aEAAAAAElFTkSuQmCC);}
    #message-box p {line-height: 1.5em; font-size: 0.9em; margin: 1em; text-align: justify;}
    .return:link, .return:visited {font-size: 0.8em; position: absolute; top: 2px; right: 2px; line-height: 1.8em; height: 1.8em; width: 1.8em; text-align: center; border: 1px solid #ddd; border-radius: 4px; color: #aaa; font-weight: bold; background: #f8f8f8; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.64, #fff), color-stop(0.27, #eee)); background: -moz-linear-gradient(center bottom, #fff 64%, #eee 27%);}
    .return:active, .return:hover {font-size: 0.8em; position: absolute; top: 2px; right: 2px; line-height: 1.8em; height: 1.8em; width: 1.8em; text-align: center; border: 1px solid #aaa; border-radius: 4px; color: #aaa; font-weight: bold; background: #eee; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.27, #fff), color-stop(0.64, #eee)); background: -moz-linear-gradient(center bottom, #fff 27%, #eee 64%);}
    .button:link, .button:visited {margin: 0 3em; padding: 0 1em; display: block; line-height: 2em; height: 2em; text-align: center; border: 1px solid #ddd; border-radius: 4px; color: #aaa; font-weight: bold; background: #f8f8f8; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.64, #fff), color-stop(0.27, #eee)); background: -moz-linear-gradient(center bottom, #fff 64%, #eee 27%);}
    .button:active, .button:hover {margin: 0 3em; padding: 0 1em;  display: block; line-height: 2em; height: 2em; text-align: center; border: 1px solid #aaa; border-radius: 4px; color: #aaa; font-weight: bold; background: #eee; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.27, #fff), color-stop(0.64, #eee)); background: -moz-linear-gradient(center bottom, #fff 27%, #eee 64%);}
    #message-box .button {position: absolute; bottom: 15px; left: 50%; margin: 0 0 0 -100px; width: 200px; padding: 0;}
    #browsers {margin: 5px 60px; padding: 0; width: 288px; height: 72px;}
    #browsers li {float: left; margin: 0; padding: 0; list-style: none;}
    #browsers a {height: 72px; width: 72px; display: block;}
    #browsers span {display: none;}
    .opera {background: url('/attach/browsers.png') -216px 0px no-repeat;}
    .firefox {background: url('/attach/browsers.png') -144px 0px no-repeat;}
    .chrome {background: url('/attach/browsers.png') -72px 0px no-repeat;}
    .safari {background: url('/attach/browsers.png') 0px 0px no-repeat;}

Pop out