ccm/miti.sh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add inverse walls

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2025-12-23 17:34:37 -08:00
parent b6bc696823
commit 1fd87f8351
1 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
html/images/space.svg
View File

@@ -20,7 +20,7 @@
} }
rect#bg { rect#bg {
fill: gray; fill: black;
} }
.ship circle { .ship circle {
@@ -62,13 +62,15 @@
} }
.wall.inverse { .wall.inverse {
stroke: blue; /* stroke: blue; */
fill: white; /* fill: lightgray; */
fill-opacity: 0.5; fill: gray;
/* fill-opacity: 0.5; */
} }
</style> </style>
<rect id="bg" x="-200" y="-150" width="400" height="300"/> <rect id="bg" x="-200" y="-150" width="400" height="300"/>
<polygon class="wall inverse" points="-180,-40 -170,-120 40,-130 170,-120 180,40 170,130 -40,130 -170,120" />
<g class="ship"> <g class="ship">
<line id="cannon" x1="0" y1="0" x2="0" y2="8" stroke="black"/> <line id="cannon" x1="0" y1="0" x2="0" y2="8" stroke="black"/>
@@ -80,9 +82,8 @@
</g> </g>
<!-- <polygon class="wall" points="20,20 40,20 40,40 20,40" /> --> <!-- <polygon class="wall" points="20,20 40,20 40,40 20,40" /> -->
<polygon class="wall" points="10,10 20,10 20,20 10,20" /> <!-- <polygon class="wall" points="10,10 20,10 20,20 10,20" /> -->
<polygon class="wall inverse" points="-40,-40 40,-40 40,40 -40,40" /> <polygon class="wall" points="20,-50 -50,-50 -60,-70 -50,-100 80,-100 80,-90 -20,-90 -20,-60 40,-60 40,40 20,40" />
<!-- <polygon class="wall" points="20,-50 -50,-50 -60,-70 -50,-100 80,-100 80,-90 -20,-90 -20,-60 40,-60 40,40 20,40" /> -->
<!-- <polygon class="wall" points="-10,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" /> --> <!-- <polygon class="wall" points="-10,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" /> -->
<!-- <g> --> <!-- <g> -->
<!-- <polygon class="wall" points="-130,-80 -40,-70 -70,-10" /> --> <!-- <polygon class="wall" points="-130,-80 -40,-70 -70,-10" /> -->
@@ -142,7 +143,7 @@
const halfPi = Math.PI / 2; const halfPi = Math.PI / 2;
const maxSpeed = 100; const maxSpeed = 100;
const drawCollisionLines = true; const drawCollisionLines = false;
let previous, zero, frameCount = 0; let previous, zero, frameCount = 0;
// let position = [0, 0]; // meters // let position = [0, 0]; // meters
@@ -166,6 +167,7 @@
const ship = document.querySelector(".ship"); const ship = document.querySelector(".ship");
const gun = ship.querySelector('#cannon'); const gun = ship.querySelector('#cannon');
const shipBody = ship.querySelector("#body"); const shipBody = ship.querySelector("#body");
// const walls = document.querySelectorAll('.wall:not(.inverse)');
const walls = document.querySelectorAll('.wall'); const walls = document.querySelectorAll('.wall');
const bulletsContainer = document.querySelector("#bullets"); const bulletsContainer = document.querySelector("#bullets");
const triangleContainer = document.querySelector('#triangles'); const triangleContainer = document.querySelector('#triangles');
@@ -174,12 +176,14 @@
const bulletPt = svg.createSVGPoint(); const bulletPt = svg.createSVGPoint();
const cornerPt = svg.createSVGPoint(); const cornerPt = svg.createSVGPoint();
const allWallCorners = [...walls].map(wall => const allWallCorners = [...walls].map(wall => {
wall.getAttribute('points').split(' ').map(coords => { const cs = wall.getAttribute('points').split(' ').map(coords => {
const [x, y] = coords.split(','); const [x, y] = coords.split(',');
return [+x, +y]; return [+x, +y];
} });
));
return wall.classList.contains("inverse") ? cs.reverse() : cs;
});
const allEdgePts = allWallCorners.map(w => const allEdgePts = allWallCorners.map(w =>
w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]]) w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]])
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB