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