diff --git a/html/images/space.svg b/html/images/space.svg index 8ce901a..bd4686f 100644 --- a/html/images/space.svg +++ b/html/images/space.svg @@ -75,7 +75,9 @@ - + + + @@ -94,6 +96,12 @@
  • make ship a helicopter
  • use paths for walls
  • multiple walls
  • +
  • no walls
  • +
  • stop reading data from elements
  • +
  • ability to land
  • +
  • gravity
  • +
  • limited fuel
  • +
  • additional cannon firing modes
  • 
         
    @@ -131,6 +139,7 @@ const gun = ship.querySelector('#cannon'); const shipBody = ship.querySelector("#body"); const wall = document.querySelector('#wall'); + const walls = document.querySelectorAll('.wall'); const bulletsContainer = document.querySelector("#bullets"); const triangleContainer = document.querySelector('#triangles'); const edgeContainer = document.querySelector('#edges'); @@ -143,13 +152,36 @@ return [+x, +y]; }); + const allWallCorners = [...walls].map(wall => + wall.getAttribute('points').split(' ').map(coords => { + const [x, y] = coords.split(','); + return [+x, +y]; + } + )); + + // 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); } + function drawAllEdges(edges) { + edges.forEach(edge => drawEdges(edge)); + } + function drawEdges(lpts) { let edges = lpts.map(e => e.join(' ')); @@ -204,6 +236,17 @@ }, []); } + function findAllEdges(verts, [xc, yc]) { + return verts.reduce((acc, points) => { + points.forEach(([a, b]) => { + const isFound = [isClockwise, isAcute].every(c => c(a, b, [xc, yc])); + if (isFound) acc.push(`${a[0]},${a[1]} ${b[0]},${b[1]}`); + }); + + return acc; + }, []); + } + function updateTriangles([positionX, positionY]) { const delim = ' '; const className = 'clockwise-orientation'; @@ -314,12 +357,14 @@ function detectCollision(corners, [xc, yc], edges) { const shipRadius = 5; - const cornerCollision = corners.some(([x, y]) => { - cornerPt.x = x - xc; - cornerPt.y = y - yc; + // const cornerCollision = corners.some(([x, y]) => { + // cornerPt.x = x - xc; + // cornerPt.y = y - yc; + // + // return shipBody.isPointInFill(cornerPt); + // }); - return shipBody.isPointInFill(cornerPt); - }); + const cornerCollision = false; const sideCollision = edges.reduce((acc, e) => { const [[xa, ya], [xb, yb]] = e.split(' ').map(n => n.split(',').map(n => +n)); @@ -340,6 +385,12 @@ return cornerCollision || sideCollision; } + function detectAllCollisions(corners, [xc, yc], edges) { + return edges.map(edge => { + return detectCollision(corners, [xc, yc], edge); + }).some(c => c); + } + function updateShip(elapsed) { const degrees = getRotate(gun); if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`; @@ -433,7 +484,8 @@ drawEdges(edgePts); } - const collision = detectCollision(wallCorners, position, findEdges(edgePts, position)); + // const collision = detectCollision(wallCorners, position, findEdges(edgePts, position)); + const collision = detectAllCollisions(allWallCorners, position, findAllEdges(allEdgePts, position)); wall.setAttribute('fill', collision ? 'red' : 'black'); if (collision) { @@ -451,6 +503,7 @@ } drawEdges(edgePts); + drawAllEdges(allEdgePts); let force = 1; let spacePressed = false;