HTML and CSS Reference
In-Depth Information
imgKnightW.src = "Images/wknight.png";
imgBishopW.src = "Images/wbishop.png";
imgQueenW.src = "Images/wqueen.png";
imgKingW.src = "Images/wking.png";
// Define an array of Image objects
var images = [
imgPawn ,
imgRook ,
imgKnight ,
imgBishop ,
imgQueen ,
imgKing ,
imgPawnW ,
imgRookW ,
imgKnightW ,
imgBishopW ,
imgQueenW ,
imgKingW
];
Creating the Database
Now you're ready to create and use a local Indexed DB database to configure and display the chess pieces.
Initially, the data will be loaded from static data and you will simply display the starting position. Later you will
animate the pieces by updating their location in object store.
Declaring the Static Data
You will need to populate the database with some data. For this application you will just declare the data as a
static array and copy it to the object store. For other applications this could be downloaded from a server or
entered from user input. Add the following declarations shown in Listing 11-3 to the
script
element, just after
the image variables.
Listing 11-3.
Declaring the static data
var pieceTypes = [
{ name: "pawn", height: "50", width: "28", blackImage: 0, whiteImage: 6 },
{ name: "rook", height: "60", width: "36", blackImage: 1, whiteImage: 7 },
{ name: "knight", height: "60", width: "36", blackImage: 2, whiteImage: 8 },
{ name: "bishop", height: "65", width: "30", blackImage: 3, whiteImage: 9 },
{ name: "queen", height: "70", width: "32", blackImage: 4, whiteImage: 10 },
{ name: "king", height: "70", width: "28", blackImage: 5, whiteImage: 11 }
];
var pieces = [
{ type: "pawn", color: "white", row: 6, column: 0, pos: "a2", killed: false },
{ type: "pawn", color: "white", row: 6, column: 1, pos: "b2", killed: false },
{ type: "pawn", color: "white", row: 6, column: 2, pos: "c2", killed: false },
{ type: "pawn", color: "white", row: 6, column: 3, pos: "d2", killed: false },
