dogeystamp/monorepo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[pongwars] starting grid configuration

Browse Source 
more pretty than pure noise
This commit is contained in:
dogeystamp 2024-02-17 19:42:58 -05:00
parent 7f63fb4c22
commit fba38f982c
Signed by: dogeystamp
GPG Key ID: 7225FE3592EFFA38
1 changed files with 137 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

238
pongwars/index.html
View File

@ -82,111 +82,108 @@
</body> </body>
<script> <script>
// Based on: https://github.com/vnglst/pong-wars // Based on: https://github.com/vnglst/pong-wars
// Idea for Pong wars: https://twitter.com/nicolasdnl/status/1749715070928433161 // Idea for Pong wars: https://twitter.com/nicolasdnl/status/1749715070928433161
// This code is patched: see https://github.com/dogeystamp/garbage-monorepo/tree/main/pongwars // This code is patched: see https://github.com/dogeystamp/garbage-monorepo/tree/main/pongwars
// Main features added are controlling balls and colors being able to die // Main features added are controlling balls and colors being able to die
const canvas = document.getElementById("pongCanvas"); const canvas = document.getElementById("pongCanvas");
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const scoreElement = document.getElementById("score"); const scoreElement = document.getElementById("score");
var suddenDeathStart = null; var suddenDeathStart = null;
var suddenDeathCoeff = 0; var suddenDeathCoeff = 0;
const teams = [ const teams = [
{ {
name: "red", name: "red",
color: "indianred", color: "indianred",
backgroundColor: "darkred", backgroundColor: "darkred",
x: 256, x: 256,
y: 256, y: 256,
dx: 8, dx: 8,
dy: 8, dy: 8,
score: 0, score: 0,
}, },
{ {
name: "blue", name: "blue",
color: "blue", color: "blue",
backgroundColor: "darkblue", backgroundColor: "darkblue",
x: 768, x: 768,
y: 256, y: 256,
dx: -8, dx: -8,
dy: 8, dy: 8,
score: 0, score: 0,
}, },
{ {
name: "green", name: "green",
color: "green", color: "green",
backgroundColor: "darkgreen", backgroundColor: "darkgreen",
x: 256, x: 256,
y: 768, y: 768,
dx: 8, dx: 8,
dy: -8, dy: -8,
score: 0, score: 0,
}, },
{ {
name: "orange", name: "orange",
color: "coral", color: "coral",
backgroundColor: "chocolate", backgroundColor: "chocolate",
x: 768, x: 768,
y: 768, y: 768,
dx: -8, dx: -8,
dy: -8, dy: -8,
score: 0, score: 0,
}, },
{ {
name: "white", name: "white",
color: "white", color: "white",
backgroundColor: "gainsboro", backgroundColor: "gainsboro",
x: 400, x: 400,
y: 768, y: 768,
dx: -9, dx: -9,
dy: -9, dy: -9,
score: 0, score: 0,
}, },
{ {
name: "black", name: "black",
color: "#333333", color: "#333333",
backgroundColor: "black", backgroundColor: "black",
x: 400, x: 400,
y: 300, y: 300,
dx: -8, dx: -8,
dy: -8, dy: -8,
score: 0, score: 0,
}, },
{ {
name: "ourple", name: "ourple",
color: "violet", color: "violet",
backgroundColor: "purple", backgroundColor: "purple",
x: 400, x: 400,
y: 768, y: 768,
dx: -8, dx: -8,
dy: -8, dy: -8,
score: 0, score: 0,
}, },
{ {
name: "gray", name: "gray",
color: "gray", color: "gray",
backgroundColor: "#333333", backgroundColor: "#333333",
x: 400, x: 400,
y: 768, y: 768,
dx: -8, dx: -8,
dy: -8, dy: -8,
score: 0, score: 0,
}, },
]; ];
var state = teams.map((team) => ({ var state = {}
elim: false,
boostEnabled: false,
}))
const squareSize = 16; const squareSize = 16;
const numSquaresX = canvas.width / squareSize; const numSquaresX = canvas.width / squareSize;
const numSquaresY = canvas.height / squareSize; const numSquaresY = canvas.height / squareSize;
let squares = []; let squares = [];
document.addEventListener("keydown", (event) => { document.addEventListener("keydown", (event) => {
const key = parseInt(event.key) const key = parseInt(event.key)
@ -199,6 +196,8 @@
state[key].boostEnabled = false; state[key].boostEnabled = false;
}) })
function initialState() {
// base noise pattern (failsafe in case the grid doesn't cover some part)
for (let i = 0; i < numSquaresX; i++) { for (let i = 0; i < numSquaresX; i++) {
squares[i] = []; squares[i] = [];
for (let j = 0; j < numSquaresY; j++) { for (let j = 0; j < numSquaresY; j++) {
@ -207,10 +206,47 @@
} }
} }
function randomNum(min, max) { const enableGrid = true;
return Math.random() * (max - min) + min; if (enableGrid) {
const gridW = 4;
const gridH = 2;
for (let i = 0; i < gridW; i++) {
for (let j = 0; j < gridH; j++) {
const gridIdx = j * gridW + i;
const t = (gridIdx < teams.length) ? gridIdx : null;
for (let x = Math.floor(i/gridW*numSquaresX); x < Math.floor((i+1)/gridW*numSquaresX); x++) {
for (let y = Math.floor(j/gridH*numSquaresY); y < Math.floor((j+1)/gridH*numSquaresY); y++) {
if (t !== null) {
squares[x][y] = t;
}
}
}
if (t !== null) {
teams[t].x = Math.floor((i+0.5)/gridW*canvas.width);
teams[t].y = Math.floor((j+0.5)/gridH*canvas.height);
}
}
}
for (let i = 0; i < teams.length; i++) {
teams[i].dx = 5 * randInt(-1, 1);
teams[i].dy = 5;
}
} }
state = teams.map((team) => ({
elim: false,
boostEnabled: false,
}))
}
initialState();
function randomNum(min, max) {
return Math.random() * (max - min) + min;
}
function randInt(min, max) { function randInt(min, max) {
return Math.floor(randomNum(min, max+1)) return Math.floor(randomNum(min, max+1))
} }