Questo script traccia un'isola con alcuni edifici, il punto in cui si approda (X), il punto in cui è collocato il tesoro (X). Avanzando di un passo per volta, in direzione dei 4 punti cardinali, si deve arrivare da X a X col minor numero dei passi possibile, senza attraversare o toccare gli edifici. A destra è illustrato un percorso, non il migliore. This script draws an island with some buildings, the point where you land (X), the point where the treasure is placed (X). Advancing one step at a time, in the direction of the 4 cardinal points, you must get from X to X with the least number of steps possible, without crossing or touching the buildings. A path is shown on the right, not the best one.

I comandi che tracciano l'isola, gli edifici, i punti di partenza e di arrivo. Puoi modificarli.

The commands that trace the island, the buildings, the points of departure and arrival. You can edit them.

// -----------------

cx.fillStyle ="black"; FS="black"
cx.font = "bold 16px Arial";
cx.fillText("y", 6,19)
cx.fillText("x", 534,435)
cx.stroke()
BL="black"; GR="seagreen"; RE="red"; TN=0
TX=0; TY=0; T0X=0; T0Y=0; T1X=0; T1Y=0

cx.beginPath(); cx.lineWidth=5
cx.fillStyle ="white"
cx.fillText("||||||", 480,19)
cx.fillText("XXXXX", 481,19)
cx.fillText("WWWW", 480,19)
cx.fillText("AAAAA", 481,19)
cx.fillText("MMMM", 480,19)
cx.fillText("IIIII", 481,19)
cx.fillText("BBBB", 481,19)
cx.fillText("BBBBB", 480,19)
cx.fillText(";;;;;", 480,19)
cx.fillText(";;;;;", 481,19)
cx.fillText("!!!!!", 481,19)
cx.fillText("____", 481,19)
cx.stroke()
///////////////////////////////////////////  M A P  ///////////////////////////////
cx.strokeStyle=RE
cx.moveTo(X(2),Y(3)); cx.lineTo(X(3),Y(3)); cx.lineTo(X(5),Y(4)); cx.lineTo(X(8),Y(2)); cx.lineTo(X(10),Y(2)); cx.lineTo(X(21),Y(5))
cx.lineTo(X(21),Y(6)); cx.lineTo(X(22),Y(9)); cx.lineTo(X(20),Y(18)); cx.lineTo(X(15),Y(19)); cx.lineTo(X(9),Y(16)); cx.lineTo(X(1),Y(15))
cx.lineTo(X(0),Y(14)); cx.lineTo(X(3),Y(9)); cx.lineTo(X(3),Y(7)); cx.lineTo(X(1),Y(4)); cx.lineTo(X(2),Y(3))
cx.stroke()
///////////////// case / buildings
cx.beginPath()
cx.strokeStyle=RE
cx.moveTo(X(5),Y(8)); cx.lineTo(X(6),Y(10)); cx.lineTo(X(9),Y(9)); cx.lineTo(X(7),Y(5)); cx.lineTo(X(5),Y(8))
cx.moveTo(X(12),Y(6)); cx.lineTo(X(16),Y(7)); cx.lineTo(X(15.5),Y(9)); cx.lineTo(X(11.5),Y(8)); cx.lineTo(X(12),Y(6))
cx.moveTo(X(12),Y(15)); cx.lineTo(X(10),Y(13)); cx.lineTo(X(12),Y(11)); cx.lineTo(X(14),Y(13)); cx.lineTo(X(12),Y(15))
cx.moveTo(X(16),Y(10)); cx.lineTo(X(19),Y(10)); cx.lineTo(X(19),Y(12)); cx.lineTo(X(16),Y(12)); cx.lineTo(X(16),Y(10))
cx.moveTo(X(3),Y(12)); cx.lineTo(X(5),Y(12)); cx.lineTo(X(5),Y(14)); cx.lineTo(X(3),Y(14)); cx.lineTo(X(3),Y(12))
cx.stroke()
///////////////// partenza / start point
TX=5; TY=4
cx.beginPath()
cx.strokeStyle=BL
cx.moveTo(X(TX-0.5),Y(TY-0.5))
cx.lineTo(X(TX+0.5),Y(TY+0.5)); cx.lineTo(X(TX),Y(TY)); cx.lineTo(X(TX-0.5),Y(TY+0.5)); cx.lineTo(X(TX+0.5),Y(TY-0.5))
cx.stroke()
///////////////// tesoro / treasure
cx.beginPath()
TX2=15; TY2=15
cx.strokeStyle=GR
cx.moveTo(X(TX2-0.5),Y(TY2-0.5))
cx.lineTo(X(TX2+0.5),Y(TY2+0.5)); cx.lineTo(X(TX2),Y(TY2)); cx.lineTo(X(TX2-0.5),Y(TY2+0.5)); cx.lineTo(X(TX2+0.5),Y(TY2-0.5))
cx.stroke()
/////////////////
cx.beginPath(); cx.lineWidth=5
cx.fillStyle ="black"
cx.fillText(TX+"; "+TY, 487,19)
cx.moveTo(X(TX),Y(TY))
/////////////////////////////////////////////////////////////////////////////////////
window.addEventListener( "keydown", event => { TT=event.key; if(TT == "1") {
FS=BL
...

Un altro esempio (B). Un altro (C).