diff options
| -rw-r--r-- | index.js | 150 |
1 files changed, 72 insertions, 78 deletions
@@ -9,53 +9,55 @@ const canvasOffsetX = canvas.offsetLeft; const canvasOffsetY = canvas.offsetTop; let scale = 2 +let angle = 0 +let drawings = [] canvas.width = window.innerWidth - canvasOffsetX * 2; 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: Math.PI} ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY) reset.style.top = canvasOffsetY * 2 + "px"; reset.style.right = canvasOffsetX * 2 + "px"; +robot.style.left = (canvas.width/2 + canvasOffsetX)/canvas.width *100 + "%" +robot.style.top = (canvas.height/2 + canvasOffsetY)/canvas.height *100 + "%" + +class Wall { + constructor(x,y,a) { + this.x = x + this.y = y + this.h = 5 + this.a = a + } -let lineWidth = 2; -let strokeColor = "red" -let drawings = []; - -ctx.lineWidth = lineWidth; -ctx.lineCap = 'square'; -ctx.strokeStyle = strokeColor; -ctx.fillStyle = "red"; - -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(); + draw(context) { + context.fillRect(this.x - robot.offsetWidth/2, this.y - this.h/2,robot.offsetWidth,this.h) + } } canvas.addEventListener('mousedown', (e) => { cross.style.visibility = "visible"; + x = e.layerX - canvas.width/2 - 2*canvasOffsetX + y = e.layerY - canvas.height/2 - 2*canvasOffsetY 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) + angle = Math.atan(x/Math.abs(y)) - 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 + sym = 1 + if (x < 0) { + sym = -1 } - 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() + if (y > 0) { + angle = sym*Math.PI - angle + } + + robot.style.transform = 'translate(-50%, -50%) rotate('+ angle +'rad)'; + moveTo(x * scale,y * scale) + + moveAll(x,y) }); client.on('message', function (topic, message) { @@ -63,71 +65,63 @@ client.on('message', function (topic, message) { var n = parseInt(val); if (!isNaN(n)){ if (n < 150){ - 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 + wall = new Wall(n * Math.sin(angle), - n * Math.cos(angle), angle) + drawings.push(wall) + draw(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) +/* +function test(wall) { + drawings.push(wall) + draw(wall) +} +*/ + +function draw(wall) { + ctx.save() + x = wall.x + y = wall.y + wall.x = 0 + wall.y = 0 + ctx.translate(x,y) + ctx.rotate(wall.a) + wall.draw(ctx) + wall.x = x + wall.y = y + ctx.restore() +} - tr.a = Math.atan((-e.targetTouches[0].layerX + canvasOffsetX + canvas.width/2)/(e.targetTouches[0].layerY - canvasOffsetY - canvas.height/2)) - if ( e.targetTouches[0].layerY - canvasOffsetY > canvas.height/2 ) - { - tr.a += Math.PI - } +function moveAll(x,y) { + a = canvas.width/2 + canvasOffsetX + b = canvas.height/2 + canvasOffsetY + ctx.clearRect(-a,-b,canvas.width,canvas.height) - // 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() -}); - */ + drawings.forEach((e) => { + e.x -= x + e.y -= y + draw(e) + }) +} reset.onclick = () => { drawings = []; - tr.x = 0 - tr.y = 0 - tr.a = 0 - + angle = 0 robot.style.transform = 'translate(-50%, -50%) rotate(0deg)'; - update(); } function resizeCanvas() { - canvas.width = window.innerWidth - canvasOffsetX * 2; - canvas.height = window.innerHeight - canvasOffsetY * 2; - ctx.strokeStyle = strokeColor; - ctx.lineWidth = lineWidth; - ctx.lineCap = 'round'; - ctx.fillStyle = "red"; - robot.style.top = canvas.height/2 - robot.height/2 - canvasOffsetY; - robot.style.left = canvas.width/2 - robot.width/2 - canvasOffsetX; - ctx.setTransform(1, 0, 0, 1, 0, 0); -} + canvas.width = window.innerWidth - canvasOffsetX * 2 + canvas.height = window.innerHeight - canvasOffsetY *2 + reset.style.top = canvasOffsetY * 2 + "px"; + reset.style.right = canvasOffsetX * 2 + "px"; + robot.style.left = (canvas.width/2 + canvasOffsetX)/canvas.width *100 + "%" + robot.style.top = (canvas.height/2 + canvasOffsetY)/canvas.height *10 -function redrawCanvas(){ + ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY) - drawings.forEach(element => { - //ctx.translate(tr.x, tr.y) - // ctx.translate(element.tr.x, element.tr.y) - wall(element); - // element.tr.x = tr.x - // element.tr.y = tr.y - }); -} - -function update(){ - resizeCanvas(); - redrawCanvas(); -} - -const updateOnFrame = () => { - update(); - requestAnimationFrame(updateOnFrame) + moveAll(0,0) } -//updateOnFrame(); -window.onresize = update; +window.onresize = resizeCanvas;
\ No newline at end of file |