Created
July 8, 2012 20:53
-
-
Save Warpten/3072744 to your computer and use it in GitHub Desktop.
Chess over Internet sketch 0.1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function () { | |
var Game = (function() { | |
var Game = function(domElem) { | |
var objInstance = new Game.fn.init(domElem); | |
// Append click handler | |
$(domElem).click(function(eventData) { | |
Game.fn.onClick(eventData.pageX, eventData.pageY, objInstance); | |
}); | |
return objInstance; | |
}; | |
Game.fn = Game.prototype = { | |
constructor: Game, | |
init: function(dom) { | |
return this; | |
}, | |
setRenderer: function(renderer) { this._renderer = renderer; }, | |
getRenderer: function() { return this._renderer; }, | |
/* | |
* Initiates a new game | |
*/ | |
newGame: function(starterSide) { | |
}, | |
/* | |
* Handles click event | |
*/ | |
onClick: function(x, y, obj) { | |
}, | |
}; | |
return Game; | |
})(); | |
// Give the init function the Game prototype for later instantiation | |
Game.fn.init.prototype = Game.fn; | |
// Expose Game to the global scope | |
window.Game = Game; | |
})(window); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function (window, undefined) { | |
var ChessEnums = { | |
Piece: { | |
KING: 1 << 0, | |
QUEEN: 1 << 1, | |
KNIGHT: 1 << 2, | |
BISHOP: 1 << 3, | |
ROOK: 1 << 4, | |
PAWN: 1 << 5, | |
BLACK: 1 << 6, | |
WHITE: 1 << 7, | |
}, | |
State: { | |
STATE_DUMP_ACS: false, // Dump attack cells | |
STATE_TESTING: false, // Enables/Disables side toggling after a move has been done | |
}, | |
}; | |
window.ChessEnums = ChessEnums; | |
})(window); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>EcmaChess v1.0</title> | |
<style type="text/css"> | |
canvas#diagram { | |
display: block; | |
border-radius: 3px; | |
margin-left: auto; | |
margin-right: auto; | |
border: 1px solid black; | |
box-shadow: -1px -1px 2px rgba(9, 9, 9, 0.2), 1px -1px 2px rgba(9, 9, 9, 0.2), 1px 1px 2px rgba(9, 9, 9, 0.2), -1px 1px 2px rgba(9, 9, 9, 0.2); | |
background-image: url(./imgs/boardbg.png); | |
background-size: 100%; | |
background-position: 0 0; | |
} | |
body { | |
width: 500px; | |
height: auto; | |
margin-left: auto; | |
margin-right: auto; | |
position: relative; | |
} | |
div#wrapper { position: relative; } | |
div#content { margin-top: 10px; } | |
div#content select { | |
border: 1px solid black; | |
padding: 4px; | |
border-radius: 3px; | |
width: 120px; | |
} | |
div#content input[type="button"] { | |
border: 1px solid black; | |
padding: 4px; | |
border-radius: 3px; | |
background: white; | |
} | |
div#wrapper canvas { position: absolute; } | |
canvas#diagram { z-index: 100; } | |
canvas#highlighter { z-index: 200; } | |
canvas#piecesHolder { z-index: 300; } | |
</style> | |
</head> | |
<body> | |
<div id="wrapper"> | |
<canvas id="diagram"></canvas> | |
<canvas id="highlighter"></canvas> | |
<canvas id="piecesHolder">Your browser needs to handle canvas for this demo to work.</canvas> | |
</div> | |
<div id="content">Play as <select name="startSide"> | |
<option value="64" selected="selected">White</option> | |
<option value="128">Black</option> | |
</select> <input type="button" value="Start a new game" id="newGame" /></div> | |
<!-- Using non-minimized version for development --> | |
<script src="./js/libs/jquery-1.6.2.js"></script> | |
<script type="text/javascript" src="./js/renderer.js"></script> | |
<script type="text/javascript" src="./js/board.js"></script> | |
<script type="text/javascript"> | |
$(function() { | |
var diagramNode = document.getElementById("diagram"); | |
var highlightNode = document.getElementById("highlighter"); | |
var piecesHolder = document.getElementById("piecesHolder"); | |
var game = new Game(); | |
game.setRenderer(new Renderer(diagramNode, highlightNode, piecesHolder, document.getElementById("wrapper"))); | |
$("input#newGame").click(function() { | |
game.newGame(parseInt($("select[name='startSide'] option:selected").val())); | |
}); | |
}); | |
</script> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function (window, undefined) { | |
var Piece = (function() { | |
var Piece = function(typeMask, x, y, plrControl) { | |
return new Piece.fn.init(typeMask); | |
}; | |
Piece.fn = Piece.prototype = { | |
constructor: Piece, | |
init: function() { | |
return this; | |
}, | |
}; | |
return Piece; | |
})(); | |
// Give the init function the Piece prototype for later instantiation | |
Piece.fn.init.prototype = Piece.fn; | |
// Expose Piece to the global scope | |
window.Piece = Piece; | |
})(window); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function () { | |
var Renderer = (function() { | |
var Renderer = function(diagramLayer, highlighter, piecesLayer, wrapper) { | |
return new Renderer.fn.init(diagramLayer, highlighter, piecesLayer, wrapper); | |
}; | |
Renderer.fn = Renderer.prototype = { | |
constructor: Renderer, | |
init: function(diagramLayer, highlighter, piecesLayer, wrapper) { | |
this._diagramLayer = diagramLayer; | |
this._highlighter = highlighter; | |
this._piecesLayer = piecesLayer; | |
this.setCellSize(40); | |
var setSizing = function(obj, size) { | |
$(obj).css({ | |
'width': size + 'px', | |
'height': size + 'px', | |
}); | |
obj.width = obj.height = size; | |
}; | |
setSizing(diagramLayer, this.getCellSize() * 8); | |
setSizing(highlighter, this.getCellSize() * 8); | |
setSizing(piecesLayer, this.getCellSize() * 8); | |
setSizing(wrapper, this.getCellSize() * 8); | |
this._positionOffset = $(diagramLayer).offset(); | |
return this; | |
}, | |
setCellSize: function(size) { this._cellSize = size; }, | |
getCellSize: function() { return this._cellSize; }, | |
initBoard: function() { | |
}, | |
}; | |
return Renderer; | |
})(); | |
// Give the init function the Renderer prototype for later instantiation | |
Renderer.fn.init.prototype = Renderer.fn; | |
// Expose Renderer to the global scope | |
window.Renderer = Renderer; | |
})(window); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment