diff options
| -rw-r--r-- | cross.png | bin | 0 -> 5656 bytes | |||
| -rw-r--r-- | index.html | 7 | ||||
| -rw-r--r-- | index.js | 74 | ||||
| -rw-r--r-- | style.css | 16 |
4 files changed, 61 insertions, 36 deletions
diff --git a/cross.png b/cross.png Binary files differnew file mode 100644 index 0000000..404d45f --- /dev/null +++ b/cross.png @@ -9,7 +9,12 @@ Click anywhere on the screen to move the robot! </p> <button id="reset">Reset map</button> - <img id="robot" src="robot.png" alt="robot image" style="height: 15vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"> + <div id="robot"> + <img src="robot.png" alt="robot image" style="height: 10vh;"> + </div> + <div id="cross"> + <img src="cross.png" alt="cross image" style="height: 20px"> + </div> <canvas id="drawing-board"> </canvas> @@ -3,19 +3,20 @@ const ctx = canvas.getContext('2d'); const reset = document.getElementById("reset"); robot = document.getElementById('robot'); +cross = document.getElementById('cross'); const canvasOffsetX = canvas.offsetLeft; const canvasOffsetY = canvas.offsetTop; -robot.style.top = canvas.height/2 - robot.height/2 - canvasOffsetY; -robot.style.left = canvas.width/2 - robot.width/2 - canvasOffsetX; - -let scale = 1 +let scale = 2 canvas.width = window.innerWidth - canvasOffsetX * 2; canvas.height = window.innerHeight - canvasOffsetY * 2; -const tr = {x: canvas.width/2 + canvasOffsetX, y: canvas.height/2 + canvasOffsetY, a: 0} +//robot.style.top = canvas.height/2 - robot.height/2 - canvasOffsetY; +//robot.style.left = canvas.width/2 - robot.width/2 - canvasOffsetX; + +const tr = {x: 0, y: 0, a: 0} ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY) reset.style.top = canvasOffsetY * 2 + "px"; @@ -24,7 +25,6 @@ reset.style.right = canvasOffsetX * 2 + "px"; let lineWidth = 2; let strokeColor = "red" let drawings = []; -let crosses = []; ctx.lineWidth = lineWidth; ctx.lineCap = 'square'; @@ -32,43 +32,48 @@ ctx.strokeStyle = strokeColor; ctx.fillStyle = "red"; const wall = (x, y) => { - console.log(x * canvas.width - canvasOffsetX - robot.width/2, y * canvas.height - canvasOffsetY, robot.width, 5); - ctx.fillRect(x * canvas.width - canvasOffsetX - robot.width/2, y * canvas.height - canvasOffsetY, robot.width, 5); - ctx.stroke(); - ctx.beginPath(); -} - -const drawCross = (x, y) => { - ctx.moveTo(x - 5, y - 5); - ctx.lineTo(x + 5, y + 5); - ctx.moveTo(x + 5, y - 5); - ctx.lineTo(x - 5, y + 5); + ctx.fillRect(x * canvas.width - canvasOffsetX - robot.offsetWidth/2, y * canvas.height - canvasOffsetY, robot.offsetWidth, 5); ctx.stroke(); ctx.beginPath(); } canvas.addEventListener('mousedown', (e) => { - crosses.push({x: e.layerX - canvasOffsetX, y: e.layerY - canvasOffsetY}); + cross.style.visibility = "visible"; + + cross.style.left = e.layerX - canvasOffsetX + "px" + cross.style.top = e.layerY - canvasOffsetY + "px" + moveTo(-(e.layerX - canvasOffsetX - canvas.width/2) * scale, -(e.layerY - canvasOffsetY - canvas.height/2) * scale) - //tr.a = Math.atan((e.layerX - canvasOffsetX - canvas.width/2)/(e.layerY - canvasOffsetY - canvas.height/2)) - if ( e.layerY - canvasOffsetY > canvas.height/2 ) + tr.a = Math.atan((e.layerX - document.querySelector('body').clientWidth/2)/(e.layerY - document.querySelector('body').clientHeight/2)) + if ( e.layerY < canvas.height/2 ) { tr.a += Math.PI } + robot.style.transform = 'translate(-50%, -50%) rotate('+ -(tr.a+Math.PI)+'rad)'; + // (-(e.layerX - canvasOffsetX - canvas.width/2) * scale, -(e.layerY - canvasOffsetY - canvas.height/2) * scale) update() }); client.on('message', function (topic, message) { let val = message.toString(); - if (message[0] >= 48 && message[0] < 58) - drawings.push({x: 0, y: -((parseInt(val) - 30) * scale + canvasOffsetY + robot.height)/canvas.height, tr: {x: tr.x, y: tr.y, a: tr.a}}) // add a wall - update(); + var n = parseInt(val); + if (!isNaN(n)){ + if (n < 150){ + drawings.push({x: (n - 30) * Math.sin(tr.a)/canvas.width, y: ((n - 30) * Math.cos(tr.a))/canvas.height, tr: {x: tr.x, y: tr.y}}) // add a wall + tr.x -= (n - 30) * Math.sin(tr.a) / 2 + tr.y -= (n - 30) * Math.cos(tr.a) / 2 + } + else{ + tr.x -= (n - 30) * Math.sin(tr.a) + tr.y -= (n - 30) * Math.cos(tr.a) + } + update(); + } }); /* canvas.addEventListener('touchstart', (e) => { drawCross(e.targetTouches[0].layerX, e.targetTouches[0].layerY); - crosses.push({x: e.targetTouches[0].layerX - canvasOffsetX, y: e.targetTouches[0].layerY - canvasOffsetY}); // moveTo((e.targetTouches[0].layerX - canvasOffsetX - canvas.width/2) * scale, (e.targetTouches[0].layerY - canvasOffsetY - canvas.height/2) * scale) tr.a = Math.atan((-e.targetTouches[0].layerX + canvasOffsetX + canvas.width/2)/(e.targetTouches[0].layerY - canvasOffsetY - canvas.height/2)) @@ -86,10 +91,11 @@ client.on('message', function (topic, message) { reset.onclick = () => { drawings = []; - crosses = []; - tr.x = canvas.width/2 + canvasOffsetX - tr.y = canvas.height/2 + canvasOffsetY + tr.x = 0 + tr.y = 0 tr.a = 0 + + robot.style.transform = 'translate(-50%, -50%) rotate(0deg)'; update(); } @@ -105,23 +111,21 @@ function resizeCanvas() { } function redrawCanvas(){ + ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY) drawings.forEach(element => { - ctx.setTransform(1, 0, 0, 1, 0, 0) + //ctx.setTransform(1, 0, 0, 1, 0, 0) - ctx.translate(tr.x, tr.y) + //ctx.translate(tr.x, tr.y) // ctx.translate(element.tr.x, element.tr.y) - ctx.rotate(tr.a) + // ctx.rotate(tr.a) // ctx.rotate(element.tr.a) - wall(element.x, element.y); + wall(element.x + element.tr.x, element.y + element.tr.y); }); } function update(){ resizeCanvas(); ctx.setTransform(1,0,0,1,0,0); - for (let cross of crosses){ - drawCross(cross.x, cross.y) - } redrawCanvas(); } @@ -131,4 +135,4 @@ const updateOnFrame = () => { } //updateOnFrame(); -window.onresize = update; +window.onresize = update;
\ No newline at end of file @@ -24,4 +24,20 @@ canvas { #reset { position: absolute; +} + +#robot { + transform-origin: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + pointer-events: none; +} + +#cross { + visibility: hidden; + position: absolute; + opacity: 1; + pointer-events: none; }
\ No newline at end of file |
