Skip to content

Instantly share code, notes, and snippets.

@agar3s

agar3s/index.html

Created August 8, 2013 05:28
Show Gist options
  • Save agar3s/6181722 to your computer and use it in GitHub Desktop.
Save agar3s/6181722 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Giovanny.
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>The Game</title>
</head>
<body>
<canvas id="board" width='700' height='600'></canvas>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$('#board').on('mousemove', function(event){
trackCursor(event);
});
});
</script>
</body>
</html>
Raw
script.js
var canvas = document.getElementById("board");
var ctx = canvas.getContext("2d");
var paintCell = function(i, j){
if((i+j)%2==0){
ctx.fillStyle = '#594E3F';
}else{
ctx.fillStyle = '#E7DAAA';
}
ctx.fillRect(150+i*50, 100+j*50, 50, 50);
}
var drawBoard = function(){
ctx.strokeRect(151,101,400,400);
for(var i=0; i<8; i++){
for(var j=0; j<8; j++){
paintCell(i, j);
}
}
}
drawBoard();
var cells = [];
var cursor= {i:0,j:0};
var trackCursor = function(event){
if(event.offsetX>=150&&event.offsetX<550&&
event.offsetY>=100&&event.offsetY<500){
var i = parseInt((event.offsetX-150)/50);
var j = parseInt((event.offsetY-100)/50);
if(cursor.i!=i||cursor.j!=j){
ctx.fillStyle = 'rgba(235,27,59,1)';
ctx.fillRect(150+i*50, 100+j*50, 50, 50);
paintCell(cursor.i, cursor.j);
cursor.i = i;
cursor.j = j;
}
}
}
Raw
style.css
#board {
background: #302A1C;
display: block;
margin: 0 auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment