102 lines
3 KiB
JavaScript
102 lines
3 KiB
JavaScript
|
(async () => {
|
||
|
|
location.hash='';
|
||
|
|
|
||
|
|
const assets=require('assets');
|
||
|
|
await new Promise(ok => assets.onReady(ok));
|
||
|
|
|
||
|
|
const main=document.querySelector('main');
|
||
|
|
const nav=main.querySelector('nav');
|
||
|
|
const canvas=main.querySelector('canvas');
|
||
|
|
|
||
|
|
let currentGame=null;
|
||
|
|
let currentInputs={};
|
||
|
|
|
||
|
|
const resizeCanvas=() => {
|
||
|
|
if(document.fullscreenElement) {
|
||
|
|
canvas.width=screen.width;
|
||
|
|
canvas.height=screen.height;
|
||
|
|
} else {
|
||
|
|
canvas.width=main.clientWidth;
|
||
|
|
canvas.height=main.clientHeight;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
resizeCanvas();
|
||
|
|
window.addEventListener('resize', resizeCanvas);
|
||
|
|
|
||
|
|
const levelList=assets.get('levelList');
|
||
|
|
Object.keys(levelList).forEach(category => {
|
||
|
|
const nav=document.querySelector('nav');
|
||
|
|
const section=nav.appendChild(document.createElement('section'));
|
||
|
|
const h1=section.appendChild(document.createElement('h1'));
|
||
|
|
h1.innerText=category[0].toUpperCase()+category.slice(1)+" Mode";
|
||
|
|
const ul=section.appendChild(document.createElement('ul'));
|
||
|
|
levelList[category].levels.forEach(level => {
|
||
|
|
level=''+level;
|
||
|
|
const cat=levelList[category];
|
||
|
|
const displayName=cat.levelDisplay
|
||
|
|
.replace(/<n>/g, level)
|
||
|
|
.replace(/<l>/g, level.toLowerCase());
|
||
|
|
const fileName=cat.levelFilename
|
||
|
|
.replace(/<n>/g, level)
|
||
|
|
.replace(/<l>/g, level.toLowerCase());
|
||
|
|
const li=ul.appendChild(document.createElement('li'));
|
||
|
|
const a=li.appendChild(document.createElement('a'));
|
||
|
|
a.href='#'+category+'/'+fileName;
|
||
|
|
a.innerText=displayName;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
const handleGamepads=() => {
|
||
|
|
const gp=navigator.getGamepads()[0];
|
||
|
|
let inputs=currentInputs;
|
||
|
|
console.log(gp);
|
||
|
|
if(!gp || !gp.axes) return;
|
||
|
|
|
||
|
|
const magnitude=Math.hypot(gp.axes[0], gp.axes[1]);
|
||
|
|
const angle=((Math.atan2(gp.axes[0], gp.axes[1])+2*Math.PI)%(2*Math.PI))/Math.PI;
|
||
|
|
if(magnitude>.5) {
|
||
|
|
if(angle>.25 && angle <.75) inputs.right=true;
|
||
|
|
else if(angle>.75 && angle<1.25) inputs.up=true;
|
||
|
|
else if(angle>1.25 && angle<1.75) inputs.left=true;
|
||
|
|
else inputs.down=true;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener('hashchange', async () => {
|
||
|
|
nav.classList.add('hidden');
|
||
|
|
|
||
|
|
const [_, category, filename]=location.hash.match(/([a-zA-Z0-9_-]+?)\/(.+)/);
|
||
|
|
const rules=levelList[category].rules || {};
|
||
|
|
const level=await (async () => {
|
||
|
|
const resp=await fetch('levels/'+filename);
|
||
|
|
return await resp.json();
|
||
|
|
})();
|
||
|
|
console.log(rules, level);
|
||
|
|
|
||
|
|
const SnekGame=require('snek');
|
||
|
|
const snek=new SnekGame(level, canvas, rules);
|
||
|
|
canvas.classList.remove('hidden');
|
||
|
|
snek.start();
|
||
|
|
snek.callback=() => {
|
||
|
|
if(navigator.getGamepads) handleGamepads();
|
||
|
|
snek.handleInputs(currentInputs);
|
||
|
|
};
|
||
|
|
currentGame=snek;
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener('keydown', async e => {
|
||
|
|
if(e.key=='f' && !canvas.classList.contains('hidden')) {
|
||
|
|
if(document.fullscreenElement) await document.exitFullscreen();
|
||
|
|
else await canvas.requestFullscreen();
|
||
|
|
resizeCanvas();
|
||
|
|
}
|
||
|
|
|
||
|
|
let inputs=currentInputs;
|
||
|
|
if(e.key=='ArrowUp') inputs.up=true;
|
||
|
|
else if(e.key=='ArrowDown') inputs.down=true;
|
||
|
|
else if(e.key=='ArrowLeft') inputs.left=true;
|
||
|
|
else if(e.key=='ArrowRight') inputs.right=true;
|
||
|
|
});
|
||
|
|
|
||
|
|
})();
|