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?
So I'm a bit of a newbie with Javascript, and have been doing a good amount of research on click events. Sadly I've yet to resolve my problem of not getting any click events to fire on my pages, not a single one. the JS doesn't even seem to be getting evaluated at any point.
Things I've tried:
I just need to call a simple click event on one element identified by a css class type. Can anyone offer some suggestions?
That's quite the broken piece of code you've brought to us today. Did you not do any basic testing or debugging?
First off, you don't have any closing brackets for anything. That'll cause all sorts of problems.
Lastly, you have a random integer generator for numbers 1 through 20, but check through 25.
The UI design looks good for not implementing any sort of static placement code, or structured design classes. UI design is probably the number one thing I absolutely hate about Java. You either have to use some shoddy design class (GridBag, and such), or painstakingly place each component statically in the code. For the most part.
Nice little game.
As the title states, this is just a small class I've written to represent a Matrix object as seen every so often in various disciplines of mathematics. Matrices are, in programming terms, basically a two dimensional array of integers that can represent anything from trigonometric angles, and vectors; to any number of notable applications including tracking network paths, and applying cryptography calculations,..
@Hawkee The snippets page in mobile becomes a little jumbled on bigger descriptions pushing text onto other descriptions and other things of the like. On mobile that is.
Just a suggestion but it'd be nice to be able to search snippets by category like we're able to in scripts.
Would be magnitudes more efficient if you took the time to calculate it locally instead of reaching out to a website to do it. Not to mention doing it locally would require about 50% less code. Doing it this way does not guarantee longevity. In a few months or whenever they decide to update the website, it'll have to be redone to function properly again.