0

I'm writing a basic multiplayer game and working on client rendering of data sent by the server, but have been stumped on this question for a few days.

Basically, the game map is 6000x6000 (when the player reaches -3000 or 3000 on either the x or y, it stops moving). Relative to the player coordinates (the viewport is determined by a translation of the player to 0,0), a grid is drawn behind the player, giving the sense of movement. However, I would like to have the grid only extend to the edges of the 6000x6000 area, so that the player can see they have reached the end of the map.

Initially, I tried using the player coordinates to determine whether the edge of the map is visible, and in that case only draw behind or ahead of the player in order to denote the map end.

my draw function looks like this:

/*
 * 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.x-x, 0);
            ctx.lineTo(ship.pos.x-x, 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.y-y);
                ctx.lineTo(w, ship.pos.y-y);
            }
        }
    }
    ctx.strokeStyle = "gray";
    ctx.stroke();
    
    ctx.closePath();

};

I looked around extensively for a similar problem, but couldn't find any, so I'd appreciate a few tips/pointers on how to solve this.

flancast90
  • 101
  • 6
  • Hard to say much based on the single function taken out of context and the English description. Have you seen [HTML5 Canvas camera/viewport - how to actually do it?](https://stackoverflow.com/questions/16919601/html5-canvas-camera-viewport-how-to-actually-do-it/48236672#48236672)? Or are you looking for something tile-based like https://jsfiddle.net/7p6g8pop/59/? If the problem is not drawing the grid, it seems easy enough to simply not do it...? – ggorlen Jan 30 '22 at 18:55
  • Sorry my description was not so clear - the viewport is working perfectly, what I am trying to do is to draw the player background _only_ up until the edges of the map on each side. In other words, I want the background to cut off when it reaches -3000 or 3000 x or y. – flancast90 Jan 30 '22 at 19:06

0 Answers0