<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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |