For the past few months I've been oddly fascinated by the creativity and projects created using a simple Raspberry Pi board. So I decided to pick one up for myself, along with a few gadgets for my little Raspberry Pi 2, as a sort of "starter kit." Among those gadgets are a Bluetooth, and Wi-Fi USB dongle.
I was particularly fascinated by a fellow who had written a program to detect when certain registered Bluetooth devices came within range of the device. He had mounted his module in his house, clocking recognized devices as they came and went from the house as the day progressed. He then used this data, maintained a list of who was currently at home, and presented this data to the owner over the internet.
Aside from that, a cheap $35 quad-core home-based file server is never a bad thing.
Alright, so I've been working on a Checkers game in my free time using HTML 5 and JS. While I've not made a lot of progress just yet, I have hit somewhat of a brick wall. I'm not all that proficient in JS just yet, but I've done a fair amount of research concerning it, to little avail.
My problem is I can create and load images just fine, but when it comes to drawing them properly onto the canvas is when I get problems. When using drawImage(...); calls outside a loop, they will draw correctly, and more importantly, at the correct coordinates. Conversely, if I were to place a drawImage(...); call inside a loop, the images will display correctly, but at the coordinates of the last image to be drawn.
document.addEventListener('DOMContentLoaded',onLoad,false)
/* Holds information about a game piece on the board */
function onLoad() {
/* Grab the canvas element & context drawer */
var canv = document.getElementById("board");
var ctxt = canv.getContext("2d");
/*Initialize Board & Game Values*/
var rows = 8;
var cols = 8;
var evenTiles = "#CCC";
var oddTiles = "#444";
var board = [];
var red = new Image();
red.src = "Images/Red.png";
var black = new Image();
black.src = "Images/Black.png";
/* Initialize the underlying array "pieces" to default values */
for (a = 0; a < rows; a++) {
row = [];
for (b = 0; b < cols; b++) {
if (a < 2) {
if ((a % 2) == 0)
if ((b % 2) != 0)
row.push(new Piece(Piece.Color.RED, Piece.Status.NORMAL, b, a));
else
row.push(null);
else
if ((b % 2) == 0)
row.push(new Piece(Piece.Color.RED, Piece.Status.NORMAL, b, a));
else
row.push(null);
}
else if (a > (rows - 3)) {
if ((a % 2) == 0)
if ((b % 2) != 0)
row.push(new Piece(Piece.Color.BLACK, Piece.Status.NORMAL, b, a));
else
row.push(null);
else
if ((b % 2) == 0)
row.push(new Piece(Piece.Color.BLACK, Piece.Status.NORMAL, b, a));
else
row.push(null);
}
else
row.push(null);
}
board.push(row);
}
/* Draw the game board to the canvas */
for (a = 0; a < rows; a++) {
var row = (canv.height / rows) * a;
for (b = 0; b < cols; b++) {
var col = (canv.width / cols) * b;
if ((a % 2) == 0)
if ((b % 2) == 0)
ctxt.fillStyle = evenTiles;
else
ctxt.fillStyle = oddTiles;
else
if ((b % 2) == 0)
ctxt.fillStyle = oddTiles;
else
ctxt.fillStyle = evenTiles;
ctxt.fillRect(row, col, (canv.height / rows), (canv.width / cols));
//# PROBLEMATIC CODE #
if (board[a][b] != null) {
var piece = board[a][b];
if (piece.Color == Piece.Color.RED)
red.addEventListener("load", function () { ctxt.drawImage(red, piece.X * 100, piece.Y * 100) }, false);
else
black.addEventListener("load", function () { ctxt.drawImage(black, piece.X * 100, piece.Y * 100) }, false);
}
//# END PROBLEMATIC CODE #
}
}
}
The above code produces the following which draws all the pieces on top of one another at the last image's coordinates.
I'm thinking that the coordinates are changing, before the image is fully drawn, thus prompting the renderer to keep re-drawing it each time the variable changes. However, on the other hand, one would think that it has ample time to fully draw an image before it's called upon a second time.
Any suggestions?
