diff --git a/index.html b/index.html index 2693f28..60bf297 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,6 @@ - + diff --git a/src/ai.js b/src/ai.js index 0b8d76c..7a477ae 100644 --- a/src/ai.js +++ b/src/ai.js @@ -1,5 +1,5 @@ -import {PLAYER_MAX_ENERGY, PLAYER_INITIAL_POWER, PLAYER_ENERGY_POWER_MULTIPLIER} from './constants.js?v=20'; -import {randomInt} from './math.js?v=20'; +import {PLAYER_MAX_ENERGY, PLAYER_INITIAL_POWER, PLAYER_ENERGY_POWER_MULTIPLIER} from './constants.js?v=21'; +import {randomInt} from './math.js?v=21'; export const AI_TYPES = { diff --git a/src/gfx.js b/src/gfx.js index 25ab054..a6dbeaf 100644 --- a/src/gfx.js +++ b/src/gfx.js @@ -1,6 +1,6 @@ -import {splitWords} from './utils.js?v=20'; -import {parable} from './math.js?v=20'; -import {FONT_HEIGHT, FONT_WIDTH} from './constants.js?v=20'; +import {splitWords} from './utils.js?v=21'; +import {parable} from './math.js?v=21'; +import {FONT_HEIGHT, FONT_WIDTH} from './constants.js?v=21'; export function createCanvas(width, height, readable) { const canvas = document.createElement('canvas'); diff --git a/src/input.js b/src/input.js index 9df6191..03e1052 100644 --- a/src/input.js +++ b/src/input.js @@ -1,4 +1,4 @@ -import {DEFAULT_KEYPRESS_DELAY, Z} from './constants.js?v=20'; +import {DEFAULT_KEYPRESS_DELAY, Z} from './constants.js?v=21'; const input = {}; let lastKeypressTime = 0; diff --git a/src/main.js b/src/main.js index 59b1106..1bf27e3 100644 --- a/src/main.js +++ b/src/main.js @@ -1,17 +1,17 @@ -import {AI_TYPES} from './ai.js?v=20'; -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, NAPALM_SPAWN_RATE, FIRE_DURATION, FIRE_DAMAGE} from './constants.js?v=20'; -import {createCanvas, drawLine, drawRect, drawSemiCircle, drawText, loop, plot, strokeCircle} from './gfx.js?v=20'; -import {afterKeyDelay, key, initClickCanvas, popClick, getPointer} from './input.js?v=20'; -import {clamp, deg2rad, distance, parable, random, randomInt, vec, wrap} from './math.js?v=20'; -import {PROJECTILE_TYPES} from './projectiles.js?v=20'; -import {generateSky} from './sky.js?v=20'; -import {playTickSound} from './sound.js?v=20'; -import {clipTerrain, closestLand, collapseTerrain, generateTerrain, isTerrain, landHeight, startCollapseTerrain, collapseTerrainStep} from './terrain.js?v=20'; -import {sample, shuffle, newPlayerId} from './utils.js?v=20'; -import {EXPLOSION_TYPES} from './weapons.js?v=20'; -import {drawPanelBg, drawPanelTitle, drawPanelTitleFancy, drawPanelText, drawPanelDivider, drawPanelMenu, getPanelBounds, drawButton, checkHit, PANEL_X, PANEL_WIDTH} from './panel.js?v=20'; -import {MSG, CMD, HOST_MSG} from './net/protocol.js?v=20'; -import {netBroadcast, netConnect, netDisconnect, netIsConnected, netIsHost, netMakeRoomCode, netMyId, netOnMessage, netOnStatus, netRoom, netSendCommand} from './net.js?v=20'; +import {AI_TYPES} from './ai.js?v=21'; +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, NAPALM_SPAWN_RATE, FIRE_DURATION, FIRE_DAMAGE} from './constants.js?v=21'; +import {createCanvas, drawLine, drawRect, drawSemiCircle, drawText, loop, plot, strokeCircle} from './gfx.js?v=21'; +import {afterKeyDelay, key, initClickCanvas, popClick, getPointer} from './input.js?v=21'; +import {clamp, deg2rad, distance, parable, random, randomInt, vec, wrap} from './math.js?v=21'; +import {PROJECTILE_TYPES} from './projectiles.js?v=21'; +import {generateSky} from './sky.js?v=21'; +import {playTickSound} from './sound.js?v=21'; +import {clipTerrain, closestLand, collapseTerrain, generateTerrain, isTerrain, landHeight, startCollapseTerrain, collapseTerrainStep} from './terrain.js?v=21'; +import {sample, shuffle, newPlayerId} from './utils.js?v=21'; +import {EXPLOSION_TYPES} from './weapons.js?v=21'; +import {drawPanelBg, drawPanelTitle, drawPanelTitleFancy, drawPanelText, drawPanelDivider, drawPanelMenu, getPanelBounds, drawButton, checkHit, PANEL_X, PANEL_WIDTH} from './panel.js?v=21'; +import {MSG, CMD, HOST_MSG} from './net/protocol.js?v=21'; +import {netBroadcast, netConnect, netDisconnect, netIsConnected, netIsHost, netMakeRoomCode, netMyId, netOnMessage, netOnStatus, netRoom, netSendCommand} from './net.js?v=21'; let state = 'start-game'; @@ -146,7 +146,7 @@ function commitStartMenu() { menuState = null; netError = null; if (multiplayer) { - netMenuState = {phase: 'setup'}; + netMenuState = {phase: 'setup', selected: 0}; state = 'net-menu'; return; } @@ -157,7 +157,7 @@ function commitStartMenu() { function updateStartMenu() { const options = ['Players', 'Rounds', 'Terrain', 'Permanent tracer mode', 'Mode']; - const optionValues = [[3,4,5,6,7,8,9,10], [1,2,3,4,5,6,7,8,9,10], ['Random','Mountain','Sand'], ['On','Off'], ['Single','Multiplayer']]; + const optionValues = [[3,4,5,6,7,8,9,10], [1,2,3,4,5,6,7,8,9,10], ['Random','Mountain','Sand'], ['On','Off'], ['Single','Multi']]; if (!menuState) { menuState = { @@ -859,18 +859,14 @@ function updateNetMenu() { } return; } - const click = popClick(); - if (!click) return; - const hostBtn = checkHit(click.x, click.y, PANEL_X+100, 140, 200, 22); - const joinBtn = checkHit(click.x, click.y, PANEL_X+100, 170, 200, 22); - const backBtn = checkHit(click.x, click.y, PANEL_X+100, 200, 200, 22); - if (backBtn) { - state = 'start-menu'; - netMenuState = null; - netError = null; - return; - } - if (hostBtn || joinBtn) { + const activate = (i) => { + if (i === 2) { + state = 'start-menu'; + netMenuState = null; + netError = null; + return; + } + const hostBtn = i === 0; let name = s.name; if (!name) { name = prompt('Your name:') || ''; @@ -904,6 +900,38 @@ function updateNetMenu() { s.phase = 'setup'; netError = 'connection failed'; }); + }; + + if (key('ArrowUp')) { + if (afterKeyDelay()) { + s.selected = (s.selected - 1 + 3) % 3; + playTickSound(); + } + } else if (key('ArrowDown')) { + if (afterKeyDelay()) { + s.selected = (s.selected + 1) % 3; + playTickSound(); + } + } else if (key('Enter')) { + if (afterKeyDelay()) { + activate(s.selected); + } + } + + const click = popClick(); + if (!click) return; + const buttons = [ + [PANEL_X+100, 140], + [PANEL_X+100, 170], + [PANEL_X+100, 200], + ]; + for (let i = 0; i < buttons.length; i++) { + if (checkHit(click.x, click.y, buttons[i][0], buttons[i][1], 200, 22)) { + s.selected = i; + playTickSound(); + activate(i); + return; + } } } @@ -2108,14 +2136,14 @@ function drawNetMenuPanel() { const s = netMenuState; drawPanelText(framebuffer, 'Play against other players', PANEL_X+40, 100, '#aaa'); - if (s && s.phase === 'connecting') { + if (!s || s.phase === 'connecting') { drawPanelText(framebuffer, 'CONNECTING...', PANEL_X+40, 140, 'yellow'); return; } - drawButton(framebuffer, PANEL_X+100, 140, 200, 22, 'HOST GAME', false); - drawButton(framebuffer, PANEL_X+100, 170, 200, 22, 'JOIN GAME', false); - drawButton(framebuffer, PANEL_X+100, 200, 200, 22, 'BACK', false); + drawButton(framebuffer, PANEL_X+100, 140, 200, 22, 'HOST GAME', s.selected === 0); + drawButton(framebuffer, PANEL_X+100, 170, 200, 22, 'JOIN GAME', s.selected === 1); + drawButton(framebuffer, PANEL_X+100, 200, 200, 22, 'BACK', s.selected === 2); if (netError) { drawPanelText(framebuffer, netError, PANEL_X+40, 240, '#f66'); } @@ -2172,7 +2200,7 @@ function drawStartMenuPanel() { drawPanelBg(framebuffer); drawPanelTitleFancy(framebuffer, 'RAVAGED PLANET', performance.now() / 1000); - const optionValues = [[3,4,5,6,7,8,9,10], [1,2,3,4,5,6,7,8,9,10], ['Random','Mountain','Sand'], ['On','Off'], ['Single','Multiplayer']]; + const optionValues = [[3,4,5,6,7,8,9,10], [1,2,3,4,5,6,7,8,9,10], ['Random','Mountain','Sand'], ['On','Off'], ['Single','Multi']]; const labels = ['Players', 'Rounds', 'Terrain', 'Permanent tracer mode', 'Mode']; const y = 120; const labelW = 168; diff --git a/src/net.js b/src/net.js index 360598b..1accfdb 100644 --- a/src/net.js +++ b/src/net.js @@ -1,4 +1,4 @@ -import {MSG, HOST_MSG} from './net/protocol.js?v=20'; +import {MSG, HOST_MSG} from './net/protocol.js?v=21'; let socket = null; let myId = null; diff --git a/src/panel.js b/src/panel.js index d931108..cd8bb04 100644 --- a/src/panel.js +++ b/src/panel.js @@ -1,5 +1,5 @@ -import {PANEL_WIDTH, PANEL_HEIGHT, PANEL_FONT_SIZE, PANEL_TITLE_FONT_SIZE, PANEL_BG_COLOR, PANEL_BORDER_COLOR, W, H, FONT_WIDTH} from './constants.js?v=20'; -import {drawRect, drawLine} from './gfx.js?v=20'; +import {PANEL_WIDTH, PANEL_HEIGHT, PANEL_FONT_SIZE, PANEL_TITLE_FONT_SIZE, PANEL_BG_COLOR, PANEL_BORDER_COLOR, W, H, FONT_WIDTH} from './constants.js?v=21'; +import {drawRect, drawLine} from './gfx.js?v=21'; export const PANEL_X = (W - PANEL_WIDTH) / 2; export {PANEL_WIDTH}; diff --git a/src/projectiles.js b/src/projectiles.js index b4588b8..f18bdef 100644 --- a/src/projectiles.js +++ b/src/projectiles.js @@ -1,10 +1,10 @@ -import {H, PROJECTILE_ITERATIONS_PER_FRAME, PROJECTILE_ITERATION_PROGRESS, PROJECTILE_MAX_SOUND_FREQUENCY, PROJECTILE_MIN_SOUND_FREQUENCY, PROJECTILE_POWER_REDUCTION_FACTOR, PROJECTILE_WIND_REDUCTION_FACTOR, WEAPON_TYPES, PLAYER_TANK_Y_FOOTPRINT} from './constants.js?v=20'; -import {checkLineWith, drawLineVirtual} from './gfx.js?v=20'; -import {createParticles, isTank, isTankShield, spawnNapalm, tracerMode} from './main.js?v=20'; -import {deg2rad, parable, rad2deg, wrap} from './math.js?v=20'; -import {audio, createOsc} from './sound.js?v=20'; -import {isTerrain, landHeight} from './terrain.js?v=20'; -import {EXPLOSION_TYPES} from './weapons.js?v=20'; +import {H, PROJECTILE_ITERATIONS_PER_FRAME, PROJECTILE_ITERATION_PROGRESS, PROJECTILE_MAX_SOUND_FREQUENCY, PROJECTILE_MIN_SOUND_FREQUENCY, PROJECTILE_POWER_REDUCTION_FACTOR, PROJECTILE_WIND_REDUCTION_FACTOR, WEAPON_TYPES, PLAYER_TANK_Y_FOOTPRINT} from './constants.js?v=21'; +import {checkLineWith, drawLineVirtual} from './gfx.js?v=21'; +import {createParticles, isTank, isTankShield, spawnNapalm, tracerMode} from './main.js?v=21'; +import {deg2rad, parable, rad2deg, wrap} from './math.js?v=21'; +import {audio, createOsc} from './sound.js?v=21'; +import {isTerrain, landHeight} from './terrain.js?v=21'; +import {EXPLOSION_TYPES} from './weapons.js?v=21'; export const PROJECTILE_TYPES = { diff --git a/src/sky.js b/src/sky.js index 8e2044d..f27fc50 100644 --- a/src/sky.js +++ b/src/sky.js @@ -1,7 +1,7 @@ -import {SKY_COLORS} from './constants.js?v=20'; -import {drawRect} from './gfx.js?v=20'; -import {gradient} from './math.js?v=20'; -import {sample} from './utils.js?v=20'; +import {SKY_COLORS} from './constants.js?v=21'; +import {drawRect} from './gfx.js?v=21'; +import {gradient} from './math.js?v=21'; +import {sample} from './utils.js?v=21'; export function generateSky(ctx) { const {width, height} = ctx.canvas; diff --git a/src/sound.js b/src/sound.js index 70096ff..bb7b84b 100644 --- a/src/sound.js +++ b/src/sound.js @@ -1,4 +1,4 @@ -import {SOUND_MUSIC_VOLUME, SOUND_SFX_VOLUME} from './constants.js?v=20'; +import {SOUND_MUSIC_VOLUME, SOUND_SFX_VOLUME} from './constants.js?v=21'; // @ts-ignore export const audio = new (window.AudioContext || window.webkitAudioContext)(); diff --git a/src/terrain.js b/src/terrain.js index 4ef9237..5f9be2d 100644 --- a/src/terrain.js +++ b/src/terrain.js @@ -1,6 +1,6 @@ -import {clipCanvas, drawCircle, drawRect} from './gfx.js?v=20'; -import {clamp, coords2index, random, randomInt} from './math.js?v=20'; -import {sample} from './utils.js?v=20'; +import {clipCanvas, drawCircle, drawRect} from './gfx.js?v=21'; +import {clamp, coords2index, random, randomInt} from './math.js?v=21'; +import {sample} from './utils.js?v=21'; let cachedImageData; diff --git a/src/utils.js b/src/utils.js index 92cad12..43559b0 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,4 +1,4 @@ -import {randomInt} from './math.js?v=20'; +import {randomInt} from './math.js?v=21'; export function sample(arr) { return arr[randomInt(0, arr.length-1)]; diff --git a/src/weapons.js b/src/weapons.js index 0791714..ba0f4be 100644 --- a/src/weapons.js +++ b/src/weapons.js @@ -1,8 +1,8 @@ -import {PLAYER_TANK_BOUNDING_RADIUS, PLAYER_TANK_Y_FOOTPRINT, SHIELD_TYPES} from './constants.js?v=20'; -import {drawCircle, plot} from './gfx.js?v=20'; -import {clamp, cycle, distance, randomInt} from './math.js?v=20'; -import {audio, createOsc} from './sound.js?v=20'; -import {clipTerrain} from './terrain.js?v=20'; +import {PLAYER_TANK_BOUNDING_RADIUS, PLAYER_TANK_Y_FOOTPRINT, SHIELD_TYPES} from './constants.js?v=21'; +import {drawCircle, plot} from './gfx.js?v=21'; +import {clamp, cycle, distance, randomInt} from './math.js?v=21'; +import {audio, createOsc} from './sound.js?v=21'; +import {clipTerrain} from './terrain.js?v=21'; export function drawExplosion(ctx, x, y, r) { const step = Math.max(2, Math.floor(r / 6));