lawsonwhit/DinoLand
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify death screen restart and add biome parallax visuals

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.php
View File

@ -52,11 +52,7 @@
<input id="playerName" maxlength="20" required />
<button type="submit">Save Score</button>
</form>
<div class="play-again-row">
<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>
<button id="restartBtn">Restart</button>
</div>
</div>

50
js/game.js
View File

@ -8,8 +8,6 @@ const leaderboardEl = document.getElementById('leaderboard');
const saveScoreFormEl = document.getElementById('saveScoreForm');
const playerNameEl = document.getElementById('playerName');
const restartBtnEl = document.getElementById('restartBtn');
const restartVipBtnEl = document.getElementById('restartVipBtn');
const restartVipPlusBtnEl = document.getElementById('restartVipPlusBtn');
const startScreenEl = document.getElementById('startScreen');
const startFormEl = document.getElementById('startForm');
@ -241,8 +239,7 @@ startFormEl.addEventListener('submit', (e) => {
startErrorEl.textContent = '';
});
function restartRun(accessModeOverride = null) {
if (accessModeOverride) gameConfig.accessMode = accessModeOverride;
function restartToStartScreen() {
state = createInitialState(gameConfig);
keys.clear();
deathScreenEl.classList.add('hidden');
@ -250,12 +247,16 @@ function restartRun(accessModeOverride = null) {
saveEligible = false;
scoreSavedThisRun = 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());
restartVipBtnEl.addEventListener('click', () => restartRun('vip'));
restartVipPlusBtnEl.addEventListener('click', () => restartRun('vipPlus'));
restartBtnEl.addEventListener('click', restartToStartScreen);
saveScoreFormEl.addEventListener('submit', async (e) => {
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() {
const camCenter = state.cameraX + canvas.width / 2;
const biome = getBiomeAt(camCenter);
ctx.fillStyle = biome.sky;
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawBiomeParallax(biome);
ctx.fillStyle = biome.ground;
ctx.fillRect(0, groundY, canvas.width, canvas.height - groundY);

7
styles.css
View File

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