init naive movement
This commit is contained in:
commit
0f66e7198b
4 changed files with 172 additions and 0 deletions
82
static/engine.js
Normal file
82
static/engine.js
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
console.log("loading engine");
|
||||||
|
|
||||||
|
const initEvent = () => {
|
||||||
|
let subscribers = {};
|
||||||
|
|
||||||
|
return (message, ...messageArgs) => {
|
||||||
|
switch (message) {
|
||||||
|
case "addSubscriber":
|
||||||
|
let subscriberName = messageArgs[0];
|
||||||
|
let subscriberFunc = messageArgs[1];
|
||||||
|
subscribers[subscriberName] = subscriberFunc;
|
||||||
|
break;
|
||||||
|
case "raise":
|
||||||
|
let delta = messageArgs[0];
|
||||||
|
let eventData = messageArgs[1];
|
||||||
|
Object.entries(subscribers).forEach(([id, subscriber]) => {
|
||||||
|
subscriber(delta, eventData);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const engine = (() => {
|
||||||
|
let queue = [];
|
||||||
|
let timer;
|
||||||
|
let time = Date.now();
|
||||||
|
let entities = {};
|
||||||
|
let events = {};
|
||||||
|
|
||||||
|
const engineTick = 1000 / 60;
|
||||||
|
const tick = () => {
|
||||||
|
let now = Date.now();
|
||||||
|
let delta = now - time;
|
||||||
|
time = now;
|
||||||
|
while (queue.length > 0) {
|
||||||
|
let eventName = queue.shift();
|
||||||
|
events[eventName]("raise", delta);
|
||||||
|
}
|
||||||
|
timer = setTimeout(tick, engineTick);
|
||||||
|
};
|
||||||
|
const halt = () => {
|
||||||
|
console.log("halted");
|
||||||
|
clearTimeout(timer);
|
||||||
|
};
|
||||||
|
return (message, ...messageArgs) => {
|
||||||
|
switch (message) {
|
||||||
|
case "queueEvent":
|
||||||
|
queue.push(messageArgs[0]);
|
||||||
|
break;
|
||||||
|
case "events":
|
||||||
|
return events;
|
||||||
|
break;
|
||||||
|
case "registerEntity":
|
||||||
|
break;
|
||||||
|
case "removeEntity":
|
||||||
|
break;
|
||||||
|
case "registerEvent":
|
||||||
|
{let eventName = messageArgs[0];
|
||||||
|
let newEvent = initEvent();
|
||||||
|
events[eventName] = newEvent;}
|
||||||
|
break;
|
||||||
|
case "subscribeToEvent":
|
||||||
|
{let eventName = messageArgs[0];
|
||||||
|
let subscriberName = messageArgs[1];
|
||||||
|
let newSubscriber = messageArgs[2];
|
||||||
|
events[eventName]("addSubscriber", subscriberName, newSubscriber);}
|
||||||
|
break;
|
||||||
|
case 'start':
|
||||||
|
tick();
|
||||||
|
break;
|
||||||
|
case 'halt':
|
||||||
|
halt();
|
||||||
|
break;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
inputSystem(engine);
|
||||||
|
playerSystem(engine);
|
||||||
|
|
||||||
|
engine("start");
|
||||||
27
static/index.html
Normal file
27
static/index.html
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="input.js" defer></script>
|
||||||
|
<script src="player.js" defer></script>
|
||||||
|
<script src="engine.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="player"
|
||||||
|
data-sprite="player.png"
|
||||||
|
data-pos-x="0"
|
||||||
|
data-pos-y="0"
|
||||||
|
id="player"
|
||||||
|
style="position:absolute;width:50px;height:50px;background-color:black;"></div>
|
||||||
|
<article class="level" id="test">
|
||||||
|
<table class="enemy" id="table-enemy" >
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
o o o
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
27
static/input.js
Normal file
27
static/input.js
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
console.log("loading input system");
|
||||||
|
|
||||||
|
|
||||||
|
const inputSystem = (engine) => {
|
||||||
|
engine("registerEvent", "moveDown");
|
||||||
|
engine("registerEvent", "moveUp");
|
||||||
|
engine("registerEvent", "moveLeft");
|
||||||
|
engine("registerEvent", "moveRight");
|
||||||
|
|
||||||
|
document.addEventListener('keydown', (event) => {
|
||||||
|
let target = event.target;
|
||||||
|
switch (event.key) {
|
||||||
|
case "ArrowDown":
|
||||||
|
engine("queueEvent", "moveDown", {target});
|
||||||
|
break;
|
||||||
|
case "ArrowUp":
|
||||||
|
engine("queueEvent", "moveUp", {target});
|
||||||
|
break;
|
||||||
|
case "ArrowLeft":
|
||||||
|
engine("queueEvent", "moveLeft", {target});
|
||||||
|
break;
|
||||||
|
case "ArrowRight":
|
||||||
|
engine("queueEvent", "moveRight", {target});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
36
static/player.js
Normal file
36
static/player.js
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
console.log("loading player system");
|
||||||
|
|
||||||
|
const renderPlayer = (entity) => {
|
||||||
|
entity.style.left = `${entity.dataset.posX}px`;
|
||||||
|
entity.style.top = `${entity.dataset.posY}px`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const playerSystem = (engine) => {
|
||||||
|
const entity = document.getElementById("player");
|
||||||
|
engine("registerEntity", entity);
|
||||||
|
|
||||||
|
const movementRate = 0.5;
|
||||||
|
const move = (direction) => (delta, eventData) => {
|
||||||
|
let lastPos = [Number(entity.dataset.posX), Number(entity.dataset.posY)];
|
||||||
|
switch (direction) {
|
||||||
|
case "left":
|
||||||
|
entity.dataset.posX = Number(lastPos[0] - (movementRate * delta));
|
||||||
|
break;
|
||||||
|
case "right":
|
||||||
|
entity.dataset.posX = Number(lastPos[0] + (movementRate * delta));
|
||||||
|
break;
|
||||||
|
case "up":
|
||||||
|
entity.dataset.posY = Number(lastPos[1] - (movementRate * delta));
|
||||||
|
break;
|
||||||
|
case "down":
|
||||||
|
entity.dataset.posY = Number(lastPos[1] + (movementRate * delta));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
renderPlayer(entity);
|
||||||
|
};
|
||||||
|
|
||||||
|
engine("subscribeToEvent", "moveLeft", "movePlayerLeft", move("left"));
|
||||||
|
engine("subscribeToEvent", "moveRight", "movePlayerRight", move("right"));
|
||||||
|
engine("subscribeToEvent", "moveUp", "movePlayerUp", move("up"));
|
||||||
|
engine("subscribeToEvent", "moveDown", "movePlayerDown", move("down"));
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue