diff options
Diffstat (limited to 'index.js')
| -rw-r--r-- | index.js | 29 |
1 files changed, 12 insertions, 17 deletions
@@ -16,7 +16,7 @@ canvas.height = window.innerHeight - canvasOffsetY * 2; //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} +const tr = {x: 0, y: 0, a: Math.PI} ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY) reset.style.top = canvasOffsetY * 2 + "px"; @@ -31,8 +31,8 @@ ctx.lineCap = 'square'; ctx.strokeStyle = strokeColor; ctx.fillStyle = "red"; -const wall = (x, y) => { - ctx.fillRect(x * canvas.width - canvasOffsetX - robot.offsetWidth/2, y * canvas.height - canvasOffsetY, robot.offsetWidth, 5); +const wall = (element) => { + ctx.fillRect(element.x * canvas.width - canvasOffsetX - robot.offsetWidth/2, element.y * canvas.height - canvasOffsetY, robot.offsetWidth, 5); ctx.stroke(); ctx.beginPath(); } @@ -52,6 +52,8 @@ canvas.addEventListener('mousedown', (e) => { } robot.style.transform = 'translate(-50%, -50%) rotate('+ -(tr.a+Math.PI)+'rad)'; + tr.x -= 120 * Math.sin(tr.a) + tr.y -= 120 * Math.cos(tr.a) // (-(e.layerX - canvasOffsetX - canvas.width/2) * scale, -(e.layerY - canvasOffsetY - canvas.height/2) * scale) update() }); @@ -59,19 +61,14 @@ canvas.addEventListener('mousedown', (e) => { client.on('message', function (topic, message) { let val = message.toString(); var n = parseInt(val); - update(); 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) + drawings.push({x: ((n - 30) * Math.sin(tr.a) - tr.x)/canvas.width, y: ((n - 30) * Math.cos(tr.a) - tr.y)/canvas.height}) // add a wall } + update(); } }); + /* canvas.addEventListener('touchstart', (e) => { drawCross(e.targetTouches[0].layerX, e.targetTouches[0].layerY); // moveTo((e.targetTouches[0].layerX - canvasOffsetX - canvas.width/2) * scale, (e.targetTouches[0].layerY - canvasOffsetY - canvas.height/2) * scale) @@ -114,13 +111,11 @@ 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.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.tr.x, element.y + element.tr.y); + wall(element); + // element.tr.x = tr.x + // element.tr.y = tr.y }); } @@ -135,4 +130,4 @@ const updateOnFrame = () => { } //updateOnFrame(); -window.onresize = update;
\ No newline at end of file +window.onresize = update; |
