0
216
ViewsA function to get the absolute position for a chutes and ladders game?
I have a div that holds the image of a 100x100 grid, and it's set to relative
<div className="relative">
<img src={tile_img} alt="tile" className="h-full" />
// player piece
</div>
The piece will then have an absolute value like this
// Position at tile 1
<div style="position: absolute; bottom: 5%; left: 5%"></div>
// Position at tile 10
<div style="position: absolute; bottom: 5%; left: 95%"></div>
// Position at tile 11
<div style="position: absolute; bottom: 15%; left: 95%"></div>
// Position at tile 12
<div style="position: absolute; bottom: 15%; left: 85%"></div>
I've been thinking on making a function which does not involve rendering the Tiles individually as an object, but rather to just return the absolute position relative to the parent div. I can determine the vertical positions but having a hard time figuring out the horizontal positions, as the direction changes from right-to-left to left-to-right when changing rows.
Here's what I have
function moveTo(tile) {
// I'm thinking of maybe initially getting the direction based on the modulus? Then what
let dir = tile % 20
let x = // How do I get this
let y = Math.floor(tile / 10) * 10 + 5
return [x, y]
}
Heres a picture to visualize it better (cropped)(assume image size is a perfect square):
Thanks in advance.
1 answers
Answer question0
You can separate the 'tens' and the 'ones', i.e. 74 is made up of 7x10+4x1.
The piece moves from left to right when the 'tens' are even (0x, 2x, 4x, etc.) and right to left when its odd (1x, 3x, 5x).
The following function converts the movement into relative distance based on the board you've provided, i.e. tile 1 at x=0.5, y=0.5; tile 2 at x=1.5, y=0.5; tile 11 at x=1.5, y=1.5 etc, where the distance between tiles is increments of 1.
function convertDistance(tile){
console.log(`Start tile ${tile}`)
// Convert tile to relative distance e.g.
// Case A. tile = 46, x=6+0.5=6.5, y=4+0.5=4.5
// Case B. tile = 33, x=10-(3+0.5)=6.5, y =3+0.5
// shift tile back by -1
tile-=1;
// Find ones and tens
let ones = tile % 10;
let tens = Math.floor(tile / 10);
//Now check if tens is even or odd; if even use case A, odd use case B
let x_rel = tens % 2 == 0 ? ones+0.5 : 10-(ones+0.5);
let y_rel = tens+0.5
console.log(`Relative tile distance; x_rel = ${x_rel}, y_rel = ${y_rel}`)
}
//Test from tile 1 to tile 100
for (let i=1; i<101; i++){
convertDistance(i)
}
The output will then give you the x-y relative distances from tiles 1 to 100.