Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="map_piece" ></div>
</body>
</html>
 
.map_piece {
  border:0px solid;
  height:60px;
  width:60px;
  position:absolute;
  transform: scaleY(.5)skew(45deg,-45deg)translate(0px,300px);
  display:none;
}
 
var map = [
  "g","g","g","s","s",
  "g","g","s","s","w",
  "g","g","s","w","w",
  "g","g","s","w","w",
  "g","g","s","w","w"
];
var x = 0;
var y = 0;
var count = 0;
var background;
function init() { $.each( map, function( key, value ) {
    
    x += 30;
    y += 60;
  if (count > 4){
    x -= 120;
    y -= 360;
    count = 0;
  }
    if (value == "g"){background = "#00ff00";}
    if (value == "w"){background = "#0000ff";}
    if (value == "s"){background = "#ffff00";}
    $('.map_piece').clone().appendTo('body').css({'top' : x + 'px', 'left' : y + 'px','display' : 'block','background' : background});
      count ++;
});
                }
$('document').ready(function(){
 init(); 
});
Output

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

Dismiss x
public
Bin info
nightstalker22pro
0viewers