JavaScript SolutionsJavaScript Solutions
☠️
X Marks the Spot
Week 2, 2026
All SolutionsHTML & JS Canvas | program52 | JavaScript Solutions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>X Marks the Spot</title>
<style>
#map{
position: absolute;
top: 0;
left: 0;
}
canvas#canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img id="map" src="map.jpg" alt="">
<canvas id="canvas"></canvas>
<script>
var map = document.getElementById("map")
var canvas = document.getElementById("canvas")
canvas.width = map.width
canvas.height = map.height
var ctx = canvas.getContext("2d")
ctx.clearRect(0, 0, canvas.width, canvas.height)
var imageMidX = map.width / 2
var imageMidY = map.height / 2
var s = prompt("Paste the program input data here:")
function draw() {
var spl = s.split(" ")
var tmp = spl.pop().split(",")
var xPos = parseInt(tmp[0])
var yPos = parseInt(tmp[1])
ctx.beginPath();
ctx.moveTo(xPos + imageMidX, imageMidY - yPos);
// debugger
ctx.strokeStyle = "blue"
ctx.lineWidth = 7
var x = spl.length - 1
var int = setInterval(function () {
var spl2 = spl[x].split(",")
var yMove = spl2[0].charAt(0) === "N" ? -parseInt(spl2[0].substring(1)) : parseInt(spl2[0].substring(1))
var xMove = spl2[1].charAt(0) === "W" ? parseInt(spl2[1].substring(1)) : -parseInt(spl2[1].substring(1))
yPos = yPos + yMove
xPos = xPos + xMove
ctx.lineTo(xPos + imageMidX, imageMidY - yPos)
ctx.stroke();
// console.log(xPos + imageMidX, imageMidY - yPos, xPos, yPos)
x--
if (x < 0) {
clearInterval(int)
ctx.stroke();
alert("Finished - now click on the map where you think the treasure is to get the co-ordinates")
}
}, 5)
}
document.body.onclick = function (e) {
alert(`${e.clientX - imageMidX}, ${imageMidY - e.clientY}`)
}
draw()
</script>
</body>
</html>
