Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
  </head>
  <body>
    <div class="container">
      <div class="row" id="r1">
        <div class="box" id="c1"></div>
        <div class="box" id="c2"></div>
        <div class="box" id="c3"></div>
        <div class="box" id="c4"></div>
        <div class="box" id="c5"></div>
        <div class="box" id="c6"></div>
        <div class="box" id="c7"></div>
        <div class="box" id="c8"></div>
        <div class="box" id="c9"></div>
        <div class="box" id="c10"></div>
      </div>
      <div class="row" id="r2">
        <div class="box" id="c1"></div>
        <div class="box" id="c2"></div>
        <div class="box" id="c3"></div>
        <div class="box" id="c4"></div>
        <div class="box" id="c5"></div>
        <div class="box" id="c6"></div>
        <div class="box" id="c7"></div>
        <div class="box" id="c8"></div>
        <div class="box" id="c9"></div>
        <div class="box" id="c10"></div>
      </div>
      <div class="row" id="r3">
        <div class="box" id="c1"></div>
        <div class="box" id="c2"></div>
        <div class="box" id="c3"></div>
        <div class="box" id="c4"></div>
        <div class="box" id="c5"></div>
        <div class="box" id="c6"></div>
        <div class="box" id="c7"></div>
        <div class="box" id="c8"></div>
        <div class="box" id="c9"></div>
        <div class="box" id="c10"></div>
      </div>
      <div class="row" id="r4">
        <div class="box" id="c1"></div>
        <div class="box" id="c2"></div>
        <div class="box" id="c3"></div>
        <div class="box" id="c4"></div>
        <div class="box" id="c5"></div>
        <div class="box" id="c6"></div>
        <div class="box" id="c7"></div>
        <div class="box" id="c8"></div>
        <div class="box" id="c9"></div>
        <div class="box" id="c10"></div>
      </div>
      <div class="row" id="r5">
        <div class="box" id="c1"></div>
        <div class="box" id="c2"></div>
        <div class="box" id="c3"></div>
        <div class="box" id="c4"></div>
        <div class="box" id="c5"></div>
        <div class="box" id="c6"></div>
        <div class="box" id="c7"></div>
        <div class="box" id="c8"></div>
        <div class="box" id="c9"></div>
        <div class="box" id="c10"></div>
      </div>
      <div class="row" id="r6">
        <div class="box" id="c1"></div>
        <div class="box" id="c2"></div>
        <div class="box" id="c3"></div>
        <div class="box" id="c4"></div>
        <div class="box" id="c5"></div>
        <div class="box" id="c6"></div>
        <div class="box" id="c7"></div>
        <div class="box" id="c8"></div>
        <div class="box" id="c9"></div>
        <div class="box" id="c10"></div>
      </div>
      <div class="row" id="r7">
        <div class="box" id="c1"></div>
        <div class="box" id="c2"></div>
        <div class="box" id="c3"></div>
        <div class="box" id="c4"></div>
        <div class="box" id="c5"></div>
        <div class="box" id="c6"></div>
        <div class="box" id="c7"></div>
        <div class="box" id="c8"></div>
        <div class="box" id="c9"></div>
        <div class="box" id="c10"></div>
      </div>
      <div class="row" id="r8">
        <div class="box" id="c1"></div>
        <div class="box" id="c2"></div>
        <div class="box" id="c3"></div>
        <div class="box" id="c4"></div>
        <div class="box" id="c5"></div>
        <div class="box" id="c6"></div>
        <div class="box" id="c7"></div>
        <div class="box" id="c8"></div>
        <div class="box" id="c9"></div>
        <div class="box" id="c10"></div>
      </div>
      <div class="row" id="r9">
        <div class="box" id="c1"></div>
        <div class="box" id="c2"></div>
        <div class="box" id="c3"></div>
        <div class="box" id="c4"></div>
        <div class="box" id="c5"></div>
        <div class="box" id="c6"></div>
        <div class="box" id="c7"></div>
        <div class="box" id="c8"></div>
        <div class="box" id="c9"></div>
        <div class="box" id="c10"></div>
      </div>
      <div class="row" id="r10">
        <div class="box" id="c1"></div>
        <div class="box" id="c2"></div>
        <div class="box" id="c3"></div>
        <div class="box" id="c4"></div>
        <div class="box" id="c5"></div>
        <div class="box" id="c6"></div>
        <div class="box" id="c7"></div>
        <div class="box" id="c8"></div>
        <div class="box" id="c9"></div>
        <div class="box" id="c10"></div>
      </div>
    </div>
  </body>
</html>
/* window.onload = function(){
  // GameBoard Class
    // Fields 
      // division
      // coords
    // Methods
      // DrawBoard
      // drawCharacter
      // setGridDivision
      // Clear
  
  // Function is immediately and whatever is returned by (function) is assigned to gameBoard
  var gameBoard = (function(){
    Private Variables
    // Create canvas
    var canvas = document.createElement('canvas');
    canvas.setAttribute('id','canvas');
    canvas.setAttribute('style','height:400px'); // height
    canvas.style.width='400px'; // width alternative way to set
    var context = canvas.getContext('2d');
    
    
    var division = {
      x:0,
      y:0
    };
    
    // Methods to give gameBoard
    return function(){
      function setDiv(){
        var x = parseInt(canvas.style.width.substr(0,canvas.style.width.length-2),10) ;
        var y = parseInt(canvas.style.height.substr(0,canvas.style.height.length-2),10) ;
        
        if ( x > y) canvas.style.height = x+'px';
        if ( x < y) canvas.style.width = y+'px';
        else canvas.style.width = canvas.style.height;
        
        for ( var i = 10 ; i <= x  ; i++ ){
          if ( x%i === 0 ) break ; 
        }
        division.x = i ; 
        division.y = i ; 
      }
      
      function drawBoard(){
        document.body.appendChild(canvas);
      }
      
      function drawGuide(){        
        var x = parseInt(canvas.style.width.substr(0,canvas.style.width.length-2),10) ;
        var y = parseInt(canvas.style.height.substr(0,canvas.style.height.length-2),10) ;
        for ( var k = 0 ; k <= x  ; k=k+division.x){
          context.fillStyle="#FFF";
          context.moveTo(k,0);
          context.lineTo(k,y);
          context.stroke();
          console.log(k);
        }
        for ( k = 0 ; k <= y  ; k=k+division.y){
          context.fillStyle="#375";
          context.moveTo(0,k);
          context.lineTo(x,k);
          context.stroke();
        }
      }
      
      setDiv();
      console.log(division.x+" "+division.y);
      drawBoard();
      drawGuide();
    };
    
  }());
  
  
  new gameBoard();
};
 */
Output 300px

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

Dismiss x
public
Bin info
kizzlebotpro
0viewers