refactored code and added win/lose popups

Nathan DECHER 5 years ago
parent 40ec4fa09a
commit 4746f34537
  1. 3
      assets/config.json
  2. 4
      assets/levelList.json
  3. 152
      src/js/input.js
  4. 18
      src/js/levels.js
  5. 308
      src/js/main.js
  6. 6
      src/js/popup.js

@ -1,13 +1,16 @@
{ {
"touchscreen": { "touchscreen": {
"enabled": true,
"mode": "swipe", "mode": "swipe",
"deadzone": 50, "deadzone": 50,
"buffer": false "buffer": false
}, },
"keyboard": { "keyboard": {
"enabled": true,
"buffer": false "buffer": false
}, },
"gamepad": { "gamepad": {
"enabled": true,
"deadzone": 0.5, "deadzone": 0.5,
"buffer": true "buffer": true
} }

@ -12,7 +12,8 @@
"levelDisplay": "Level <n>", "levelDisplay": "Level <n>",
"levels": [ "levels": [
1, 2, 3, 4, 5 1, 2, 3, 4, 5
] ],
"nextLevel": true
}, },
"arcade": { "arcade": {
"desc": "Have fun just like in the good ol' days, walls wrap around, fruits respawn and speed increases", "desc": "Have fun just like in the good ol' days, walls wrap around, fruits respawn and speed increases",
@ -31,6 +32,7 @@
"Survival", "Survival",
"Versus" "Versus"
], ],
"nextLevel": false,
"levelDesc": [ "levelDesc": [
"The old classic, try to get as high as a score as you can", "The old classic, try to get as high as a score as you can",
"Get a score as high as you can in 30 seconds", "Get a score as high as you can in 30 seconds",

@ -0,0 +1,152 @@
let currentInputs={};
let handlers=[];
let config;
const toAngleMagnitude=(x, y) => {
return {
angle: ((Math.atan2(x, y)+2*Math.PI)%(2*Math.PI))/Math.PI,
magnitude: Math.hypot(x, y)
};
};
const handleAngleMagnitude=(x, y, threshold=0, fn=null, clearBuffer=false) => {
const {angle, magnitude}=toAngleMagnitude(x, y);
if(magnitude>threshold) {
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;
if(clearBuffer) inputs.clearBuffer=true;
if(fn) fn(angle, magnitude);
}
}
const handleCrosspad=(() => {
const fn=e =>
handleAngleMagnitude(
e.touches[0].clientX-window.innerWidth/2,
e.touches[0].clientY-window.innerHeight/2,
0,
null,
!config.touchscreen.buffer
);
return {
touchstart: fn,
touchmove: fn
};
})();
const handleKeyboard={
keydown: e => {
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;
if(!config.keyboard.buffer) inputs.clearBuffer=true;
}
};
const handleJoystick=(() => {
let center={
x: 0,
y: 0
};
return {
touchstart: e => {
center.x=e.touches[0].clientX;
center.y=e.touches[0].clientY;
},
touchmove: e =>
handleAngleMagnitude(
e.touches[0].clientX-center.x,
e.touches[0].clientY-center.y,
config.touchscreen.deadzone,
null,
!config.touchscreen.buffer
)
}
});
const handleSwipe=(() => {
let center={
x: 0,
y: 0
};
let resetCenter=e => {
center.x=e.touches[0].clientX;
center.y=e.touches[0].clientY;
};
return {
touchstart: resetCenter,
touchmove: e =>
handleAngleMagnitude(
e.touches[0].clientX-center.x,
e.touches[0].clientY-center.y,
config.touchscreen.deadzone,
() => resetCenter(e),
!config.touchscreen.buffer
)
}
});
const handleGamepads={
frame: () => {
const gp=navigator.getGamepads()[0];
let inputs=currentInputs;
if(!gp || !gp.axes) return;
handleAngleMagnitude(
gp.axes[0],
gp.axes[1],
config.gamepad.deadzone,
null,
!config.gamepad.buffer
);
}
};
const handleEvent=(type, evt) => {
for(let handler of handlers) {
let fn=handler[type];
if(fn) fn(evt);
}
};
const enableHandler=handler => {
if(!handlers.includes(handler)) handlers.push(handler);
};
const disableHandler=handler => {
let idx=handlers.indexOf(handler);
if(idx!=-1) handlers.splice(idx, 1);
};
const updateConfig=cfg =>
config=cfg;
const clear=() =>
Object
.keys(currentInputs)
.forEach(key => delete currentInputs[key]);
for(let type of ['keydown', 'touchstart', 'touchmove']) {
window.addEventListener(type, handleEvent.bind(null, type));
}
return module.exports={
inputs: currentInputs,
clear,
enableHandler, disableHandler,
framefn: handleEvent.bind(null, 'frame'),
availableHandlers: {
keyboard: handleKeyboard,
gamepad: handleGamepads,
touchscreenCrosspad: handleCrosspad,
touchscreenJoystick: handleJoystick,
touchscreenSwipe: handleSwipe
},
updateConfig
};

@ -0,0 +1,18 @@
const cache=Object.create(null);
const get=async filename => {
if(cache[filename]) return cache[filename];
const req=await fetch('levels/'+filename);
const json=await req.json();
return cache[filename]=json;
};
const clearCache=() =>
Object
.keys(cache)
.forEach(key => delete cache[key]);
return module.exports={
get,
clearCache
};

@ -1,22 +1,35 @@
(async () => { (async () => {
location.hash='';
// load modules
const assets=require('assets'); const assets=require('assets');
const Popup=require('popup'); const Popup=require('popup');
const SnekGame=require('snek'); const SnekGame=require('snek');
const input=require('input');
const levels=require('levels');
// get a known state
await new Promise(ok => assets.onReady(ok)); await new Promise(ok => assets.onReady(ok));
location.hash='menu';
// get our DOM in check
const main=document.querySelector('main'); const main=document.querySelector('main');
const nav=main.querySelector('nav'); const nav=main.querySelector('nav');
const canvas=main.querySelector('canvas'); const canvas=main.querySelector('canvas');
const config=assets.get('config'); // load config
const config=assets.get('config'); //TODO use an actual config module
// load data from server
const levelList=assets.get('levelList');
// get our global variables
let currentGame=null; let currentGame=null;
let currentInputs={};
const resizeCanvas=() => { // forward-declare functions
let resizeCanvas, getLevel, startGame, handleWin, handleDeath, menu, help;
// handle window resize and fullscreen
resizeCanvas=() => {
if(document.fullscreenElement) { if(document.fullscreenElement) {
canvas.width=screen.width; canvas.width=screen.width;
canvas.height=screen.height; canvas.height=screen.height;
@ -27,8 +40,35 @@
}; };
resizeCanvas(); resizeCanvas();
window.addEventListener('resize', resizeCanvas); window.addEventListener('resize', resizeCanvas);
window.addEventListener('keydown', async e => {
if(e.key=='f') {
if(document.fullscreenElement) await document.exitFullscreen();
else await main.requestFullscreen();
resizeCanvas();
}
});
const levelList=assets.get('levelList'); // get a level for a category and an id
getLevel=(category, id) => {
const cat=levelList[category];
id=''+id;
const displayName=cat.levelDisplay
.replace(/<n>/g, id)
.replace(/<l>/g, id.toLowerCase());
const fileName=cat.levelFilename
.replace(/<n>/g, id)
.replace(/<l>/g, id.toLowerCase());
const levelString=category+'/'+id+'/'+fileName;
return {
displayName,
fileName,
levelString
};
};
// buid menu from level list
Object.keys(levelList).forEach(category => { Object.keys(levelList).forEach(category => {
const cat=levelList[category]; const cat=levelList[category];
@ -41,16 +81,10 @@
const ul=section.appendChild(document.createElement('ul')); const ul=section.appendChild(document.createElement('ul'));
cat.levels.forEach((level, i) => { cat.levels.forEach((level, i) => {
level=''+level; const {displayName, fileName, levelString}=getLevel(category, level);
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 li=ul.appendChild(document.createElement('li'));
const a=li.appendChild(document.createElement('a')); const a=li.appendChild(document.createElement('a'));
a.href='#'+category+'/'+fileName; a.href='#'+levelString;
a.innerText=displayName; a.innerText=displayName;
if(cat.levelDesc) { if(cat.levelDesc) {
const span=li.appendChild(document.createElement('span')); const span=li.appendChild(document.createElement('span'));
@ -59,150 +93,148 @@
}); });
}); });
const handleGamepads=() => { // start a new game
const gp=navigator.getGamepads()[0]; startGame=async (category, levelId, filename) => {
let inputs=currentInputs; // stop any running games
if(!gp || !gp.axes) return; if(currentGame) currentGame.playing=false;
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>config.gamepad.deadzone) {
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;
}
if(!config.gamepad.buffer) inputs.clearBuffer=true; // load rules and level from cache or server
};
const startGame=async (category, filename) => {
//TODO migrate relevant code here
};
window.addEventListener('hashchange', async () => {
nav.classList.add('hidden');
const [_, category, filename]=location.hash.match(/([a-zA-Z0-9_-]+?)\/(.+)/);
const rules=levelList[category].rules || {}; const rules=levelList[category].rules || {};
const level=await (async () => { const level=await levels.get(filename);
const resp=await fetch('levels/'+filename);
return await resp.json();
})();
const snek=new SnekGame(level, canvas, rules); // create the game and attach the callbacks
canvas.classList.remove('hidden'); const snek=currentGame=new SnekGame(level, canvas, rules);
snek.start();
snek.callback=evt => { snek.callback=evt => {
if(evt=='tick') { if(evt=='tick') {
if(navigator.getGamepads) handleGamepads(); input.framefn();
snek.handleInputs(currentInputs); snek.handleInputs(input.inputs);
} else if(evt=='win') { } else if(evt=='win') {
let popup=new Popup("Finished!"); handleWin(snek);
popup.addStrong("You won!"); } else if(evt=='die') {
popup.addContent({ handleDeath(snek);
"Time": snek.playTime/1000+'s',
"Score": snek.score,
"Final length": snek.snake.length
});
popup.buttons={
retry: "Retry",
next: "Next level",
menu: "Main menu"
};
popup.display();
//TODO do something with the result
} }
}; };
currentGame=snek;
});
window.addEventListener('keydown', async e => { // setup the DOM
e.preventDefault(); nav.classList.add('hidden');
if(e.key=='f') { canvas.classList.remove('hidden');
if(document.fullscreenElement) await document.exitFullscreen();
else await main.requestFullscreen();
resizeCanvas();
}
let inputs=currentInputs; // push some userdata to the snake
if(e.key=='ArrowUp') inputs.up=true; snek.userdata={
else if(e.key=='ArrowDown') inputs.down=true; category,
else if(e.key=='ArrowLeft') inputs.left=true; levelId,
else if(e.key=='ArrowRight') inputs.right=true; filename
};
if(!config.keyboard.buffer) inputs.clearBuffer=true; // reset the inputs
}); input.clear();
if(config.touchscreen.mode=='crosspad') { // start the actual game
const handleTouch=e => { snek.start();
let x=e.touches[0].clientX-window.innerWidth/2; };
let y=e.touches[0].clientY-window.innerHeight/2;
const angle=((Math.atan2(x, y)+2*Math.PI)%(2*Math.PI))/Math.PI;
let inputs=currentInputs; // return to the menu
if(angle>.25 && angle <.75) inputs.right=true; menu=() => {
else if(angle>.75 && angle<1.25) inputs.up=true; // stop any running games
else if(angle>1.25 && angle<1.75) inputs.left=true; if(currentGame) currentGame.playing=false;
else inputs.down=true;
if(!config.touchscreen.buffer) inputs.clearBuffer=true; // setup the DOM
}; nav.classList.remove('hidden');
window.addEventListener('touchstart', handleTouch); canvas.classList.add('hidden');
window.addEventListener('touchmove', handleTouch); };
}
if(config.touchscreen.mode=='joystick') { // display the win popup
let center={x: 0, y: 0}; handleWin=async snek => {
window.center=center; // get userdata back
window.addEventListener('touchstart', e => { const {category, levelId, filename}=snek.userdata;
center.x=e.touches[0].clientX;
center.y=e.touches[0].clientY; // create and configure popup
let popup=new Popup("Finished!");
popup.addStrong("You won!");
popup.addContent({
"Time": snek.playTime/1000+'s',
"Score": snek.score,
"Final length": snek.snake.length
}); });
window.addEventListener('touchmove', e => { popup.buttons={
let x=e.touches[0].clientX-center.x; retry: "Retry",
let y=e.touches[0].clientY-center.y; menu: "Main menu"
const angle=((Math.atan2(x, y)+2*Math.PI)%(2*Math.PI))/Math.PI; };
const magnitude=Math.hypot(x, y); if(levelList[category].nextLevel) {
let nextId=(+levelId)+1;
let inputs=currentInputs; if(levelList[category].levels.includes(nextId)) popup.buttons.next="Next level";
if(magnitude>config.touchscreen.deadzone) { }
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;
}
if(!config.touchscreen.buffer) inputs.clearBuffer=true; // show the actual popup
}); let result=await popup.display(main);
}
// act on it
if(result=='retry') {
startGame(category, levelId, filename);
} else if(result=='menu') {
location.hash='menu';
} else if(result=='next') {
let nextId=(+levelId)+1;
let {levelString}=getLevel(category, nextId)
location.hash=levelString;
}
};
if(config.touchscreen.mode=='swipe') { // display the death popup
let center={x: 0, y: 0}; handleDeath=async snek => {
window.center=center; // get userdata back
window.addEventListener('touchstart', e => { const {category, levelId, filename}=snek.userdata;
center.x=e.touches[0].clientX;
center.y=e.touches[0].clientY; // create and configure popup
let popup=new Popup("Finished!");
popup.addStrong("You died...");
popup.addContent({
"Time": snek.playTime/1000+'s',
"Score": snek.score,
"Final length": snek.snake.length
}); });
window.addEventListener('touchmove', e => { popup.buttons={
let x=e.touches[0].clientX-center.x; retry: "Retry",
let y=e.touches[0].clientY-center.y; menu: "Main menu"
const angle=((Math.atan2(x, y)+2*Math.PI)%(2*Math.PI))/Math.PI; };
const magnitude=Math.hypot(x, y);
let inputs=currentInputs;
if(magnitude>config.touchscreen.deadzone) {
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;
center.x=e.touches[0].clientX;
center.y=e.touches[0].clientY;
}
if(!config.touchscreen.buffer) inputs.clearBuffer=true; // show the actual popup
}); let result=await popup.display(main);
}
// act on it
if(result=='retry') {
startGame(category, levelId, filename);
} else if(result=='menu') {
location.hash='menu';
}
};
// handle page navigation
window.addEventListener('hashchange', () => {
const hash=location.hash.substr(1);
if(hash=='' || hash=='menu') return menu();
else if(hash=='help') return help();
const [_, category, levelId, filename]=location.hash.match(/([a-zA-Z0-9_-]+?)\/([a-zA-Z0-9_-]+?)\/(.+)/);
startGame(category, levelId, filename);
});
// enable input methods according to config
if(config.keyboard.enabled) {
input.enableHandler(input.availableHandlers.keyboard);
}
if(config.gamepad.enabled) {
input.enableHandler(input.availableHandlers.gamepad);
}
if(config.touchscreen.enabled) {
if(config.touchscreen.mode=='crosspad') {
input.enableHandler(input.availableHandlers.touchscreenCrosspad);
} else if(config.touchscreen.mode=='joystick') {
input.enableHandler(input.availableHandlers.touchscreenJoystick);
} else if(config.touchscreen.mode=='swipe') {
input.enableHandler(input.availableHandlers.touchscreenSwipe);
}
}
input.updateConfig(config);
})(); })();

@ -46,7 +46,7 @@ class Popup {
this.content.push(objToDom({[Popup.STRONG]: cnt})); this.content.push(objToDom({[Popup.STRONG]: cnt}));
} }
async display() { async display(parent=document.body) {
let outer=document.createElement('div'); let outer=document.createElement('div');
outer.classList.add('popup'); outer.classList.add('popup');
let popup=outer.appendChild(document.createElement('div')); let popup=outer.appendChild(document.createElement('div'));
@ -67,7 +67,7 @@ class Popup {
}); });
buttons.forEach(btn => buttonSection.appendChild(btn)); buttons.forEach(btn => buttonSection.appendChild(btn));
document.body.appendChild(outer); parent.appendChild(outer);
const code=await Promise.race(buttons.map(btn => new Promise(ok => { const code=await Promise.race(buttons.map(btn => new Promise(ok => {
btn.addEventListener('click', e => { btn.addEventListener('click', e => {
@ -76,7 +76,7 @@ class Popup {
}); });
}))); })));
document.body.removeChild(outer); parent.removeChild(outer);
return code; return code;
} }
} }

Loading…
Cancel
Save