diff --git a/html/images/space.svg b/html/images/space.svg index bd4686f..4397bc2 100644 --- a/html/images/space.svg +++ b/html/images/space.svg @@ -159,20 +159,13 @@ } )); - // console.log(wallCorners); - // console.log(allWallCorners); - const edgePts = wallCorners.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]]); const allEdgePts = allWallCorners.map(w => w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]]) ); - // console.log(edgePts); - // console.log(allEdgePts); const startingEdges = findEdges(edgePts, position); const allStartingEdges = findAllEdges(allEdgePts, position); - // console.log(startingEdges); - // console.log(allStartingEdges); function distance(x1, y1, x2, y2) { return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); @@ -199,13 +192,15 @@ }); } - function drawTriangles(container, pts, [positionX, positionY]) { - pts.forEach(([[x1, y1], [x2, y2]]) => { - const el = document.createElementNS(namespaceURIsvg, 'polygon'); - const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}` - el.setAttribute('points', attr); - container.appendChild(el) - }); + function drawTriangles(container, walls, [positionX, positionY]) { + walls.forEach(pts => + pts.forEach(([[x1, y1], [x2, y2]]) => { + const el = document.createElementNS(namespaceURIsvg, 'polygon'); + const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}` + el.setAttribute('points', attr); + container.appendChild(el); + }) + ); } // Triangle has a clockwise orientation @@ -252,7 +247,7 @@ const className = 'clockwise-orientation'; if (!triangleContainer.childElementCount) - drawTriangles(triangleContainer, edgePts, position); + drawTriangles(triangleContainer, allEdgePts, position); const triangles = triangleContainer.querySelectorAll('polygon'); @@ -344,7 +339,7 @@ bulletPt.x = x; bulletPt.y = y; - if (bullet.time > 0 && !wall.isPointInFill(bulletPt)) { + if (bullet.time > 0 && ![...walls].some(w => w.isPointInFill(bulletPt))) { [bullet.x, bullet.y] = wrapPos(x, y); bullet.node.style.transform = `translate(${bullet.x}px, ${bullet.y}px)`; } else { @@ -354,33 +349,35 @@ }); } - function detectCollision(corners, [xc, yc], edges) { + function detectCollision(corners, [xc, yc], edge) { const shipRadius = 5; + const [[xa, ya], [xb, yb]] = edge.split(' ').map(n => n.split(',').map(n => +n)); - // const cornerCollision = corners.some(([x, y]) => { - // cornerPt.x = x - xc; - // cornerPt.y = y - yc; - // - // return shipBody.isPointInFill(cornerPt); - // }); + const cornerCollision = corners.some(([[ax, ay], [bx, by]]) => { + cornerPt.x = ax - xc; + cornerPt.y = ay - yc; - const cornerCollision = false; + const collideWithA = shipBody.isPointInFill(cornerPt); - const sideCollision = edges.reduce((acc, e) => { - const [[xa, ya], [xb, yb]] = e.split(' ').map(n => n.split(',').map(n => +n)); + cornerPt.x = bx - xc; + cornerPt.y = by - yc; - const da = distance(xa, ya, xc, yc); - const db = distance(xb, yb, xc, yc); - // TODO: calculate this one ahead of time - const dc = distance(xa, ya, xb, yb); + const collideWithB = shipBody.isPointInFill(cornerPt); - // https://en.wikipedia.org/wiki/Altitude_(triangle)#Altitude_in_terms_of_the_sides - // Find altitude of side c (the base) - const s = (1 / 2) * (da + db + dc); - const hc = (2 / dc) * Math.sqrt(s * (s - da) * (s - db) * (s - dc)); + return collideWithA || collideWithB; + }); - return [...acc, hc]; - }, []).some(h => h <= shipRadius); + const da = distance(xa, ya, xc, yc); + const db = distance(xb, yb, xc, yc); + // TODO: calculate this one ahead of time + const dc = distance(xa, ya, xb, yb); + + // https://en.wikipedia.org/wiki/Altitude_(triangle)#Altitude_in_terms_of_the_sides + // Find altitude of side c (the base) + const s = (1 / 2) * (da + db + dc); + const hc = (2 / dc) * Math.sqrt(s * (s - da) * (s - db) * (s - dc)); + + const sideCollision = hc <= shipRadius; return cornerCollision || sideCollision; } @@ -486,7 +483,8 @@ // const collision = detectCollision(wallCorners, position, findEdges(edgePts, position)); const collision = detectAllCollisions(allWallCorners, position, findAllEdges(allEdgePts, position)); - wall.setAttribute('fill', collision ? 'red' : 'black'); + // wall.setAttribute('fill', collision ? 'red' : 'black'); + walls.forEach(w => w.setAttribute('fill', collision ? 'red' : 'black')); if (collision) { // restart game