GridBoard - A Grid-Based Games Framework For TypeScript/JavaScript
Getting Started with GridBoard
Installation
npm install --save gridboard
Also available UMD package defines a window.gridboard
global variable.
Can be used for <script> by this link: https://unpkg.com/gridboard@4.1.4/dist/gridboard.js
or minified version: https://unpkg.com/gridboard@4.1.4/dist/gridboard.min.js
Create A Empty Chess Board (use TypeScript)
; ;; ;
Create An Empty Chess Board (use JavaScript)
In Node.js
const GridBoard = ; var board = 8 8;
In Browser (use RequireJS)
;
In Browser
Add this tag in your html file's <head>
tag
var GridBoard = window"gridboard"; var board = 8 8;
Place Chess On Empty Chess Board
Chess can store in grid.piece
; ;;;;;; ;;;;;; ; board.grids.forEachgrid.piece = pieces;
Define State On Grid
Define state in grid.state
, such as like grid's color.
;; ; board.grids.forEachgrid.state = colors;
Get Grid By Absolute Coordinate
;; // passing array is also available; // shortcut;
Get Grid By Relative Coordinate
;; // passing array is also available; // shortcut;
Use Direction
Refer to previous section, relative coordinate can be expressed by direction.
;
// F = y - 1// B = y + 1// L = x - 1// R = x + 1// ex. FFL = [-1, -2];; // template string is also available
Use Orientation Coordinate Converter
Change Board's Orientation, defining directions will be easy.
; // default look like this:// F | | 0 | 1 |// L R | 0 | | |// B | 1 | | |; // can be look like this:// B | | 1 | 0 |// R L | 1 | | |// F | 0 | | |; // the result will look like this:// A, B, C, D, E, F, G, H x / y// WR, WN, WB, WQ, WK, WB, WN, WR, // 1// WP, WP, WP, WP, WP, WP, WP, WP, // 2// __, __, __, __, __, __, __, __, // 3// __, __, __, __, __, __, __, __, // 4// __, __, __, __, __, __, __, __, // 5// BP, __, __, __, __, __, __, __, // 6// __, BP, BP, BP, BP, BP, BP, BP, // 7// BR, BN, BB, BQ, BK, BB, BN, BR, // 8;;gridAtA6.piece = gridAtA7.piece;gridAtA7.piece = __; // the result will look like this(rotated):// H, G, F, E, D, C, B, A x / y// BR, BN, BB, BK, BQ, BB, BN, BR, // 8// BP, BP, BP, BP, BP, BP, BP, __, // 7// __, __, __, __, __, __, __, BP, // 6// __, __, __, __, __, __, __, __, // 5// __, __, __, __, __, __, __, __, // 4// WP, __, __, __, __, __, __, __, // 3// __, WP, WP, WP, WP, WP, WP, WP, // 2// WR, WN, WB, WK, WQ, WB, WN, WR, // 1;;gridAtH3.piece = gridAtH2.piece;gridAtH2.piece = __; // result:// A, B, C, D, E, F, G, H x / y// WR, WN, WB, WQ, WK, WB, WN, WR, // 1// WP, WP, WP, WP, WP, WP, WP, __, // 2// __, __, __, __, __, __, __, WP, // 3// __, __, __, __, __, __, __, __, // 4// __, __, __, __, __, __, __, __, // 5// BP, __, __, __, __, __, __, __, // 6// __, BP, BP, BP, BP, BP, BP, BP, // 7// BR, BN, BB, BQ, BK, BB, BN, BR, // 8
Customize Coordinate Convertion
Use Coordinate Converter
Converter only needs 2 methods: convertAbsoluteCoordinate, convertRelativeCoordinate
; ; ;grid.x === 2; // truegrid.y === 2; // true
Use Coordinate Convert Function
Refer to previous section, coordinate convert function is also available
; ;grid.x === 2; // truegrid.y === 2; // true