0
218
Vistas¿Una función para obtener la posición absoluta para un juego de rampas y escaleras?
Tengo un div que contiene la imagen de una cuadrícula de 100x100 y está configurado como relativo
<div className="relative"> <img src={tile_img} alt="tile" className="h-full" /> // player piece </div>La pieza tendrá entonces un valor absoluto como este
// 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> He estado pensando en hacer una función que no involucre representar los mosaicos individualmente como un objeto, sino simplemente devolver la posición absoluta relativa al div principal. Puedo determinar las posiciones verticales, pero me resulta difícil determinar las posiciones horizontales, ya que la dirección cambia de derecha a izquierda y de izquierda a derecha al cambiar de fila.
Esto es lo que tengo
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] } Aquí hay una imagen para visualizarla mejor (recortada) (suponiendo que el tamaño de la imagen es un cuadrado perfecto): 
Gracias por adelantado.
1 Respuestas
Responde la pregunta0
Puedes separar las 'decenas' y las 'unidades', es decir, 74 se compone de 7x10+4x1.
La pieza se mueve de izquierda a derecha cuando las 'dieces' son pares (0x, 2x, 4x, etc.) y de derecha a izquierda cuando son impares (1x, 3x, 5x).
La siguiente función convierte el movimiento en distancia relativa según el tablero que hayas proporcionado, es decir, mosaico 1 en x=0,5, y=0,5; baldosa 2 en x=1,5, y=0,5; mosaico 11 en x=1,5, y=1,5, etc., donde la distancia entre mosaicos es incrementos de 1.
function convertDistance(tile){ console.log(`Start tile ${tile}`) // Convert tile to relative distance eg // 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) }La salida le dará las distancias relativas xy de los mosaicos 1 a 100.