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.

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.

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=1; TY=15
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=16; TY2=6
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 (A). Un altro (C).