mirror of
https://codeberg.org/ashley/poke
synced 2025-05-28 18:19:43 +00:00
Update html/gamehub.ejs
This commit is contained in:
ashley
parent
495367eace
commit
c9bd527527
415
html/gamehub.ejs
415
html/gamehub.ejs
@ -246,108 +246,89 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
background: #000;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
color: #0f0;
|
||||
margin: 0; padding: 0; background: #000;
|
||||
font-family: 'Press Start 2P', monospace; color: #0f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
#game-container { position: relative; width: 100vw; height: 100vh; }
|
||||
/* Canvas */
|
||||
#game-container { position: relative; width:100vw; height:100vh; }
|
||||
#snakeCanvas {
|
||||
background: #111;
|
||||
display: block;
|
||||
margin: auto;
|
||||
image-rendering: pixelated;
|
||||
border: 4px solid #0f0;
|
||||
box-shadow: 0 0 20px #0f0;
|
||||
background: #111; display: block; margin: auto;
|
||||
image-rendering: pixelated; border:4px solid #0f0;
|
||||
box-shadow:0 0 20px #0f0;
|
||||
}
|
||||
/* Overlay Grid */
|
||||
#overlay { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;
|
||||
background: repeating-linear-gradient(transparent 0 2px, rgba(0,255,0,0.1) 2px 3px),
|
||||
repeating-linear-gradient(90deg, transparent 0 2px, rgba(0,255,0,0.1) 2px 3px);
|
||||
#overlay {
|
||||
position:absolute; top:0; left:0; width:100%; height:100%;
|
||||
pointer-events:none;
|
||||
background:
|
||||
repeating-linear-gradient(transparent 0 2px, rgba(0,255,0,0.1) 2px 3px),
|
||||
repeating-linear-gradient(90deg, transparent 0 2px, rgba(0,255,0,0.1) 2px 3px);
|
||||
}
|
||||
/* Title & GameOver Screens */
|
||||
.screen {
|
||||
position:absolute; top:0; left:0; width:100%; height:100%;
|
||||
background: rgba(0,0,0,0.8); display:flex;
|
||||
flex-direction:column; align-items:center; justify-content:center;
|
||||
z-index:100;
|
||||
text-align:center;
|
||||
background:rgba(0,0,0,0.8);
|
||||
display:flex; flex-direction:column; align-items:center;
|
||||
justify-content:center; z-index:100; text-align:center; color:#0f0;
|
||||
}
|
||||
.hidden { display: none; }
|
||||
.screen h1 {
|
||||
font-size: 48px;
|
||||
margin: 0 0 16px;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 0 10px #0f0;
|
||||
}
|
||||
.screen p { font-size: 14px; margin: 4px 0; }
|
||||
.hidden { display:none; }
|
||||
.screen h1 { font-size:48px; margin:0 0 16px;
|
||||
white-space:nowrap; text-shadow:0 0 10px #0f0; }
|
||||
.screen p { font-size:14px; margin:4px 0; }
|
||||
.screen button {
|
||||
margin-top: 12px;
|
||||
background: #0f0;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
cursor: pointer;
|
||||
margin-top:12px; background:#0f0; color:#000;
|
||||
border:none; padding:8px 16px; cursor:pointer;
|
||||
}
|
||||
/* Scoreboard */
|
||||
#scoreboard {
|
||||
position:absolute; top:16px; left:16px;
|
||||
z-index:50;
|
||||
white-space: nowrap;
|
||||
text-shadow:0 0 5px #0f0;
|
||||
position:absolute; top:16px; left:16px; z-index:50;
|
||||
white-space:nowrap; text-shadow:0 0 5px #0f0;
|
||||
}
|
||||
/* Settings Cog */
|
||||
#settingsBtn {
|
||||
position:absolute; top:16px; right:16px;
|
||||
font-size:24px;
|
||||
cursor:pointer;
|
||||
z-index:50;
|
||||
user-select:none;
|
||||
position:absolute; top:16px; right:16px; font-size:24px;
|
||||
cursor:pointer; z-index:50; user-select:none;
|
||||
}
|
||||
/* Settings Modal */
|
||||
#settingsModal {
|
||||
position:absolute; top:50%; left:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
background:#222; border:2px solid #0f0;
|
||||
padding:16px; display:none; z-index:200;
|
||||
width:auto;
|
||||
height:auto;
|
||||
padding:16px; display:none; z-index:200; width:auto;height:auto;
|
||||
}
|
||||
#settingsModal h2 { margin-top:0; text-align:center; }
|
||||
#settingsModal .section { margin-bottom:12px; }
|
||||
#settingsModal label { display:block; font-size:12px; margin:6px 0; }
|
||||
#settingsModal input[type="number"],
|
||||
#settingsModal input[type="range"],
|
||||
#settingsModal select {
|
||||
width:100%; margin-top:4px;
|
||||
background:#000; color:#0f0;
|
||||
border:1px solid #0f0; font-family:inherit; font-size:12px;
|
||||
padding:4px;
|
||||
#settingsModal label {
|
||||
display:block; font-size:12px; margin:6px 0; color:#0f0;
|
||||
}
|
||||
#settingsModal input, #settingsModal select {
|
||||
width:100%; margin-top:4px;
|
||||
background:#000; color:#0f0; border:1px solid #0f0;
|
||||
font-family:inherit; font-size:12px; padding:4px;
|
||||
}
|
||||
#settingsModal button {
|
||||
margin:8px 4px 0 0; background:#0f0; color:#000;
|
||||
border:none; padding:6px 12px; cursor:pointer;
|
||||
}
|
||||
/* DEBUG MENU */
|
||||
#debugMenu {
|
||||
position:absolute; top:48px; left:16px;
|
||||
color:#fff;
|
||||
font-size:12px; line-height:1.2;
|
||||
white-space:pre; z-index:300; display:none;
|
||||
}
|
||||
#settingsModal button { margin:8px 4px 0 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game-container">
|
||||
<div id="titleScreen" class="screen">
|
||||
<div id="titleScreen" class="screen">
|
||||
<h1>POKE SNAKE</h1>
|
||||
<p>Press Any Key to Start</p>
|
||||
</div>
|
||||
<div id="scoreboard">Score: 0 High: 0 Level: 1</div>
|
||||
<div id="scoreboard">Score: 0 High: 0 Level: 1</div>
|
||||
<div id="settingsBtn">⚙️</div>
|
||||
<canvas id="snakeCanvas"></canvas>
|
||||
<canvas id="snakeCanvas"></canvas>
|
||||
<div id="overlay"></div>
|
||||
|
||||
<!-- Game Over Screen -->
|
||||
<div id="gameOverScreen" class="screen hidden">
|
||||
<h1 id="gameOverText">GAME OVER!</h1>
|
||||
<p>Press R to Retry</p>
|
||||
<button id="backToTitle">Back to Title</button>
|
||||
</div>
|
||||
<!-- Settings Modal -->
|
||||
<div id="settingsModal">
|
||||
<h2>Settings</h2>
|
||||
<div class="section">
|
||||
@ -394,188 +375,252 @@
|
||||
<input type="color" id="paramBodyColor" value="#00ffff">
|
||||
</label>
|
||||
</div>
|
||||
<div class="section">
|
||||
<p style="font-size:10px; text-align:center; color:#0f0;">
|
||||
Press D to toggle Debug
|
||||
</p>
|
||||
</div>
|
||||
<button id="saveSettings">Save</button>
|
||||
<button id="closeSettings">Close</button>
|
||||
</div>
|
||||
<div id="debugMenu"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Elements
|
||||
const canvas = document.getElementById('snakeCanvas'), ctx = canvas.getContext('2d');
|
||||
const titleScreen = document.getElementById('titleScreen');
|
||||
const gameOverScreen = document.getElementById('gameOverScreen');
|
||||
const gameOverText = document.getElementById('gameOverText');
|
||||
const scoreboard = document.getElementById('scoreboard');
|
||||
const settingsBtn = document.getElementById('settingsBtn');
|
||||
const settingsModal = document.getElementById('settingsModal');
|
||||
const saveBtn = document.getElementById('saveSettings');
|
||||
const closeBtn = document.getElementById('closeSettings');
|
||||
const backToTitle = document.getElementById('backToTitle');
|
||||
const canvas = document.getElementById('snakeCanvas'),
|
||||
ctx = canvas.getContext('2d'),
|
||||
titleScreen = document.getElementById('titleScreen'),
|
||||
gameOverScreen = document.getElementById('gameOverScreen'),
|
||||
gameOverText = document.getElementById('gameOverText'),
|
||||
scoreboard = document.getElementById('scoreboard'),
|
||||
settingsBtn = document.getElementById('settingsBtn'),
|
||||
settingsModal = document.getElementById('settingsModal'),
|
||||
saveBtn = document.getElementById('saveSettings'),
|
||||
closeBtn = document.getElementById('closeSettings'),
|
||||
backToTitle = document.getElementById('backToTitle'),
|
||||
debugMenu = document.getElementById('debugMenu');
|
||||
|
||||
// Params
|
||||
let params = {
|
||||
speed: 100,
|
||||
sfx: true,
|
||||
startLength: 1,
|
||||
wallMode: 'kill',
|
||||
grid: false,
|
||||
sfxVolume: 1,
|
||||
headColor: '#ffff00',
|
||||
bodyColor: '#00ffff'
|
||||
speed:100, sfx:true, startLength:1,
|
||||
wallMode:'kill', grid:false,
|
||||
sfxVolume:1,
|
||||
headColor:'#ffff00', bodyColor:'#00ffff'
|
||||
};
|
||||
|
||||
// Game state
|
||||
let snake, dir, food, score, highScore = 0, level, gameInterval;
|
||||
let state = 'start'; // 'start', 'playing', 'gameover'
|
||||
const endMessages = [
|
||||
"Skill issue!", "Snake bit ya!", "Sssorry, try again!",
|
||||
];
|
||||
let snake, dir, food, score, highScore=0, level, gameInterval;
|
||||
let state='start', startTime=0;
|
||||
const endMessages=["Skill issue!","Snake bit ya!","Sssorry, try again!"];
|
||||
let fps=0, frameCount=0, lastFpsTime=Date.now();
|
||||
let movesCount=0, framesSinceFood=0;
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = Math.floor(window.innerWidth / 20) * 20;
|
||||
canvas.height = Math.floor(window.innerHeight / 20) * 20;
|
||||
canvas.width = Math.floor(window.innerWidth/20)*20;
|
||||
canvas.height= Math.floor(window.innerHeight/20)*20;
|
||||
}
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
resizeCanvas();
|
||||
|
||||
function initGame() {
|
||||
// snake init
|
||||
snake = [];
|
||||
for (let i = 0; i < params.startLength; i++) {
|
||||
snake.push({ x: 10, y: 10 + i });
|
||||
}
|
||||
dir = { x: 0, y: -1 };
|
||||
pickFood();
|
||||
score = 0;
|
||||
level = 1;
|
||||
updateScoreboard();
|
||||
// start loop
|
||||
clearInterval(gameInterval);
|
||||
gameInterval = setInterval(gameLoop, params.speed);
|
||||
function pickFood() {
|
||||
const cols=canvas.width/20, rows=canvas.height/20;
|
||||
food={ x:Math.floor(Math.random()*cols), y:Math.floor(Math.random()*rows) };
|
||||
framesSinceFood=0;
|
||||
}
|
||||
|
||||
function pickFood() {
|
||||
const cols = canvas.width / 20, rows = canvas.height / 20;
|
||||
food = { x: Math.floor(Math.random() * cols), y: Math.floor(Math.random() * rows) };
|
||||
function initGame() {
|
||||
snake=[]; for(let i=0;i<params.startLength;i++){
|
||||
snake.push({x:10,y:10+i});
|
||||
}
|
||||
dir={x:0,y:-1}; pickFood();
|
||||
score=0; level=1; movesCount=0; startTime=Date.now();
|
||||
updateScoreboard();
|
||||
clearInterval(gameInterval);
|
||||
gameInterval=setInterval(gameLoop, params.speed);
|
||||
}
|
||||
|
||||
function drawGrid() {
|
||||
if (!params.grid) return;
|
||||
ctx.strokeStyle = 'rgba(0,255,0,0.2)';
|
||||
for (let x = 0; x < canvas.width; x += 20) {
|
||||
if(!params.grid) return;
|
||||
ctx.strokeStyle='rgba(0,255,0,0.2)';
|
||||
for(let x=0;x<canvas.width;x+=20){
|
||||
ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,canvas.height); ctx.stroke();
|
||||
}
|
||||
for (let y = 0; y < canvas.height; y += 20) {
|
||||
for(let y=0;y<canvas.height;y+=20){
|
||||
ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(canvas.width,y); ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = '#111'; ctx.fillRect(0,0,canvas.width,canvas.height);
|
||||
function draw(){
|
||||
ctx.fillStyle='#111'; ctx.fillRect(0,0,canvas.width,canvas.height);
|
||||
drawGrid();
|
||||
// food
|
||||
ctx.fillStyle = '#f00'; ctx.fillRect(food.x*20, food.y*20, 20, 20);
|
||||
// snake
|
||||
snake.forEach((seg,i) => {
|
||||
ctx.fillStyle='#f00'; ctx.fillRect(food.x*20,food.y*20,20,20);
|
||||
snake.forEach((seg,i)=>{
|
||||
ctx.fillStyle = i===0 ? params.headColor : params.bodyColor;
|
||||
ctx.fillRect(seg.x*20, seg.y*20, 20, 20);
|
||||
ctx.fillRect(seg.x*20,seg.y*20,20,20);
|
||||
});
|
||||
}
|
||||
|
||||
function playBeep(freq, duration) {
|
||||
if (!params.sfx) return;
|
||||
const ac = new (window.AudioContext || window.webkitAudioContext)();
|
||||
const gain = ac.createGain();
|
||||
gain.gain.value = params.sfxVolume;
|
||||
const osc = ac.createOscillator();
|
||||
osc.frequency.value = freq;
|
||||
osc.connect(gain).connect(ac.destination);
|
||||
osc.start(); osc.stop(ac.currentTime + duration);
|
||||
function recordFrame(){
|
||||
const now=Date.now();
|
||||
frameCount++;
|
||||
framesSinceFood++;
|
||||
if(now-lastFpsTime>=1000){
|
||||
fps=frameCount; frameCount=0; lastFpsTime=now;
|
||||
}
|
||||
}
|
||||
|
||||
function update() {
|
||||
const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
|
||||
const cols = canvas.width / 20, rows = canvas.height / 20;
|
||||
// wall
|
||||
if (params.wallMode === 'wrap') {
|
||||
head.x = (head.x + cols) % cols;
|
||||
head.y = (head.y + rows) % rows;
|
||||
} else if (head.x < 0 || head.x >= cols || head.y < 0 || head.y >= rows) {
|
||||
function updateDebugMenu(){
|
||||
if(debugMenu.style.display!=='block') return;
|
||||
const head=snake[0], tail=snake[snake.length-1],
|
||||
cols=canvas.width/20, rows=canvas.height/20,
|
||||
cells=cols*rows,
|
||||
elapsedMs=Date.now()-startTime,
|
||||
elapsedS=Math.floor(elapsedMs/1000),
|
||||
avgRate=elapsedS>0?(score/elapsedS).toFixed(2):'N/A',
|
||||
frameTime = fps>0?(1000/fps).toFixed(1):'N/A',
|
||||
cores= navigator.hardwareConcurrency||'N/A',
|
||||
ua=navigator.userAgent,
|
||||
vis= document.visibilityState,
|
||||
focus = document.hasFocus(),
|
||||
heap = performance.memory
|
||||
? (performance.memory.usedJSHeapSize/1024/1024).toFixed(2)+'/'+
|
||||
(performance.memory.jsHeapSizeLimit/1024/1024).toFixed(2)+'MB'
|
||||
: 'N/A',
|
||||
diff = params.speed>=150?'Easy':params.speed>=100?'Normal':'Hard';
|
||||
|
||||
// color-coded FPS
|
||||
let fpsColor = fps>=8?'#0f0': fps>=4?'#ffa500':'#f00';
|
||||
|
||||
debugMenu.innerHTML =
|
||||
`Poke Snake 1.1.2 on ${diff} \n\n` +
|
||||
`<span style="color:${fpsColor}">FPS: ${fps}</span>\n` +
|
||||
`FrameTime: ${frameTime}ms\n` +
|
||||
`Head: ${head.x},${head.y}\n` +
|
||||
`Tail: ${tail.x},${tail.y}\n` +
|
||||
`Dir: ${dir.x},${dir.y}\n` +
|
||||
`DistToFood: ${Math.abs(head.x-food.x)+Math.abs(head.y-food.y)}\n` +
|
||||
`FramesSinceFood: ${framesSinceFood}\n` +
|
||||
`Moves: ${movesCount}\n` +
|
||||
`Moves/s: ${elapsedS>0?(movesCount/elapsedS).toFixed(2):'N/A'}\n` +
|
||||
`SnakeLen: ${snake.length}\n` +
|
||||
`Occupancy: ${(snake.length/cells*100).toFixed(1)}%\n` +
|
||||
`Cells: ${cells}\n` +
|
||||
`Canvas: ${cols}×${rows}\n` +
|
||||
`Time: ${elapsedS}s\n` +
|
||||
`AvgRate: ${avgRate} pts/s\n` +
|
||||
`Score: ${score}\n` +
|
||||
`Level: ${level}\n` +
|
||||
`HighScore: ${highScore}\n` +
|
||||
`Difficulty: ${diff}\n` +
|
||||
`Speed(ms): ${params.speed}\n` +
|
||||
`StartLen: ${params.startLength}\n` +
|
||||
`Wall: ${params.wallMode}\n` +
|
||||
`Grid: ${params.grid}\n` +
|
||||
`SFXVol: ${params.sfxVolume}\n` +
|
||||
`Heap: ${heap}\n` +
|
||||
`Cores: ${cores}\n` +
|
||||
`VisState: ${vis}\n` +
|
||||
`HasFocus: ${focus}\n` +
|
||||
`Resolution: ${window.innerWidth}×${window.innerHeight}\n` +
|
||||
`UA: ${ua}`;
|
||||
}
|
||||
|
||||
function update(){
|
||||
const head={x:snake[0].x+dir.x,y:snake[0].y+dir.y},
|
||||
cols=canvas.width/20, rows=canvas.height/20;
|
||||
if(params.wallMode==='wrap'){
|
||||
head.x=(head.x+cols)%cols; head.y=(head.y+rows)%rows;
|
||||
} else if(head.x<0||head.x>=cols||head.y<0||head.y>=rows){
|
||||
return endGame();
|
||||
}
|
||||
if(snake.some((s,i)=>i>0&&s.x===head.x&&s.y===head.y)){
|
||||
return endGame();
|
||||
}
|
||||
// self-collide
|
||||
if (snake.some((s,i) => i>0 && s.x===head.x && s.y===head.y)) return endGame();
|
||||
snake.unshift(head);
|
||||
if (head.x===food.x && head.y===food.y) {
|
||||
score++; if (score % 5 === 0) level++; updateScoreboard(); pickFood(); playBeep(440,0.1);
|
||||
movesCount++;
|
||||
if(head.x===food.x&&head.y===food.y){
|
||||
score++; if(score%5===0) level++;
|
||||
updateScoreboard(); pickFood();
|
||||
if(params.sfx) playBeep(440,0.1);
|
||||
} else snake.pop();
|
||||
}
|
||||
|
||||
function gameLoop() {
|
||||
update(); draw();
|
||||
function gameLoop(){
|
||||
update(); draw(); recordFrame(); updateDebugMenu();
|
||||
}
|
||||
|
||||
function endGame() {
|
||||
clearInterval(gameInterval);
|
||||
state = 'gameover';
|
||||
gameOverText.textContent = endMessages[Math.floor(Math.random()*endMessages.length)];
|
||||
function endGame(){
|
||||
clearInterval(gameInterval); state='gameover';
|
||||
gameOverText.textContent=endMessages[Math.floor(Math.random()*endMessages.length)];
|
||||
gameOverScreen.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function updateScoreboard() {
|
||||
highScore = Math.max(highScore, score);
|
||||
scoreboard.textContent = `Score: ${score} High: ${highScore} Level: ${level}`;
|
||||
function updateScoreboard(){
|
||||
highScore=Math.max(highScore,score);
|
||||
scoreboard.textContent=`Score: ${score} High: ${highScore} Level: ${level}`;
|
||||
}
|
||||
|
||||
// Event handlers
|
||||
document.addEventListener('keydown', e => {
|
||||
if (state === 'start') {
|
||||
titleScreen.classList.add('hidden');
|
||||
initGame(); state = 'playing';
|
||||
} else if (state === 'playing') {
|
||||
const M = { ArrowUp:[0,-1], ArrowDown:[0,1], ArrowLeft:[-1,0], ArrowRight:[1,0] };
|
||||
if (M[e.key] && (M[e.key][0]!==-dir.x || M[e.key][1]!==-dir.y)) dir = { x: M[e.key][0], y: M[e.key][1] };
|
||||
} else if (state === 'gameover') {
|
||||
if (e.key.toLowerCase() === 'r') {
|
||||
gameOverScreen.classList.add('hidden'); titleScreen.classList.remove('hidden'); state = 'start';
|
||||
function playBeep(freq,dur){
|
||||
const ac=new (window.AudioContext||window.webkitAudioContext)(),
|
||||
gain=ac.createGain(), osc=ac.createOscillator();
|
||||
gain.gain.value=params.sfxVolume;
|
||||
osc.frequency.value=freq;
|
||||
osc.connect(gain).connect(ac.destination);
|
||||
osc.start(); osc.stop(ac.currentTime+dur);
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', e=>{
|
||||
if(e.key.toLowerCase()==='d'){
|
||||
debugMenu.style.display=debugMenu.style.display==='block'?'none':'block';
|
||||
return;
|
||||
}
|
||||
if(state==='start'){
|
||||
titleScreen.classList.add('hidden'); initGame(); state='playing';
|
||||
} else if(state==='playing'){
|
||||
const M={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};
|
||||
if(M[e.key]&&(M[e.key][0]!==-dir.x||M[e.key][1]!==-dir.y)){
|
||||
dir={x:M[e.key][0],y:M[e.key][1]};
|
||||
}
|
||||
} else if(state==='gameover'&&e.key.toLowerCase()==='r'){
|
||||
gameOverScreen.classList.add('hidden');
|
||||
titleScreen.classList.remove('hidden');
|
||||
state='start';
|
||||
}
|
||||
});
|
||||
|
||||
// Settings
|
||||
settingsBtn.addEventListener('click', () => {
|
||||
// pause
|
||||
if (state === 'playing') clearInterval(gameInterval);
|
||||
// populate
|
||||
document.getElementById('paramSpeed').value = params.speed;
|
||||
document.getElementById('paramSfx').value = params.sfx ? 'on' : 'off';
|
||||
settingsBtn.addEventListener('click', ()=>{
|
||||
if(state==='playing') clearInterval(gameInterval);
|
||||
document.getElementById('paramSpeed').value = params.speed;
|
||||
document.getElementById('paramSfx').value = params.sfx?'on':'off';
|
||||
document.getElementById('paramStartLength').value = params.startLength;
|
||||
document.getElementById('paramWallMode').value = params.wallMode;
|
||||
document.getElementById('paramGrid').value = params.grid;
|
||||
document.getElementById('paramSfxVolume').value = params.sfxVolume;
|
||||
document.getElementById('paramHeadColor').value = params.headColor;
|
||||
document.getElementById('paramBodyColor').value = params.bodyColor;
|
||||
settingsModal.style.display = 'block';
|
||||
document.getElementById('paramSfxVolume').value = params.sfxVolume;
|
||||
document.getElementById('paramHeadColor').value = params.headColor;
|
||||
document.getElementById('paramBodyColor').value = params.bodyColor;
|
||||
settingsModal.style.display='block';
|
||||
});
|
||||
closeBtn.addEventListener('click', () => {
|
||||
settingsModal.style.display = 'none';
|
||||
if (state === 'playing') gameInterval = setInterval(gameLoop, params.speed);
|
||||
|
||||
closeBtn.addEventListener('click', ()=>{
|
||||
settingsModal.style.display='none';
|
||||
if(state==='playing') gameInterval=setInterval(gameLoop,params.speed);
|
||||
});
|
||||
saveBtn.addEventListener('click', () => {
|
||||
// save and reinit if playing
|
||||
|
||||
saveBtn.addEventListener('click', ()=>{
|
||||
params.speed = parseInt(document.getElementById('paramSpeed').value,10);
|
||||
params.sfx = document.getElementById('paramSfx').value === 'on';
|
||||
params.sfx = document.getElementById('paramSfx').value==='on';
|
||||
params.startLength = parseInt(document.getElementById('paramStartLength').value,10);
|
||||
params.wallMode = document.getElementById('paramWallMode').value;
|
||||
params.grid = document.getElementById('paramGrid').value === 'true';
|
||||
params.grid = document.getElementById('paramGrid').value==='true';
|
||||
params.sfxVolume = parseFloat(document.getElementById('paramSfxVolume').value);
|
||||
params.headColor = document.getElementById('paramHeadColor').value;
|
||||
params.bodyColor = document.getElementById('paramBodyColor').value;
|
||||
settingsModal.style.display = 'none';
|
||||
if (state === 'playing') initGame();
|
||||
settingsModal.style.display='none';
|
||||
if(state==='playing') initGame();
|
||||
});
|
||||
backToTitle.addEventListener('click', () => {
|
||||
gameOverScreen.classList.add('hidden'); titleScreen.classList.remove('hidden'); state = 'start';
|
||||
|
||||
backToTitle.addEventListener('click', ()=>{
|
||||
gameOverScreen.classList.add('hidden');
|
||||
titleScreen.classList.remove('hidden');
|
||||
state='start';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user