BDS Software

Hex vs. Square - Page 5



Which Square Has Been Clicked

These square games uniformly use a 641x641 pixel canvas with two "exterior" border lines; one on the right side, and the other on the bottom:

(641,0)-(641,641)
(0,641)-(641,641)

The interior space is thus 640x640 pixels.

In The Matching Game, as with other 10x10 games, this space is divided into 10x10 squares, each 64x64 pixels.

The squares are numbered 0-9 (left-to-right) in the x-direction, and 0-9 (top-to-bottom) in the y-direction.

The squares also include an interior border (line) on the top, and an interior border (line) on the left.

Thus the space available for game graphics is 63x63 pixels with the center at (32,32) relative.

And the upper and left borders are part of the square, but:

The right border is part of the neighboring square to the right, and
The bottom border is part of the neighboring square to the bottom (i.e. "below").

With this arrangement, detecting which square the mouse has clicked-in is straighrforward:



[Begin Code]

var gameCanvas;

function processClick(e)
{
// Mouse-Click Coordinates
var x;
var y;

// Mouse-Click Buttons Code
//    1 = Left
//    2 = Right
// else = multiple buttons error
var b;

// Square Location Numbers
var nxLoc;
var nyLoc;

// Upper-Left Corner Coordinates
var uxLoc;
var uyLoc;

// Center Coordinates
var cxLoc;
var cyLoc;

// Do NOT try to move this code outside this function in order to minimize repetition.
// It MUST stay INSIDE the function because of possible scrolling of the window.
var rect;
rect = gameCanvas.getBoundingClientRect();

// Get the mouse coordinates.
x = Math.floor(e.clientX - rect.left);
y = Math.floor(e.clientY - rect.top);
b = e.buttons;

// Adjust Out-of-Range Clicks
if (x < 0)
{
x = 0;
}
if (y < 0)
{
y = 0;
}
if (x > 639)
{
x = 639;
}
if (y > 639)
{
y = 639;
}

// Get the square location numbers
nxLoc = Math.floor(x / 64);
nyLoc = Math.floor(y / 64);

// Get the square upper-left coordinates
uxLoc = nxL0c * 64;
uyLoc = nyL0c * 64;

// Get the square Center Coordinates
cxLoc = uxLoc + 32;
cyLoc = uyLoc + 32;

// Do Stuff Here
}

[End Code]



To see this in action, continue to the Next Page.


----------

For those who may be interested: 20x20 Square Games -

In 20x20 Games, the 640x640 pixel space is divided into 20x20 squares, each 32x32 pixels.

The squares are numbered 0-19 (left-to-right) in the x-direction, and 0-19 (top-to-bottom) in the y-direction.

The squares also include an interior border (line) on the top, and an interior border (line) on the left.

Thus the space available for game graphics is 31x31 pixels with the center at (16,16) relative.

And the upper and left borders are part of the square, but:

The right border is part of the neighboring square to the right, and
The bottom border is part of the neighboring square to the bottom (i.e. "below").


40x40 Square Games -

In 40x40 Games, the 640x640 pixel space is divided into 40x40 squares, each 16x16 pixels.

The squares are numbered 0-39 (left-to-right) in the x-direction, and 0-39 (top-to-bottom) in the y-direction.

The squares also include an interior border (line) on the top, and an interior border (line) on the left.

Thus the space available for game graphics is 15x15 pixels with the center at (8,8) relative.

And the upper and left borders are part of the square, but:

The right border is part of the neighboring square to the right, and
The bottom border is part of the neighboring square to the bottom (i.e. "below").


64x64 Square Games -

In 64x64 Games, the 640x640 pixel space is divided into 64x64 squares, each 10x10 pixels.

The squares are numbered 0-63 (left-to-right) in the x-direction, and 0-63 (top-to-bottom) in the y-direction.

The squares also include an interior border (line) on the top, and an interior border (line) on the left.

Thus the space available for game graphics is 9x9 pixels with the center at (5,5) relative.

And the upper and left borders are part of the square, but:

The right border is part of the neighboring square to the right, and
The bottom border is part of the neighboring square to the bottom (i.e. "below").





                                                                                                                                                                M.D.J. 2022/08/17