Estoy escribiendo un juego multijugador básico y trabajando en la representación del cliente de los datos enviados por el servidor, pero he estado perplejo con esta pregunta durante unos días.

Básicamente, el mapa del juego es de 6000x6000 (cuando el jugador llega a -3000 o 3000 en x o y, deja de moverse). En relación con las coordenadas del jugador (la ventana gráfica está determinada por una traducción del jugador a 0,0), se dibuja una cuadrícula detrás del jugador, dando la sensación de movimiento. Sin embargo, me gustaría que la cuadrícula solo se extienda hasta los bordes del área de 6000x6000, para que el jugador pueda ver que ha llegado al final del mapa.

Inicialmente, intenté usar las coordenadas del jugador para determinar si el borde del mapa es visible y, en ese caso, solo dibujé detrás o delante del jugador para indicar el final del mapa.

mi función de dibujar se ve así:

 /* * Function drawBoard - draws grid on canvas * takes 2 args, height, width of game canvas */ var drawBoard = function(w, h) { ctx.beginPath(); // vertical lines for (x = 0; x <= w; x += 50) { // draw after player // -3000, 3000 is map top right if (ship.pos.x >= (-3000-(w/2))) { ctx.moveTo(x+ship.pos.x, 0); ctx.lineTo(x+ship.pos.x, h); } // draw before player // 3000, 3000 is map top left if (ship.pos.x <= (3000+(w/2))) { ctx.moveTo(ship.pos.xx, 0); ctx.lineTo(ship.pos.xx, h); } // horizontal lines for (y = 0; y <= h; y += 50) { if (ship.pos.x >= (-3000-(h/2))) { ctx.moveTo(0, y+ship.pos.y); ctx.lineTo(w, y+ship.pos.y); } if (ship.pos.x <= (3000+(h/2))) { ctx.moveTo(0, ship.pos.yy); ctx.lineTo(w, ship.pos.yy); } } } ctx.strokeStyle = "gray"; ctx.stroke(); ctx.closePath(); };

Busqué extensamente un problema similar, pero no pude encontrar ninguno, por lo que agradecería algunos consejos/indicadores sobre cómo resolver esto.