Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
The Eight Queens Puzzle made with EaselJS
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
var stage;
var chessBoard = [];
var Reds = []; // holds the index of the red marked fields
var Queens = [];
var Queen_locations = []; // store where the queen was placed on the board (numerate the board from the top left)
var Queen_counter = 0;
var tile_size = 35; // size of a tile in pixels
// some of the unusual colors
var dark_red = "#8C2424";
var light_red = "#DE4747";
function init() {
stage = new createjs.Stage("demoCanvas");
stage.enableMouseOver(10);
displayBoard();
for(var i = 0; i < chessBoard.length; i++)
{
chessBoard[i].on("mouseover", colorHover);
chessBoard[i].on("mouseout", colorHover);
chessBoard[i].addEventListener("click", placeQueen);
}
// UNDO Button
var UNDO = new createjs.Text("UNDO", "30px Impact", "black");
UNDO.x = 300;
UNDO.y = 50;
// add a hit box to UNDO
var hit = new createjs.Shape();
hit.graphics.beginFill("#000").drawRect(0,0,UNDO.getMeasuredWidth(), UNDO.getMeasuredHeight());
UNDO.hitArea = hit;
UNDO.on("mouseover", colorHover);
UNDO.on("mouseout", colorHover);
UNDO.addEventListener("click", undoMove);
stage.addChild(UNDO);
// A counter display
var COUNT = new createjs.Text(Queen_counter.toString(), "30px Impact", "black");
COUNT.x = 300;
COUNT.y = 100;
stage.addChild(COUNT);
stage.update();
createjs.Ticker.addEventListener("tick", stage);
// additional functions
function colorHover(event) {
event.target.alpha = (event.type == "mouseover") ? 0.6 : 1;
}
function placeQueen(event)
{
x = event.stageX;
y = event.stageY;
// figure on which tile the queen should be placed on
tileX = Math.floor(x / tile_size);
tileY = Math.floor(y / tile_size);
// alert("Clicked at " + tileX + " , " + tileY);
drawQueen(tileX*tile_size, tileY*tile_size);
}
function undoMove()
{
if(Queens.length > 0)
{
stage.removeChild(Queens[Queens.length-1])
Queens.splice(Queens.length-1,1);
Queen_counter--;
COUNT.text = Queen_counter.toString();
}
// first clear all the Reds
clearReds();
// redraw the Reds
for(var i = 0; i < Queens.length; i++)
{
tileX = Math.floor(Queens[i].x / tile_size);
tileY = Math.floor(Queens[i].y / tile_size);
addReds(tileX,tileY);
}
drawBorder();
}
function displayBoard()
{
for(var i = 0; i < 64; i++)
{
// counting the top left as (0,0)
// left to right each line (then top two bottom from line to line)
x = i % 8;
y = Math.floor(i/8);
var tile = new createjs.Shape();
if(((x + y) % 2) == 1)
{
tile.graphics.beginFill("black").drawRect(x*tile_size,y*tile_size,tile_size,tile_size);
} else {
tile.graphics.beginFill("#C6CACC").drawRect(x*tile_size,y*tile_size,tile_size,tile_size);
}
chessBoard.push(tile);
stage.addChild(chessBoard[i]);
stage.setChildIndex( tile, stage.getNumChildren()-1);
}
drawBorder();
}
function drawBorder()
{
// Draw the border lines
var border = new createjs.Shape();
border.graphics.setStrokeStyle(3).beginStroke("black").moveTo(0,0).lineTo(280,0).lineTo(280,280).lineTo(0,280).lineTo(0,0).endStroke();
stage.addChild(border);
}
function drawQueen(x, y)
{
if(!checkTile(x,y)) {
return;
}
var queen = new createjs.Bitmap("Queen_transparent(37x38).png");
queen.x = x;
queen.y = y;
stage.addChild(queen);
Queens.push(queen);
addReds(tileX,tileY); // mark tiles red
// update the counter
Queen_counter++;
COUNT.text = Queen_counter.toString();
checkWinConditions();
}
function displayWarning(text)
{
var warning = new createjs.Text(text, "15px Impact", "red");
warning.x = 300;
warning.y = 150;
stage.addChild(warning);
setTimeout(function(){stage.removeChild(warning)},2000);
}
function checkTile(x, y)
{
// check if a queen is already placed at that position
for(var i = 0; i < Queens.length; i++)
{
if(Queens[i].x === x && Queens[i].y === y) {
//alert("Already placed a Queen there!");
displayWarning("Already placed a queen there!");
return false;
}
}
// check if the tile is red
tileX = Math.floor(x / tile_size);
tileY = Math.floor(y / tile_size);
idx = CoordToIndex(tileX,tileY);
//DEBUG
//alert(Reds.join('\n')+'\nIdx: ' + idx)
for(var i = 0; i < Reds.length; i++) {
if(idx === Reds[i])
{
//alert("This tile is red!");
displayWarning("This tile is red!");
return false;
}
}
return true;
}
// color the forbidden fields red
// parameters: x - x position of the newly placed Queen
// y - y position of the newly placed Queen
function addReds(x, y)
{
// index of the queen
q_idx = CoordToIndex(x,y);
// add red horizontally
for(var i = Math.floor((q_idx-1)/8)*8 +1; i <= (Math.floor((q_idx-1)/8)+1)*8; i++)
{
if(i !== q_idx)
{
Reds.push(i);
}
}
// add red vertically
for(var i = q_idx % 8; i < 65; i += 8) {
if(i !== q_idx)
{
Reds.push(i);
}
}
// add red across
// top left and bottom right
i = x-1; j = y-1;
while(i > -1 && j > -1) {
Reds.push(CoordToIndex(i,j));
i--; j--;
}
i = x+1; j = y+1;
while(i < 8 && j < 8) {
Reds.push(CoordToIndex(i,j));
i++;j++;
}
// top right and bottom left
i = x-1; j = y+1;
while(i > -1 && j < 8) {
Reds.push(CoordToIndex(i,j));
i--;j++;
}
i = x+1; j = y-1;
while(i < 8 && j > -1) {
Reds.push(CoordToIndex(i,j));
i++;j--;
}
// draw Reds again
drawReds();
}
function drawReds()
{
for(var i = 0; i < Reds.length; i++) {
x = IndexToXCoord(Reds[i]);
y = IndexToYCoord(Reds[i]);
tile = new createjs.Shape();
if(((x + y) % 2) == 1) {
tile.graphics.beginFill(dark_red).drawRect(x*tile_size,y*tile_size,tile_size,tile_size);
} else {
tile.graphics.beginFill(light_red).drawRect(x*tile_size,y*tile_size,tile_size,tile_size);
}
stage.addChild(tile);
}
drawBorder();
}
function clearReds()
{
for(var i = 0; i < Reds.length; i++) {
x = IndexToXCoord(Reds[i]);
y = IndexToYCoord(Reds[i]);
tile = new createjs.Shape();
if(((x + y) % 2) == 1)
{
tile.graphics.beginFill("black").drawRect(x*tile_size,y*tile_size,tile_size,tile_size);
} else {
tile.graphics.beginFill("#C6CACC").drawRect(x*tile_size,y*tile_size,tile_size,tile_size);
}
stage.addChild(tile);
}
Reds = [];
}
function CoordToIndex(x,y) { return y * 8 + x + 1;}
function IndexToXCoord(idx) {return (idx-1) % 8;}
function IndexToYCoord(idx) {return Math.floor((idx-1) / 8);}
function checkWinConditions()
{
if(Queen_counter == 8)
{
var win_text = new createjs.Text("Congrats, you've solved\nthe 8 Queens Puzzle!", "20px Impact", "green");
win_text.x = 300;
win_text.y = 180;
stage.addChild(win_text);
var success = new createjs.Bitmap("great_success.jpg");
success.x = 300;
success.y = 50;
stage.addChild(success);
}
}
}
</script>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="400">
alternate content
</canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment