919 lines
28 KiB
JavaScript
919 lines
28 KiB
JavaScript
import {AI_TYPES} from './ai.js?v=5';
|
|
import {DEATH_SPECS, EXPLOSION_SHAKE_REDUCTION_FACTOR, H, MAX_EXPLOSION_SHAKE_FACTOR, MAX_WIND, PARTICLE_AMOUNT, PARTICLE_FADE_AMOUNT, PARTICLE_MAX_POWER_FACTOR, PARTICLE_MIN_LIFETIME, PARTICLE_MIN_POWER_FACTOR, PARTICLE_POWER_REDUCTION_FACTOR, PARTICLE_TIME_FACTOR, PARTICLE_WIND_REDUCTION_FACTOR, PLAYER_ANGLE_FAST_INCREMENT, PLAYER_ANGLE_INCREMENT, PLAYER_ANGLE_TICK_SOUND_INTERVAL, PLAYER_COLORS, PLAYER_ENERGY_POWER_MULTIPLIER, PLAYER_EXPLOSION_PARTICLE_POWER, PLAYER_FALL_DAMAGE_FACTOR, PLAYER_FALL_DAMAGE_HEIGHT, PLAYER_INITIAL_POWER, PLAYER_MAX_ENERGY, PLAYER_POWER_FAST_INCREMENT, PLAYER_POWER_INCREMENT, PLAYER_POWER_TICK_SOUND_INTERVAL, PLAYER_STARTING_TOOLS, PLAYER_STARTING_WEAPONS, PLAYER_TANK_BOUNDING_RADIUS, PLAYER_TANK_Y_FOOTPRINT, SHIELD_TYPES, TRAJECTORY_FADE_SPEED, TRAJECTORY_FLOAT_SPEED, W, WEAPON_TYPES, Z, STARTING_SCORE, SCORE_PER_KILL, SCORE_FOR_WIN, MARKET_ITEMS} from './constants.js?v=5';
|
|
import {createCanvas, drawLine, drawRect, drawSemiCircle, drawText, loop, plot, strokeCircle} from './gfx.js?v=5';
|
|
import {afterKeyDelay, key} from './input.js?v=5';
|
|
import {clamp, deg2rad, distance, parable, random, randomInt, vec, wrap} from './math.js?v=5';
|
|
import {PROJECTILE_TYPES} from './projectiles.js?v=5';
|
|
import {generateSky} from './sky.js?v=5';
|
|
import {playTickSound} from './sound.js?v=5';
|
|
import {clipTerrain, closestLand, collapseTerrain, generateTerrain, isTerrain, landHeight} from './terrain.js?v=5';
|
|
import {sample, shuffle} from './utils.js?v=5';
|
|
import {EXPLOSION_TYPES} from './weapons.js?v=5';
|
|
import {drawPanelBg, drawPanelTitle, drawPanelText, drawPanelDivider, drawPanelMenu, getPanelBounds} from './panel.js?v=5';
|
|
|
|
|
|
let state = 'start-game';
|
|
let players = [];
|
|
let currentPlayer = 0;
|
|
let projectiles = [];
|
|
let explosions = [];
|
|
let wind = 0;
|
|
let particles = [];
|
|
let screenShake = 0;
|
|
let trajectories = [];
|
|
let idle = false;
|
|
let winner;
|
|
|
|
let score = 0;
|
|
let round = 0;
|
|
let totalRounds = 1;
|
|
let selectedPlayers = 6;
|
|
let selectedTerrain = null;
|
|
let menuState = null;
|
|
|
|
// Music
|
|
// const music = createAudioLoop('assets/battle.mp3');
|
|
|
|
// Init layers
|
|
const sky = createCanvas(W, H);
|
|
const traces = createCanvas(W, H);
|
|
const terrain = createCanvas(W, H);
|
|
const foreground = createCanvas(W, H);
|
|
|
|
// Composited layer
|
|
const framebuffer = createCanvas(W, H);
|
|
framebuffer.canvas.style.width = `${W * Z}px`;
|
|
framebuffer.canvas.style.height = `${H * Z}px`;
|
|
document.body.appendChild(framebuffer.canvas);
|
|
|
|
function init() {
|
|
currentPlayer = 0;
|
|
projectiles = [];
|
|
explosions = [];
|
|
particles = [];
|
|
screenShake = 0;
|
|
trajectories = [];
|
|
idle = false;
|
|
winner = null;
|
|
wind = randomInt(-MAX_WIND, +MAX_WIND);
|
|
|
|
initLevel();
|
|
initPlayers();
|
|
}
|
|
|
|
function initNewGame() {
|
|
score = STARTING_SCORE;
|
|
round = 0;
|
|
totalRounds = 1;
|
|
selectedPlayers = 6;
|
|
selectedTerrain = null;
|
|
menuState = {
|
|
selected: 0,
|
|
values: [1, 0, 0],
|
|
};
|
|
state = 'start-menu';
|
|
}
|
|
|
|
function updateStartMenu() {
|
|
const options = ['Players', 'Rounds', 'Terrain'];
|
|
const playerCounts = [2, 3, 4, 5, 6];
|
|
const roundCounts = [1, 3, 5, 10];
|
|
const terrains = ['Random', 'Mountain', 'Sand'];
|
|
|
|
if (!menuState) {
|
|
menuState = {
|
|
selected: 0,
|
|
values: [selectedPlayers, totalRounds, selectedTerrain || 0],
|
|
};
|
|
}
|
|
|
|
if (key('ArrowUp')) {
|
|
if (afterKeyDelay()) {
|
|
menuState.selected = (menuState.selected - 1 + options.length) % options.length;
|
|
playTickSound();
|
|
}
|
|
}
|
|
else if (key('ArrowDown')) {
|
|
if (afterKeyDelay()) {
|
|
menuState.selected = (menuState.selected + 1) % options.length;
|
|
playTickSound();
|
|
}
|
|
}
|
|
else if (key('ArrowLeft')) {
|
|
if (afterKeyDelay()) {
|
|
const opt = menuState.selected;
|
|
if (opt === 0) {
|
|
menuState.values[0] = (menuState.values[0] - 2 + playerCounts.length) % playerCounts.length;
|
|
} else if (opt === 1) {
|
|
menuState.values[1] = (menuState.values[1] - 1 + roundCounts.length) % roundCounts.length;
|
|
} else if (opt === 2) {
|
|
menuState.values[2] = (menuState.values[2] - 1 + terrains.length) % terrains.length;
|
|
}
|
|
playTickSound();
|
|
}
|
|
}
|
|
else if (key('ArrowRight')) {
|
|
if (afterKeyDelay()) {
|
|
const opt = menuState.selected;
|
|
if (opt === 0) {
|
|
menuState.values[0] = (menuState.values[0] + 1) % playerCounts.length;
|
|
} else if (opt === 1) {
|
|
menuState.values[1] = (menuState.values[1] + 1) % roundCounts.length;
|
|
} else if (opt === 2) {
|
|
menuState.values[2] = (menuState.values[2] + 1) % terrains.length;
|
|
}
|
|
playTickSound();
|
|
}
|
|
}
|
|
else if (key('Enter')) {
|
|
if (afterKeyDelay()) {
|
|
selectedPlayers = playerCounts[menuState.values[0]];
|
|
totalRounds = roundCounts[menuState.values[1]];
|
|
selectedTerrain = menuState.values[2] === 0 ? null : terrains[menuState.values[2]].toLowerCase();
|
|
menuState = null;
|
|
score = STARTING_SCORE;
|
|
initAllPlayerStats();
|
|
state = 'market';
|
|
}
|
|
}
|
|
}
|
|
|
|
function initAllPlayerStats() {
|
|
players = [];
|
|
const playerCount = selectedPlayers;
|
|
for (let i=0; i<playerCount; i++) {
|
|
const [color, borderColor] = PLAYER_COLORS[i];
|
|
players.push({
|
|
name: `Player ${i+1}`,
|
|
dead: false,
|
|
x:0, y:0, a:0,
|
|
c: color, cb: borderColor,
|
|
p: PLAYER_INITIAL_POWER,
|
|
tools: [{type: 'parachute', ammo: 0}],
|
|
weapons: PLAYER_STARTING_WEAPONS.map(x => ({...x})),
|
|
currentWeapon: 0,
|
|
energy: PLAYER_MAX_ENERGY,
|
|
shield: null,
|
|
ai: i !== 0 ? sample(Object.keys(AI_TYPES)) : undefined,
|
|
parachute: null,
|
|
fallHeight: 0,
|
|
score: 0,
|
|
kills: 0,
|
|
deaths: 0,
|
|
shotsFired: 0,
|
|
wins: 0,
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateMarket() {
|
|
const marketItems = Object.keys(MARKET_ITEMS);
|
|
|
|
if (!menuState) {
|
|
menuState = {
|
|
selected: 0,
|
|
scrollOffset: 0,
|
|
};
|
|
players.forEach(p => {
|
|
if (p.ai) aiBuy(p);
|
|
});
|
|
}
|
|
|
|
if (key('ArrowUp')) {
|
|
if (afterKeyDelay()) {
|
|
menuState.selected = (menuState.selected - 1 + marketItems.length) % marketItems.length;
|
|
if (menuState.selected < menuState.scrollOffset) menuState.scrollOffset = menuState.selected;
|
|
if (menuState.selected >= menuState.scrollOffset + 8) menuState.scrollOffset = menuState.selected - 7;
|
|
playTickSound();
|
|
}
|
|
}
|
|
else if (key('ArrowDown')) {
|
|
if (afterKeyDelay()) {
|
|
menuState.selected = (menuState.selected + 1) % marketItems.length;
|
|
if (menuState.selected >= menuState.scrollOffset + 8) menuState.scrollOffset = menuState.selected - 7;
|
|
if (menuState.selected < menuState.scrollOffset) menuState.scrollOffset = menuState.selected;
|
|
playTickSound();
|
|
}
|
|
}
|
|
else if (key('ArrowRight')) {
|
|
if (afterKeyDelay()) {
|
|
const item = marketItems[menuState.selected];
|
|
const itemData = MARKET_ITEMS[item];
|
|
const humanPlayer = players.find(p => !p.ai);
|
|
if (humanPlayer && score >= itemData.price && item !== 'babyMissile') {
|
|
score -= itemData.price;
|
|
let existingWeapon = humanPlayer.weapons.find(w => w.type === item);
|
|
if (existingWeapon) {
|
|
existingWeapon.ammo += itemData.ammo;
|
|
} else {
|
|
humanPlayer.weapons.push({type: item, ammo: itemData.ammo});
|
|
}
|
|
playTickSound();
|
|
}
|
|
}
|
|
}
|
|
else if (key('ArrowLeft')) {
|
|
if (afterKeyDelay()) {
|
|
const item = marketItems[menuState.selected];
|
|
const itemData = MARKET_ITEMS[item];
|
|
const humanPlayer = players.find(p => !p.ai);
|
|
if (humanPlayer && item !== 'babyMissile' && item !== 'tracer') {
|
|
const weapon = humanPlayer.weapons.find(w => w.type === item);
|
|
if (weapon && weapon.ammo > 0) {
|
|
const refund = itemData.price / itemData.ammo;
|
|
score += refund;
|
|
weapon.ammo--;
|
|
if (weapon.ammo <= 0) {
|
|
humanPlayer.weapons = humanPlayer.weapons.filter(w => w.type !== item);
|
|
}
|
|
playTickSound();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else if (key(' ')) {
|
|
idle = true;
|
|
}
|
|
else if (key('Enter')) {
|
|
if (afterKeyDelay()) {
|
|
menuState = null;
|
|
state = 'round-start';
|
|
}
|
|
}
|
|
else {
|
|
idle = true;
|
|
}
|
|
}
|
|
|
|
function aiBuy(player) {
|
|
player.score = STARTING_SCORE;
|
|
const marketItems = Object.keys(MARKET_ITEMS).filter(x => x !== 'babyMissile' && x !== 'tracer');
|
|
let attempts = 0;
|
|
while (player.score > 0 && attempts < 20) {
|
|
const item = sample(marketItems);
|
|
const itemData = MARKET_ITEMS[item];
|
|
if (player.score >= itemData.price) {
|
|
player.score -= itemData.price;
|
|
let existingWeapon = player.weapons.find(w => w.type === item);
|
|
if (existingWeapon) {
|
|
existingWeapon.ammo += itemData.ammo;
|
|
} else {
|
|
player.weapons.push({type: item, ammo: itemData.ammo});
|
|
}
|
|
}
|
|
attempts++;
|
|
}
|
|
}
|
|
|
|
function initPlayers() {
|
|
const playerCount = selectedPlayers;
|
|
const existingPlayers = players.length === playerCount ? players : [];
|
|
|
|
if (existingPlayers.length === playerCount) {
|
|
for (let i=0; i<playerCount; i++) {
|
|
const player = existingPlayers[i];
|
|
player.dead = false;
|
|
player.x = 0;
|
|
player.y = 0;
|
|
player.a = 0;
|
|
player.p = PLAYER_INITIAL_POWER;
|
|
player.currentWeapon = 0;
|
|
player.energy = PLAYER_MAX_ENERGY;
|
|
player.shield = {type:'springShield', energy:SHIELD_TYPES.springShield.energy};
|
|
player.parachute = null;
|
|
player.fallHeight = 0;
|
|
player.kills = 0;
|
|
player.deaths = 0;
|
|
player.shotsFired = 0;
|
|
}
|
|
players = existingPlayers;
|
|
} else {
|
|
players = [];
|
|
for (let i=0; i<playerCount; i++) {
|
|
const [color, borderColor] = PLAYER_COLORS[i];
|
|
players.push({
|
|
name: `Player ${i+1}`,
|
|
dead: false,
|
|
x:0, y:0, a:0,
|
|
c: color, cb: borderColor,
|
|
p: PLAYER_INITIAL_POWER,
|
|
tools: [{type: 'parachute', ammo: 0}],
|
|
weapons: PLAYER_STARTING_WEAPONS.map(x => ({...x})),
|
|
currentWeapon: 0,
|
|
energy: PLAYER_MAX_ENERGY,
|
|
shield: {type:'springShield', energy:SHIELD_TYPES.springShield.energy},
|
|
ai: i !== 0 ? sample(Object.keys(AI_TYPES)) : undefined,
|
|
parachute: null,
|
|
fallHeight: 0,
|
|
score: 0,
|
|
kills: 0,
|
|
deaths: 0,
|
|
shotsFired: 0,
|
|
wins: 0,
|
|
});
|
|
}
|
|
}
|
|
|
|
players = shuffle(players);
|
|
|
|
for (let i=0; i<players.length; i++) {
|
|
const player = players[i];
|
|
player.x = 50 + (W-100) / (players.length - 1) * i;
|
|
player.y = landHeight(terrain, player.x) + 1;
|
|
player.a = player.x > W/2 ? 45 : 180-45;
|
|
clipTerrain(terrain, (ctx) => drawRect(ctx, player.x-4, 0, 8, player.y, ctx.color));
|
|
}
|
|
}
|
|
|
|
function initLevel() {
|
|
generateSky(sky);
|
|
generateTerrain(terrain);
|
|
}
|
|
|
|
function update() {
|
|
idle = false;
|
|
|
|
updateParticles();
|
|
|
|
if (state === 'start-game') {
|
|
initNewGame();
|
|
}
|
|
|
|
else if (state === 'start-menu') {
|
|
updateStartMenu();
|
|
}
|
|
|
|
else if (state === 'market') {
|
|
updateMarket();
|
|
}
|
|
|
|
else if (state === 'round-start') {
|
|
round++;
|
|
init();
|
|
state = 'start-turn';
|
|
}
|
|
|
|
else if (state === 'start-turn') {
|
|
state = 'aim';
|
|
}
|
|
|
|
else if (state === 'aim') {
|
|
const player = players[currentPlayer];
|
|
const {x, y, a, p, weapons, energy} = player;
|
|
const maxPower = energy * PLAYER_ENERGY_POWER_MULTIPLIER;
|
|
player.p = clamp(0, player.p, maxPower);
|
|
const isPrecise = key('Alt');
|
|
const isFast = key('Shift');
|
|
const isReverse = key('Shift');
|
|
let shoot;
|
|
|
|
if (player.ai) {
|
|
let ai = AI_TYPES[player.ai];
|
|
const plan = ai.decide(player);
|
|
player.a = wrap(0, plan.a, 180);
|
|
player.p = clamp(0, plan.p, maxPower);
|
|
player.currentWeapon = clamp(0, plan.currentWeapon, weapons.length-1);
|
|
shoot = true;
|
|
}
|
|
|
|
else if (key('ArrowLeft')) {
|
|
if (isPrecise && !afterKeyDelay()) return;
|
|
let incr = isFast ? PLAYER_ANGLE_FAST_INCREMENT : PLAYER_ANGLE_INCREMENT;
|
|
player.a = wrap(0, a -incr, 180);
|
|
if (isPrecise || isFast || a % PLAYER_ANGLE_TICK_SOUND_INTERVAL === 0) playTickSound();
|
|
|
|
} else if (key('ArrowRight')) {
|
|
if (isPrecise && !afterKeyDelay()) return;
|
|
let incr = isFast ? PLAYER_ANGLE_FAST_INCREMENT : PLAYER_ANGLE_INCREMENT;
|
|
player.a = wrap(0, a +incr, 180);
|
|
if (isPrecise || isFast || a % PLAYER_ANGLE_TICK_SOUND_INTERVAL === 0) playTickSound();
|
|
|
|
} else if (key('ArrowUp')) {
|
|
if (isPrecise && !afterKeyDelay()) return;
|
|
let incr = isFast ? PLAYER_POWER_FAST_INCREMENT : PLAYER_POWER_INCREMENT;
|
|
player.p = clamp(0, p +incr, maxPower);
|
|
if (p < maxPower && (isPrecise || isFast || p % PLAYER_POWER_TICK_SOUND_INTERVAL === 0)) playTickSound();
|
|
|
|
} else if (key('ArrowDown')) {
|
|
if (isPrecise && !afterKeyDelay()) return;
|
|
let incr = isFast ? PLAYER_POWER_FAST_INCREMENT : PLAYER_POWER_INCREMENT;
|
|
player.p = clamp(0, p -incr, maxPower);
|
|
if (p > 0 && (isPrecise || isFast || p % PLAYER_POWER_TICK_SOUND_INTERVAL === 0)) playTickSound();
|
|
|
|
} else if (key('Tab')) {
|
|
if (!afterKeyDelay()) return;
|
|
const dir = isReverse ? -1 : 1;
|
|
player.currentWeapon = wrap(0, player.currentWeapon+dir, player.weapons.length-1);
|
|
playTickSound();
|
|
|
|
} else if (key(' ')) {
|
|
if (!afterKeyDelay()) return;
|
|
shoot = {a, p};
|
|
|
|
} else {
|
|
idle = true;
|
|
}
|
|
|
|
if (shoot) {
|
|
const {a, p, weapons, currentWeapon} = player;
|
|
const [px, py] = vec(x, y-3, a+180, 5);
|
|
|
|
const weapon = weapons[currentWeapon];
|
|
const {projectile} = WEAPON_TYPES[weapon.type];
|
|
const projectileType = PROJECTILE_TYPES[projectile.type];
|
|
weapon.ammo -= 1;
|
|
player.shotsFired++;
|
|
|
|
projectileType.create(projectile, player, weapon, px, py, a, p, wind)
|
|
.forEach(x => projectiles.push(x));
|
|
|
|
state = 'shoot';
|
|
}
|
|
}
|
|
|
|
else if (state === 'shoot') {
|
|
for (let i=projectiles.length-1; i>=0; i--) {
|
|
const projectile = projectiles[i];
|
|
const projectileType = PROJECTILE_TYPES[projectile.type];
|
|
if (projectileType.update(projectile, terrain, projectiles, trajectories, explosions)) continue;
|
|
projectileType.stop(projectile);
|
|
projectiles.splice(i, 1);
|
|
}
|
|
if (projectiles.length === 0) {
|
|
state = 'explosions';
|
|
}
|
|
}
|
|
|
|
else if (state === 'explosions') {
|
|
for (let i=explosions.length-1; i>=0; i--) {
|
|
const explosion = explosions[i];
|
|
const explosionType = EXPLOSION_TYPES[explosion.type];
|
|
screenShake = (
|
|
clamp(0, explosion.r, MAX_EXPLOSION_SHAKE_FACTOR) /
|
|
EXPLOSION_SHAKE_REDUCTION_FACTOR
|
|
);
|
|
|
|
if (explosionType.update(explosion)) continue;
|
|
screenShake = 0;
|
|
explosionType.clip(explosion, terrain);
|
|
explosionType.stop(explosion);
|
|
|
|
for (let player of players) if (!player.dead) {
|
|
let damage = explosionType.damage(explosion, player);
|
|
let remainingDamage = damage;
|
|
if (!damage) continue;
|
|
|
|
if (player.shield) {
|
|
remainingDamage = clamp(0, damage-player.shield.energy, Infinity);
|
|
player.shield.energy = clamp(0, player.shield.energy-damage, Infinity);
|
|
}
|
|
|
|
player.energy -= remainingDamage;
|
|
}
|
|
explosions.splice(i, 1);
|
|
}
|
|
if (explosions.length === 0) {
|
|
state = 'land-collapse';
|
|
}
|
|
}
|
|
|
|
else if (state === 'land-collapse') {
|
|
collapseTerrain(terrain);
|
|
state = 'land-players';
|
|
}
|
|
|
|
else if (state === 'land-players') {
|
|
let stable = true;
|
|
for (let player of players) {
|
|
if (player.dead) continue;
|
|
const y = closestLand(terrain, player.x, player.y);
|
|
if (player.y !== y) {
|
|
stable = false;
|
|
player.y++;
|
|
if (player.fallHeight++ >= PLAYER_FALL_DAMAGE_HEIGHT) {
|
|
if (player.energy > 0 && player.parachute) continue;
|
|
const parachute = player.tools.find(x => x.type === 'parachute');
|
|
if (player.energy > 0 && parachute && parachute.ammo > 0) {
|
|
player.parachute = parachute;
|
|
parachute.ammo--;
|
|
continue;
|
|
}
|
|
player.energy -= PLAYER_FALL_DAMAGE_FACTOR;
|
|
}
|
|
} else {
|
|
player.parachute = null;
|
|
}
|
|
}
|
|
if (stable) state = 'destroy-players';
|
|
}
|
|
|
|
else if (state === 'destroy-players') {
|
|
const dyingPlayer = players.find(x => x.energy<=0 && !x.dead);
|
|
if (!dyingPlayer) {state = 'end-turn'; return}
|
|
|
|
const {x, y, c} = dyingPlayer;
|
|
const explosionSpec = sample(DEATH_SPECS);
|
|
const explosionType = EXPLOSION_TYPES[explosionSpec.type];
|
|
explosions.push(explosionType.create(explosionSpec, x, y));
|
|
createParticles(x, y, PLAYER_EXPLOSION_PARTICLE_POWER, c);
|
|
dyingPlayer.dead = true;
|
|
dyingPlayer.deaths++;
|
|
state = 'explosions';
|
|
}
|
|
|
|
else if (state === 'end-turn') {
|
|
const alivePlayers = players.filter(x => !x.dead);
|
|
|
|
if (alivePlayers.length === 0) {
|
|
return state = 'round-end';
|
|
} else if (alivePlayers.length === 1) {
|
|
winner = alivePlayers[0];
|
|
winner.wins++;
|
|
return state = 'round-end';
|
|
}
|
|
|
|
for (let player of players) {
|
|
player.weapons = player.weapons.filter(x => x.ammo > 0);
|
|
player.tools = player.tools.filter(x => x.ammo > 0);
|
|
player.currentWeapon = wrap(0, player.currentWeapon, player.weapons.length-1);
|
|
if (player.shield && player.shield.energy <= 0) player.shield = null;
|
|
player.fallHeight = 0;
|
|
}
|
|
|
|
for (let p=0; p<players.length; p++) {
|
|
const i = wrap(0, currentPlayer+p+1, players.length-1);
|
|
if (!players[i].dead) {currentPlayer = i; break}
|
|
}
|
|
|
|
fadeTrajectories();
|
|
state = 'start-turn';
|
|
}
|
|
|
|
else if (state === 'round-end') {
|
|
if (!menuState) {
|
|
menuState = {scoreAwarded: false};
|
|
for (let player of players) {
|
|
player.score += player.kills * SCORE_PER_KILL;
|
|
}
|
|
if (winner) {
|
|
winner.score += SCORE_FOR_WIN;
|
|
}
|
|
const humanPlayer = players.find(p => !p.ai);
|
|
if (humanPlayer) {
|
|
score += humanPlayer.kills * SCORE_PER_KILL;
|
|
if (winner === humanPlayer) score += SCORE_FOR_WIN;
|
|
}
|
|
menuState.scoreAwarded = true;
|
|
}
|
|
if (key('Enter')) {
|
|
if (afterKeyDelay()) {
|
|
menuState = null;
|
|
if (round < totalRounds) {
|
|
state = 'market';
|
|
} else {
|
|
state = 'game-over';
|
|
}
|
|
}
|
|
}
|
|
idle = true;
|
|
}
|
|
|
|
else if (state === 'game-over') {
|
|
if (key('Enter')) {
|
|
if (afterKeyDelay()) {
|
|
state = 'start-game';
|
|
}
|
|
}
|
|
idle = true;
|
|
}
|
|
|
|
else {
|
|
throw new Error(`Invalid state, ${state}`);
|
|
}
|
|
}
|
|
|
|
export function createParticles(x, y, p, c) {
|
|
for (let i = 0; i < PARTICLE_AMOUNT; i++) {
|
|
particles.push({
|
|
t: 0,
|
|
ox: x, x: x,
|
|
oy: y, y: y,
|
|
a: randomInt(0, 359),
|
|
p: p * random(PARTICLE_MIN_POWER_FACTOR, PARTICLE_MAX_POWER_FACTOR),
|
|
// @ts-ignore: canvas color hack
|
|
c, alpha: 255,
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateParticles() {
|
|
for (let i=particles.length-1; i>=0; i--) {
|
|
const particle = particles[i];
|
|
|
|
if (
|
|
particle.y > H ||
|
|
particle.alpha <= 0 ||
|
|
particle.t > PARTICLE_MIN_LIFETIME && isTerrain(terrain, particle.x, particle.y)
|
|
) {
|
|
particles.splice(i, 1);
|
|
continue;
|
|
}
|
|
|
|
const {ox, oy, t, a, p} = particle;
|
|
|
|
const [tx, ty] = parable(
|
|
t / PARTICLE_TIME_FACTOR,
|
|
ox, oy, deg2rad(180+a),
|
|
p / PARTICLE_POWER_REDUCTION_FACTOR,
|
|
wind / PARTICLE_WIND_REDUCTION_FACTOR,
|
|
);
|
|
|
|
particle.t++;
|
|
particle.x = tx;
|
|
particle.y = ty;
|
|
particle.alpha -= PARTICLE_FADE_AMOUNT;
|
|
}
|
|
}
|
|
|
|
export function isTank(x, y) {
|
|
for (let player of players) {
|
|
if (player.dead) continue;
|
|
|
|
if (
|
|
distance(x, y, player.x, player.y+PLAYER_TANK_Y_FOOTPRINT) <=
|
|
PLAYER_TANK_BOUNDING_RADIUS
|
|
) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
|
|
export function isTankShield(x, y) {
|
|
for (let player of players) {
|
|
if (player.dead) continue;
|
|
if (!player.shield) continue;
|
|
const shieldType = SHIELD_TYPES[player.shield.type];
|
|
const playerDistance = distance(x, y, player.x, player.y+PLAYER_TANK_Y_FOOTPRINT);
|
|
|
|
if (playerDistance - shieldType.r <= 1) {
|
|
return {player, shieldType};
|
|
}
|
|
}
|
|
}
|
|
|
|
function draw() {
|
|
if (idle && particles.length===0 && state !== 'start-menu' && state !== 'market' && state !== 'round-end' && state !== 'game-over') return;
|
|
|
|
foreground.clearRect(0, 0, W, H);
|
|
drawTrajectories();
|
|
drawPlayers();
|
|
drawProjectile();
|
|
drawExplosions();
|
|
drawParticles();
|
|
drawStatus();
|
|
|
|
for (let c of [sky, traces, terrain, foreground]) {
|
|
framebuffer.drawImage(c.canvas, 0, 0);
|
|
}
|
|
|
|
if (state === 'start-menu') {
|
|
drawStartMenuPanel();
|
|
} else if (state === 'market') {
|
|
drawMarketPanel();
|
|
} else if (state === 'round-end') {
|
|
drawRoundEndPanel();
|
|
} else if (state === 'game-over') {
|
|
drawGameOverPanel();
|
|
}
|
|
|
|
drawScreenShake();
|
|
}
|
|
|
|
function drawPlayers() {
|
|
for (let player of players) {
|
|
const {x, y, a, c, cb, energy, shield, dead} = player;
|
|
if (dead) continue;
|
|
|
|
// Shield
|
|
if (shield) {
|
|
const {type, energy} = shield;
|
|
const shieldType = SHIELD_TYPES[type];
|
|
foreground.globalAlpha = energy / shieldType.energy;
|
|
for (let i=0; i<shieldType.s; i++) {
|
|
strokeCircle(foreground, x, y+PLAYER_TANK_Y_FOOTPRINT, shieldType.r+i, shieldType.color);
|
|
}
|
|
foreground.globalAlpha = 1;
|
|
}
|
|
|
|
// Parachute
|
|
if (player.parachute) {
|
|
drawSemiCircle(foreground, x, y-15, 10, 'white');
|
|
drawLine(foreground, x-10, y-15, x-2, y, 'white');
|
|
drawLine(foreground, x-5, y-15, x-1, y, 'white');
|
|
drawLine(foreground, x, y-15, x, y, 'white');
|
|
drawLine(foreground, x+5, y-15, x+1, y, 'white');
|
|
drawLine(foreground, x+10, y-15, x+2, y, 'white');
|
|
}
|
|
|
|
// Cannon
|
|
const [px, py] = vec(x, y-3, a+180, 3);
|
|
drawLine(foreground, x-1, y-3, px-1, py, cb);
|
|
drawLine(foreground, x+1, y-3, px+1, py, cb);
|
|
drawLine(foreground, x, y-4, px, py-1, cb);
|
|
|
|
// Tank
|
|
drawRect(foreground, x-4, y-3, 8, 1, cb);
|
|
drawRect(foreground, x-5, y-2, 10, 2, cb);
|
|
drawRect(foreground, x-4, y-0, 8, 1, cb);
|
|
drawRect(foreground, x-3, y+1, 6, 1, cb);
|
|
drawLine(foreground, x, y-3, px, py, c);
|
|
drawRect(foreground, x-4, y-2, 8, 2, c);
|
|
drawRect(foreground, x-3, y-0, 6, 1, c);
|
|
|
|
// Damage
|
|
const damage = clamp(0, 1 - energy/PLAYER_MAX_ENERGY, 1);
|
|
foreground.globalAlpha = damage * 0.7;
|
|
drawRect(foreground, x-4, y-2, 8, 2, cb);
|
|
foreground.globalAlpha = damage;
|
|
drawRect(foreground, x-3, y-0, 6, 1, cb);
|
|
foreground.globalAlpha = 1;
|
|
}
|
|
}
|
|
|
|
function drawTrajectories() {
|
|
traces.clearRect(0, 0, W, H);
|
|
for (let i=trajectories.length-1; i>=0; i--) {
|
|
const trajectory = trajectories[i];
|
|
const {x, y, c} = trajectory;
|
|
traces.globalAlpha = trajectory.a / 255;
|
|
plot(traces, x, y, c);
|
|
}
|
|
traces.globalAlpha = 1;
|
|
}
|
|
|
|
function fadeTrajectories() {
|
|
for (let i=trajectories.length-1; i>=0; i--) {
|
|
const trajectory = trajectories[i];
|
|
trajectory.a -= TRAJECTORY_FADE_SPEED;
|
|
trajectory.y -= TRAJECTORY_FLOAT_SPEED;
|
|
if (trajectory.a <= 0 || trajectory.y <= 0) {
|
|
trajectories.splice(i, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
function drawProjectile() {
|
|
if (!projectiles.length) return;
|
|
for (let projectile of projectiles) {
|
|
plot(foreground, clamp(0, projectile.x, W-1), clamp(0, projectile.y, H-1), 'white');
|
|
}
|
|
}
|
|
|
|
function drawExplosions() {
|
|
if (!explosions.length) return;
|
|
for (let explosion of explosions) {
|
|
const explosionType = EXPLOSION_TYPES[explosion.type];
|
|
explosionType.draw(explosion, foreground, terrain);
|
|
}
|
|
}
|
|
|
|
function drawParticles() {
|
|
for (let particle of particles) {
|
|
foreground.globalAlpha = clamp(0, particle.alpha / 255, 255);
|
|
plot(foreground, particle.x, particle.y, particle.c);
|
|
}
|
|
foreground.globalAlpha = 1;
|
|
}
|
|
|
|
function drawStartMenuPanel() {
|
|
drawPanelBg(framebuffer);
|
|
drawPanelTitle(framebuffer, 'RAVAGED PLANET');
|
|
|
|
const playerCounts = [2, 3, 4, 5, 6];
|
|
const roundCounts = [1, 3, 5, 10];
|
|
const terrains = ['Random', 'Mountain', 'Sand'];
|
|
|
|
const y = 100;
|
|
const labels = ['Players', 'Rounds', 'Terrain'];
|
|
const values = [
|
|
playerCounts[menuState.values[0]],
|
|
roundCounts[menuState.values[1]],
|
|
terrains[menuState.values[2]],
|
|
];
|
|
|
|
for (let i=0; i<labels.length; i++) {
|
|
const isSelected = menuState.selected === i;
|
|
const prefix = isSelected ? '> ' : ' ';
|
|
const color = isSelected ? 'yellow' : 'white';
|
|
drawPanelText(framebuffer, `${prefix}${labels[i]}: ${values[i]}`, 160, y + i * 30, color);
|
|
}
|
|
|
|
drawPanelDivider(framebuffer, 230);
|
|
drawPanelText(framebuffer, 'Press ENTER to start', 160, 250, 'white');
|
|
}
|
|
|
|
function drawMarketPanel() {
|
|
drawPanelBg(framebuffer);
|
|
drawPanelTitle(framebuffer, 'MARKET');
|
|
|
|
const humanPlayer = players.find(p => !p.ai);
|
|
drawPanelText(framebuffer, `Score: ${score}`, 160, 90, 'yellow');
|
|
|
|
const marketItems = Object.keys(MARKET_ITEMS);
|
|
const y = 110;
|
|
const maxVisible = 8;
|
|
|
|
for (let i=0; i<Math.min(maxVisible, marketItems.length); i++) {
|
|
const itemIndex = i + (menuState ? menuState.scrollOffset : 0);
|
|
if (itemIndex >= marketItems.length) break;
|
|
|
|
const item = marketItems[itemIndex];
|
|
const itemData = MARKET_ITEMS[item];
|
|
const isSelected = menuState && menuState.selected === itemIndex;
|
|
const prefix = isSelected ? '> ' : ' ';
|
|
const color = isSelected ? 'yellow' : 'white';
|
|
|
|
let ammoText = '';
|
|
if (humanPlayer) {
|
|
const weapon = humanPlayer.weapons.find(w => w.type === item);
|
|
if (weapon) {
|
|
ammoText = weapon.type === 'babyMissile' || weapon.type === 'tracer' ? '(owned)' : `(x${weapon.ammo})`;
|
|
} else {
|
|
ammoText = '(none)';
|
|
}
|
|
}
|
|
|
|
const priceText = itemData.price === 0 ? 'FREE' : `$${itemData.price}`;
|
|
drawPanelText(framebuffer, `${prefix}${item}: ${priceText} ${ammoText}`, 140, y + i * 20, color);
|
|
}
|
|
|
|
drawPanelDivider(framebuffer, 280);
|
|
drawPanelText(framebuffer, 'RIGHT: Buy LEFT: Sell ENTER: Start Round', 160, 290, 'white');
|
|
}
|
|
|
|
function drawRoundEndPanel() {
|
|
drawPanelBg(framebuffer);
|
|
|
|
if (winner) {
|
|
drawPanelTitle(framebuffer, `Round ${round} Complete!`);
|
|
drawPanelText(framebuffer, `Winner: ${winner.name}`, 160, 100, winner.c);
|
|
drawPanelText(framebuffer, `Kills: ${winner.kills}`, 160, 130, 'white');
|
|
drawPanelText(framebuffer, `Round Score: ${winner.kills * SCORE_PER_KILL + SCORE_FOR_WIN}`, 160, 160, 'white');
|
|
} else {
|
|
drawPanelTitle(framebuffer, `Round ${round} Complete!`);
|
|
drawPanelText(framebuffer, 'Nobody survived!', 160, 100, 'white');
|
|
}
|
|
|
|
drawPanelText(framebuffer, `Total Score: ${score}`, 160, 200, 'yellow');
|
|
|
|
drawPanelDivider(framebuffer, 240);
|
|
if (round < totalRounds) {
|
|
drawPanelText(framebuffer, 'Press ENTER for next round', 160, 260, 'white');
|
|
} else {
|
|
drawPanelText(framebuffer, 'Press ENTER for final results', 160, 260, 'white');
|
|
}
|
|
}
|
|
|
|
function drawGameOverPanel() {
|
|
drawPanelBg(framebuffer);
|
|
drawPanelTitle(framebuffer, 'GAME OVER');
|
|
|
|
const y = 80;
|
|
const sortedPlayers = [...players].sort((a, b) => b.wins - a.wins || b.kills - a.kills);
|
|
|
|
for (let i=0; i<sortedPlayers.length; i++) {
|
|
const p = sortedPlayers[i];
|
|
const text = `${p.name}: W:${p.wins} K:${p.kills} D:${p.deaths} S:${p.shotsFired}`;
|
|
const color = i === 0 ? 'yellow' : 'white';
|
|
drawPanelText(framebuffer, text, 160, y + i * 16, color);
|
|
}
|
|
|
|
drawPanelDivider(framebuffer, 280);
|
|
drawPanelText(framebuffer, 'Press ENTER to play again', 160, 290, 'white');
|
|
}
|
|
|
|
function drawScreenShake() {
|
|
const x = randomInt(-screenShake, screenShake);
|
|
const y = randomInt(-screenShake, screenShake);
|
|
framebuffer.canvas.style.transform = `translate(${x}px, ${y}px)`;
|
|
}
|
|
|
|
function drawStatus() {
|
|
if (state === 'start-menu' || state === 'market' || state === 'round-end' || state === 'game-over') {
|
|
return;
|
|
}
|
|
|
|
const player = players[currentPlayer];
|
|
const {currentWeapon} = player;
|
|
const weapon = player.weapons[currentWeapon];
|
|
const weaponType = WEAPON_TYPES[weapon.type];
|
|
drawText(foreground, `${player.name} NRG:${player.energy} AIM:${player.a} PWR:${player.p} SHD:${player.shield?player.shield.energy:0} ${clamp(0, weapon.ammo, 99)} ${weaponType.name}`, 8, 8, player.c, 'left');
|
|
drawText(foreground, `WIND: ${wind<=0?'<':''}${Math.abs(wind)}${wind>=0?'>':''}`, W-8, 8, 'white', 'right');
|
|
drawText(foreground, `Round: ${round}/${totalRounds} Score: ${score}`, W-8, 18, 'white', 'right');
|
|
}
|
|
|
|
loop(() => {
|
|
update();
|
|
draw();
|
|
});
|