diff options
Diffstat (limited to 'index.js')
| -rw-r--r-- | index.js | 23 |
1 files changed, 15 insertions, 8 deletions
@@ -10,7 +10,7 @@ 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 = 2.5 +let scale = 1 canvas.width = window.innerWidth - canvasOffsetX * 2; canvas.height = window.innerHeight - canvasOffsetY * 2; @@ -32,7 +32,8 @@ ctx.strokeStyle = strokeColor; ctx.fillStyle = "red"; const wall = (x, y) => { - ctx.fillRect(x * canvas.width - canvasOffsetX, y * canvas.height - canvasOffsetY, 30, 30); + 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(); } @@ -50,18 +51,21 @@ canvas.addEventListener('mousedown', (e) => { crosses.push({x: e.layerX - canvasOffsetX, y: e.layerY - canvasOffsetY}); 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)) + //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.PI } - // if wall detected then - // drawings.push({x: (canvasOffsetX - robot.width/2)/canvas.width, y: -(20 * scale + canvasOffsetY + robot.height)/canvas.height, tr: {x: tr.x, y: tr.y, a: tr.a}}) // add a wall - 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(); +}); /* 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}); @@ -103,8 +107,11 @@ function resizeCanvas() { function redrawCanvas(){ drawings.forEach(element => { ctx.setTransform(1, 0, 0, 1, 0, 0) - ctx.translate(element.tr.x, element.tr.y) - ctx.rotate(element.tr.a) + + ctx.translate(tr.x, tr.y) + // ctx.translate(element.tr.x, element.tr.y) + ctx.rotate(tr.a) + // ctx.rotate(element.tr.a) wall(element.x, element.y); }); } |
