diff --git a/html/images/space.svg b/html/images/space.svg
index 2b11514..97fb9d6 100644
--- a/html/images/space.svg
+++ b/html/images/space.svg
@@ -20,7 +20,7 @@
}
rect#bg {
- fill: gray;
+ fill: black;
}
.ship circle {
@@ -62,13 +62,15 @@
}
.wall.inverse {
- stroke: blue;
- fill: white;
- fill-opacity: 0.5;
+ /* stroke: blue; */
+ /* fill: lightgray; */
+ fill: gray;
+ /* fill-opacity: 0.5; */
}
+
@@ -80,9 +82,8 @@
-
-
-
+
+
@@ -142,7 +143,7 @@
const halfPi = Math.PI / 2;
const maxSpeed = 100;
- const drawCollisionLines = true;
+ const drawCollisionLines = false;
let previous, zero, frameCount = 0;
// let position = [0, 0]; // meters
@@ -166,6 +167,7 @@
const ship = document.querySelector(".ship");
const gun = ship.querySelector('#cannon');
const shipBody = ship.querySelector("#body");
+ // const walls = document.querySelectorAll('.wall:not(.inverse)');
const walls = document.querySelectorAll('.wall');
const bulletsContainer = document.querySelector("#bullets");
const triangleContainer = document.querySelector('#triangles');
@@ -174,12 +176,14 @@
const bulletPt = svg.createSVGPoint();
const cornerPt = svg.createSVGPoint();
- const allWallCorners = [...walls].map(wall =>
- wall.getAttribute('points').split(' ').map(coords => {
+ const allWallCorners = [...walls].map(wall => {
+ const cs = wall.getAttribute('points').split(' ').map(coords => {
const [x, y] = coords.split(',');
return [+x, +y];
- }
- ));
+ });
+
+ return wall.classList.contains("inverse") ? cs.reverse() : cs;
+ });
const allEdgePts = allWallCorners.map(w =>
w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]])