Compare commits
2 Commits
240fc5fe4c
...
fba38f982c
Author | SHA1 | Date | |
---|---|---|---|
fba38f982c | |||
7f63fb4c22 |
@ -82,110 +82,108 @@
|
||||
</body>
|
||||
|
||||
<script>
|
||||
// Based on: https://github.com/vnglst/pong-wars
|
||||
// Idea for Pong wars: https://twitter.com/nicolasdnl/status/1749715070928433161
|
||||
// Based on: https://github.com/vnglst/pong-wars
|
||||
// Idea for Pong wars: https://twitter.com/nicolasdnl/status/1749715070928433161
|
||||
|
||||
// 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
|
||||
// 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
|
||||
|
||||
const canvas = document.getElementById("pongCanvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
const scoreElement = document.getElementById("score");
|
||||
const startTime = new Date();
|
||||
var suddenDeathCoeff = 0;
|
||||
const canvas = document.getElementById("pongCanvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
const scoreElement = document.getElementById("score");
|
||||
|
||||
const teams = [
|
||||
{
|
||||
name: "red",
|
||||
color: "indianred",
|
||||
backgroundColor: "darkred",
|
||||
x: 256,
|
||||
y: 256,
|
||||
dx: 8,
|
||||
dy: 8,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "blue",
|
||||
color: "blue",
|
||||
backgroundColor: "darkblue",
|
||||
x: 768,
|
||||
y: 256,
|
||||
dx: -8,
|
||||
dy: 8,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "green",
|
||||
color: "green",
|
||||
backgroundColor: "darkgreen",
|
||||
x: 256,
|
||||
y: 768,
|
||||
dx: 8,
|
||||
dy: -8,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "orange",
|
||||
color: "coral",
|
||||
backgroundColor: "chocolate",
|
||||
x: 768,
|
||||
y: 768,
|
||||
dx: -8,
|
||||
dy: -8,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "white",
|
||||
color: "white",
|
||||
backgroundColor: "gainsboro",
|
||||
x: 400,
|
||||
y: 768,
|
||||
dx: -9,
|
||||
dy: -9,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "black",
|
||||
color: "#333333",
|
||||
backgroundColor: "black",
|
||||
x: 400,
|
||||
y: 300,
|
||||
dx: -8,
|
||||
dy: -8,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "ourple",
|
||||
color: "violet",
|
||||
backgroundColor: "purple",
|
||||
x: 400,
|
||||
y: 768,
|
||||
dx: -8,
|
||||
dy: -8,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "gray",
|
||||
color: "gray",
|
||||
backgroundColor: "#333333",
|
||||
x: 400,
|
||||
y: 768,
|
||||
dx: -8,
|
||||
dy: -8,
|
||||
score: 0,
|
||||
},
|
||||
];
|
||||
var suddenDeathStart = null;
|
||||
var suddenDeathCoeff = 0;
|
||||
|
||||
var state = teams.map((team) => ({
|
||||
elim: false,
|
||||
boostEnabled: false,
|
||||
}))
|
||||
const teams = [
|
||||
{
|
||||
name: "red",
|
||||
color: "indianred",
|
||||
backgroundColor: "darkred",
|
||||
x: 256,
|
||||
y: 256,
|
||||
dx: 8,
|
||||
dy: 8,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "blue",
|
||||
color: "blue",
|
||||
backgroundColor: "darkblue",
|
||||
x: 768,
|
||||
y: 256,
|
||||
dx: -8,
|
||||
dy: 8,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "green",
|
||||
color: "green",
|
||||
backgroundColor: "darkgreen",
|
||||
x: 256,
|
||||
y: 768,
|
||||
dx: 8,
|
||||
dy: -8,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "orange",
|
||||
color: "coral",
|
||||
backgroundColor: "chocolate",
|
||||
x: 768,
|
||||
y: 768,
|
||||
dx: -8,
|
||||
dy: -8,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "white",
|
||||
color: "white",
|
||||
backgroundColor: "gainsboro",
|
||||
x: 400,
|
||||
y: 768,
|
||||
dx: -9,
|
||||
dy: -9,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "black",
|
||||
color: "#333333",
|
||||
backgroundColor: "black",
|
||||
x: 400,
|
||||
y: 300,
|
||||
dx: -8,
|
||||
dy: -8,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "ourple",
|
||||
color: "violet",
|
||||
backgroundColor: "purple",
|
||||
x: 400,
|
||||
y: 768,
|
||||
dx: -8,
|
||||
dy: -8,
|
||||
score: 0,
|
||||
},
|
||||
{
|
||||
name: "gray",
|
||||
color: "gray",
|
||||
backgroundColor: "#333333",
|
||||
x: 400,
|
||||
y: 768,
|
||||
dx: -8,
|
||||
dy: -8,
|
||||
score: 0,
|
||||
},
|
||||
];
|
||||
|
||||
const squareSize = 16;
|
||||
const numSquaresX = canvas.width / squareSize;
|
||||
const numSquaresY = canvas.height / squareSize;
|
||||
let squares = [];
|
||||
var state = {}
|
||||
|
||||
const squareSize = 16;
|
||||
const numSquaresX = canvas.width / squareSize;
|
||||
const numSquaresY = canvas.height / squareSize;
|
||||
let squares = [];
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
const key = parseInt(event.key)
|
||||
@ -198,6 +196,8 @@
|
||||
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++) {
|
||||
squares[i] = [];
|
||||
for (let j = 0; j < numSquaresY; j++) {
|
||||
@ -206,16 +206,53 @@
|
||||
}
|
||||
}
|
||||
|
||||
function randomNum(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
const enableGrid = true;
|
||||
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) {
|
||||
return Math.floor(randomNum(min, max+1))
|
||||
}
|
||||
|
||||
function elapsedSec() {
|
||||
return ((new Date()) - startTime)/1000
|
||||
return ((new Date()) - suddenDeathStart)/1000
|
||||
}
|
||||
|
||||
updateScoreElement();
|
||||
@ -245,10 +282,14 @@
|
||||
return v*x + (1-v)*y;
|
||||
}
|
||||
|
||||
var nTeams = teams.length;
|
||||
|
||||
function updateSquareAndBounce(x, y, dx, dy, color) {
|
||||
if (state[color].elim) return
|
||||
if (Math.max(Math.abs(dx), Math.abs(dy)) < 0.02) state[color].elim = true
|
||||
|
||||
nTeams = state.map(t => !t.elim).filter(Boolean).length
|
||||
|
||||
if (Math.min(x, y) < 0 || isNaN(x) || isNaN(y)) {
|
||||
console.warn(`warped ${teams[color].name}`)
|
||||
teams[color].x = canvas.width * 0.1;
|
||||
@ -265,8 +306,6 @@
|
||||
dy = -4;
|
||||
}
|
||||
|
||||
const nTeams = state.map(t => !t.elim).filter(Boolean).length
|
||||
|
||||
// death coefficient (if not enough territory, slow down)
|
||||
const coeff = Math.min((teams[color].score/(numSquaresX*numSquaresY/nTeams/mix(1.2, 4, suddenDeathCoeff))), 1.00);
|
||||
|
||||
@ -348,9 +387,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
scoreElement.textContent = teams
|
||||
.map((t, idx) => `(${idx}) ${t.name} ${t.score}`)
|
||||
.join(" | ") + (suddenDeathCoeff > 0.1 ? " | sudden death!" : "");
|
||||
if (nTeams > 1) {
|
||||
scoreElement.textContent = teams
|
||||
.map((t, idx) => `(${idx}) ${t.name} ${t.score}`)
|
||||
.filter((t, idx) => !state[idx].elim)
|
||||
.join(" | ") + (suddenDeathCoeff > 0.1 ? " | sudden death!" : "");
|
||||
} else {
|
||||
scoreElement.textContent = teams
|
||||
.filter((t, idx) => !state[idx].elim)
|
||||
.map((t) => `${t.name} 👑 wins`)
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
@ -383,7 +429,11 @@
|
||||
}
|
||||
|
||||
updateScoreElement();
|
||||
// suddenDeathCoeff = Math.min((elapsedSec()/60/3)**15, 1);
|
||||
if (suddenDeathStart !== null) {
|
||||
suddenDeathCoeff = Math.min((elapsedSec()/60/5)**15, 1);
|
||||
} else if (nTeams <= 3) {
|
||||
suddenDeathStart = new Date();
|
||||
}
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user