Search code examples
javascripthtmlcanvas

Is it possible to create an arrow that points from a player to an end goal?

I am in the making of a game that uses numerical tile maps, EX: [1, 0, 0, 1] and using javascript i render those maps on a canvas. I cant figure out how to create an arrow that constantly turns to point towards and end goal, even though i tried using several methods including getting radians and degrees. Any suggestions would be helpful. Here is a link to said game: https://jsfiddle.net/juinorCPC/0azfu2wp/

Solution

  • So the most simple way is Step 1: create new canvas And stack it over old canvas You can search google how to stack div

    enter image description here

    This is the basic of what you asking for

    Draw the sideway arrow by canvas and finish with setTimeout loop and if else or switch if you want short

    Example: You at middle of map

    The coordinates are x: 15, y: 15

    The goals is at top right(NE count from player) of the map

    ctx.translate(document.documentElement.clientWidthh / 2, document.documentElement.clienHeight / 2);
    //This will make arrow canvas always at the middle of screen and you just have to rotate it to make arrow direction to goals
            If(xgoal > x && ygoal < y ){          
  ctx.clearRect(0, 0, 100, 100);
//ClearRect so it will delete old arrow
             ctx.rotate(-45 * Math.PI / 180);.   
            //Draw arrow at Coordinates x:5 y:5 to make it have a distance from the player
            // Angle at top right is -45° Take the player as the axis 
            
           
            }

    You can make another if else or switch to make arrow rotate when goals in another direction then wrap all the loop in --> settimeout <-- to make it always check where the goals and rotate

    Sorry for trash english and trash code

    Internet have many js better than this but i only know pure js