Simplify death screen restart and add biome parallax visuals

This commit is contained in:
OpenClaw Engineer 2026-03-05 06:55:38 -06:00
parent e106d8ea65
commit 85e2bbb48b
3 changed files with 44 additions and 19 deletions

View File

@ -52,11 +52,7 @@
<input id="playerName" maxlength="20" required /> <input id="playerName" maxlength="20" required />
<button type="submit">Save Score</button> <button type="submit">Save Score</button>
</form> </form>
<div class="play-again-row"> <button id="restartBtn">Restart</button>
<button id="restartBtn">Play Again</button>
<button id="restartVipBtn" type="button">Play Again (VIP)</button>
<button id="restartVipPlusBtn" type="button">Play Again (VIP+)</button>
</div>
</div> </div>
</div> </div>

View File

@ -8,8 +8,6 @@ const leaderboardEl = document.getElementById('leaderboard');
const saveScoreFormEl = document.getElementById('saveScoreForm'); const saveScoreFormEl = document.getElementById('saveScoreForm');
const playerNameEl = document.getElementById('playerName'); const playerNameEl = document.getElementById('playerName');
const restartBtnEl = document.getElementById('restartBtn'); const restartBtnEl = document.getElementById('restartBtn');
const restartVipBtnEl = document.getElementById('restartVipBtn');
const restartVipPlusBtnEl = document.getElementById('restartVipPlusBtn');
const startScreenEl = document.getElementById('startScreen'); const startScreenEl = document.getElementById('startScreen');
const startFormEl = document.getElementById('startForm'); const startFormEl = document.getElementById('startForm');
@ -241,8 +239,7 @@ startFormEl.addEventListener('submit', (e) => {
startErrorEl.textContent = ''; startErrorEl.textContent = '';
}); });
function restartRun(accessModeOverride = null) { function restartToStartScreen() {
if (accessModeOverride) gameConfig.accessMode = accessModeOverride;
state = createInitialState(gameConfig); state = createInitialState(gameConfig);
keys.clear(); keys.clear();
deathScreenEl.classList.add('hidden'); deathScreenEl.classList.add('hidden');
@ -250,12 +247,16 @@ function restartRun(accessModeOverride = null) {
saveEligible = false; saveEligible = false;
scoreSavedThisRun = false; scoreSavedThisRun = false;
setSaveFormBusy(false); setSaveFormBusy(false);
state.running = true; state.running = false;
state.dead = false;
accessModeEl.value = gameConfig.accessMode;
difficultyEl.value = gameConfig.difficulty;
passwordEl.value = '';
startErrorEl.textContent = '';
startScreenEl.classList.remove('hidden');
} }
restartBtnEl.addEventListener('click', () => restartRun()); restartBtnEl.addEventListener('click', restartToStartScreen);
restartVipBtnEl.addEventListener('click', () => restartRun('vip'));
restartVipPlusBtnEl.addEventListener('click', () => restartRun('vipPlus'));
saveScoreFormEl.addEventListener('submit', async (e) => { saveScoreFormEl.addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
@ -282,12 +283,45 @@ saveScoreFormEl.addEventListener('submit', async (e) => {
} }
}); });
function drawBiomeParallax(biome) {
const farOffset = -(state.cameraX * 0.15);
const midOffset = -(state.cameraX * 0.35);
if (biome.name === 'Plains') {
ctx.fillStyle = 'rgba(255,255,255,0.7)';
for (let i = -1; i < 6; i++) ctx.fillRect(((i * 220 + farOffset) % 1300), 70 + (i % 2) * 18, 120, 22);
ctx.fillStyle = 'rgba(72,140,72,0.55)';
for (let i = -1; i < 8; i++) ctx.fillRect(((i * 170 + midOffset) % 1500), groundY - 90, 90, 90);
} else if (biome.name === 'Desert') {
ctx.fillStyle = 'rgba(232,187,120,0.55)';
for (let i = -1; i < 7; i++) ctx.fillRect(((i * 190 + farOffset) % 1500), groundY - 120, 160, 120);
ctx.fillStyle = 'rgba(180,135,70,0.6)';
for (let i = -1; i < 10; i++) ctx.fillRect(((i * 140 + midOffset) % 1600), groundY - 70, 26, 70);
} else if (biome.name === 'Jungle') {
ctx.fillStyle = 'rgba(40,106,50,0.45)';
for (let i = -1; i < 9; i++) ctx.fillRect(((i * 150 + farOffset) % 1600), groundY - 170, 80, 170);
ctx.fillStyle = 'rgba(27,78,38,0.62)';
for (let i = -1; i < 12; i++) ctx.fillRect(((i * 118 + midOffset) % 1700), groundY - 115, 40, 115);
} else if (biome.name === 'Snow') {
ctx.fillStyle = 'rgba(255,255,255,0.75)';
for (let i = -1; i < 8; i++) ctx.fillRect(((i * 180 + farOffset) % 1600), groundY - 145, 140, 145);
ctx.fillStyle = 'rgba(196,220,242,0.7)';
for (let i = -1; i < 10; i++) ctx.fillRect(((i * 140 + midOffset) % 1700), groundY - 92, 95, 92);
} else if (biome.name === 'Lava') {
ctx.fillStyle = 'rgba(98,58,54,0.7)';
for (let i = -1; i < 8; i++) ctx.fillRect(((i * 185 + farOffset) % 1600), groundY - 150, 150, 150);
ctx.fillStyle = 'rgba(255,128,40,0.45)';
for (let i = -1; i < 14; i++) ctx.fillRect(((i * 112 + midOffset) % 1800), groundY - 85, 18, 85);
}
}
function drawBackground() { function drawBackground() {
const camCenter = state.cameraX + canvas.width / 2; const camCenter = state.cameraX + canvas.width / 2;
const biome = getBiomeAt(camCenter); const biome = getBiomeAt(camCenter);
ctx.fillStyle = biome.sky; ctx.fillStyle = biome.sky;
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
drawBiomeParallax(biome);
ctx.fillStyle = biome.ground; ctx.fillStyle = biome.ground;
ctx.fillRect(0, groundY, canvas.width, canvas.height - groundY); ctx.fillRect(0, groundY, canvas.width, canvas.height - groundY);

View File

@ -67,12 +67,7 @@ label {
} }
ol { padding-left: 22px; } ol { padding-left: 22px; }
.play-again-row { /* removed unused play-again-row styles */
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 10px;
}
.heart { .heart {
display: inline-block; display: inline-block;