I can't understand the calculations in this code .
It's a video on youtube and this is the link for it : https://www.youtube.com/watch?v=jfYWwQrtzzY
I can't understand how he calculated the target element and how to put the dragged element in certain position.
const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".container");
draggables.forEach((draggable) => {
draggable.addEventListener("dragstart", () => {
draggable.classList.add("dragging");
});
draggable.addEventListener("dragend", () => {
draggable.classList.remove("dragging");
});
});
containers.forEach((container) => {
container.addEventListener("dragover", (e) => {
e.preventDefault();
const afterElement = getDragAfterElement(container, e.clientY);
const draggable = document.querySelector(".dragging");
if (afterElement == null) {
container.appendChild(draggable);
}else{
container.insertBefore(draggable,afterElement);
}
});
});
function getDragAfterElement(container, y) {
const draggableElements = [
...container.querySelectorAll(".draggable:not(.dragging)"),
];
return draggableElements.reduce(
(closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
},
{ offset: Number.NEGATIVE_INFINITY }
).element;
}
I'm building a video game where a spaceship moves with controllers and it must avoid the fireball in order to continue to play. If it collides into the fireball the game must display "Game Over" and restart.
At the beginning of the game, there is an input where the user puts his name. Then there is a countdown and then the game starts. I would like that the user gets back to the countdown instead of the point where he must input his name. Does someone knows how to do this?
Code for input:
<form id="askName" title="Write your name">
<label> Enter your username: </label>
<input id="input" type="text" maxlength="10" autofocus>
<button type="button" onclick="countDown(); return Username()" id="begin-timer">
Submit
</button>
let icon = document.getElementById("icon")
let fireballElement = document.querySelector("#fireball")
var input = document.getElementById("input")
function Username(field) {
field = input.value
if (field == "") { alert("Complete blanks"); return false }
document.getElementById("askName").style.display = "none"
setTimeout(function() {
document.getElementById("name").innerHTML = "Player: " + field
icon.style.display = 'block'
fireballElement.style.display = "block"
checkCollision()
}, 4000)
}
CountDown
var count = 3
function countDown() {
function preventCountFast() {
document.getElementById("count").innerHTML = count
if (count > 0) { count-- }
else {
clearInterval(ncount);
document.getElementById("count").style.display = "none"
}
}
var ncount = setInterval(preventCountFast, 1000)
}
Detect collision when fireball touches spaceship:
function checkCollision() {
var elem = document.getElementById("icon")
var elem2 = document.getElementById("fireball")
if (detectOverlap(elem, elem2) && elem2.getAttribute('hit') == 'false') {
hits++
elem2.setAttribute('hit', true)
//THIS IS WHERE YOU SHOULD LOOK AT
document.querySelector("#stopGame").style.display = "inline"
}
setTimeout(checkCollision, 20)
}
var detectOverlap = (function() {
function getPositions(elem) {
var pos = elem.getBoundingClientRect()
return [[pos.left, pos.right], [pos.top, pos.bottom]]
}
function comparePositions(p1, p2) {
var r1, r2
r1 = p1[0] < p2[0] ? p1 : p2
r2 = p1[0] < p2[0] ? p2 : p1
return r1[1] > r2[0] || r1[0] === r2[0]
}
return function(a, b) {
var pos1 = getPositions(a), pos2 = getPositions(b)
return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1])
}
})()
<img src="Photo/fireball.png" id="fireball" style="display:none>
<img src="Photo/Spaceship1.png" id="icon" style="display:none">
<h2 id="stopGame"> Game Over! </h2>
Fireball movement:
function fFireball(offset) {
return Math.floor(Math.random() * (window.innerWidth - offset))
}
let fireball = { x: fFireball(fireballElement.offsetWidth), y: 0 }
const fireLoop = function() {
fireball.y += 1
fireballElement.style.top = fireball.y + 'px'
if (fireball.y > window.innerHeight) {
fireball.x = fFireball(fireballElement.offsetWidth)
fireballElement.style.left = fireball.x + 'px'
fireball.y = 0
fireballElement.setAttribute('hit', false )
}
}
fireballElement.style.left = fireball.x + 'px'
let fireInterval = setInterval(fireLoop, 1000 / 200)
Spaceship movement:
//Spaceship moves into space + prevent going out borders
let hits = 0
let display = document.getElementById("body")
let rect = icon
let pos = { top: 1000, left: 570 }
const keys = {}
window.addEventListener("keydown", function(e) { keys[e.keyCode] = true })
window.addEventListener("keyup" , function(e) { keys[e.keyCode] = false })
const loop = function() {
if (keys[37] || keys[81]) { pos.left -= 10 }
if (keys[39] || keys[68]) { pos.left += 10 }
if (keys[38] || keys[90]) { pos.top -= 10 }
if (keys[40] || keys[83]) { pos.top += 10 }
var owidth = display.offsetWidth
var oheight = display.offsetHeight
var iwidth = rect.offsetWidth
var iheight = rect.offsetHeight
if (pos.left < 0) pos.left = -10
if (pos.top < 0) pos.top = -10
if (pos.left + iwidth >= owidth ) pos.left = owidth - iwidth
if (pos.top + iheight >= oheight) pos.top = oheight- iheight
rect.setAttribute("data", owidth + ":" + oheight)
rect.style.left = pos.left + "px"; rect.style.top = pos.top + "px"
}
let sens = setInterval(loop, 1000 / 60)
Convert your countDown() to this:
function countDown(count) {
function preventCountFast() {
document.getElementById("count").innerHTML = count
document.getElementById("count").style.display = "block"
if (count > 0) { count-- }
else { clearInterval(ncount); document.getElementById("count").style.display = "none" }
}
var ncount = setInterval(preventCountFast, 1000)
}
So, while calling this, always call it as countDown(3) it will be easier. Next, modify your checkCollision() just a bit:
function checkCollision() {
var elem = document.getElementById("icon")
var elem2 = document.getElementById("fireball")
if (detectOverlap(elem, elem2) && elem2.getAttribute('hit') == 'false') {
hits++
elem2.setAttribute('hit', true)
document.querySelector("#stopGame").style.display = "block"
document.querySelector("#stopGame").style.animation = "seconds 5s forwards"
/* Added these three lines so that countDown() is called again if collision
occurs*/
setTimeout(function () {
countDown(5);
}, 2000);
/* End of edit */
}
setTimeout(checkCollision, 1)
}
Create a restart function and call it at the end of checkCollision like below.
function checkCollision() {
var elem = document.getElementById("icon")
var elem2 = document.getElementById("fireball")
if (detectOverlap(elem, elem2) && elem2.getAttribute('hit') == 'false') {
hits++
elem2.setAttribute('hit', true)
document.querySelector("#stopGame").style.display = "block"
document.querySelector("#stopGame").style.animation = "seconds 5s forwards"
// call restart at end of game
restart();
return;
}
setTimeout(checkCollision, 1)
}
function restart() {
// clear fireball animation
clearInterval(fireInterval);
count = 3;
let countElement = document.getElementById("count");
let stopGame = document.querySelector("#stopGame");
// show game over for 3 seconds to user
setTimeout(function () {
stopGame.style.animation = "";
stopGame.style.display = icon.style.display = fireballElement.style.display =
"none";
countElement.innerHTML = "";
countElement.style.display = "block";
countElement.style.transform = "scale(1)";
// allow count rerender
setTimeout(function () {
fireballElement.setAttribute("hit", false);
countDown();
// wait for count down to be over
setTimeout(function () {
// reset player position
pos.left = display.offsetWidth / 2;
pos.top = display.offsetHeight;
icon.style.display = "block";
// reset fireball position
fireball = { x: fFireball(display.offsetWidth / 2), y: 0 };
fireballElement.style.top = fireball.y + "px";
fireballElement.style.left = fireball.x + "px";
fireballElement.style.display = "block";
clearInterval(sens);
// restart loop list
sens = setInterval(loop, 1000 / 60);
fireInterval = setInterval(fireLoop, 1000 / 200);
checkCollision();
}, 4000);
}, 1000);
}, 3000);
}
Separate logic from presentation
The reason why you encountered this problem is that your code is tightly coupled to the presentation (DOM), and makes use of the global scope.
Your game logic should be separated from the presentation - DOM is basically an I/O device. Otherwise you tie yourself to a particular implementation (imagine refactoring this to a React application or using Material design, etc).
The principle is called "separation of concerns" (or SoC), and is a well-known principle of software design that will serve you well in the future.
Part 1. Counter
If you rely on a global variable like count to launch the timer, you will inevitably encounter issues with resetting it - make the state internal and only pass in configuration (start, end, and what to do on each step).
function getCounter({
init = 3,
onEnd = () => {},
onStep = () => {},
until = 0
} = {}) {
let curr = init;
return {
interval : null,
start() {
this.interval = setInterval(() => {
onStep(this, curr--);
const shouldStop = until === curr;
shouldStop && this.stop();
}, 1e3);
},
stop() {
const { interval } = this;
clearInterval(interval);
onEnd();
}
};
}
const counter = getCounter({
onStep : (counter, curr) => console.log(curr),
onEnd : () => console.log("ended")
});
counter.start();
Part 2. Game Over
Instead of controlling the UI upon collision, control what should happen, and defer coupling to a particular API:
const detectOverlap = () => !!Math.floor( Math.random() * 8 ); //mock for testing
const checkCollision = ({
obj1,
obj2,
interval = 20,
curHits = 0,
maxHits = 0,
onMiss,
onHit,
onGameOver
}) => {
const isHit = detectOverlap(obj1, obj2);
isHit && curHits++;
const hitOrMissConfig = {
curHits,
maxHits,
obj1,
obj2
};
isHit ? onHit(hitOrMissConfig) : onMiss(hitOrMissConfig);
const timeout = setTimeout(
() => checkCollision({
obj1, obj2, interval,
curHits, maxHits,
onHit, onMiss, onGameOver
}),
interval
);
if (curHits >= maxHits) {
clearTimeout(timeout);
return onGameOver();
}
};
const obj1 = { id : 1 };
const obj2 = { id : 2 };
const onHit = () => console.log("hit!");
const onMiss = () => console.log("miss!");
const onGameOver = () => console.log("game over!");
checkCollision({ obj1, obj2, onHit, onMiss, onGameOver, maxHits : 8 });
Part 3. Start logic
Instead of starting the game from the name form, you should encapsulate your logic and call it as a callback - this way you will have control over when to initiate the name form, countdown or anything else:
const loadForm = ({ parent = document.body, defaultUname, onSubmit } = {}) => {
const form = document.createElement("form");
const input = document.createElement("input");
input.name = "name";
input.type = "text";
input.value = defaultUname;
const start = document.createElement("button");
start.type = "button";
start.innerText = "Start";
form.append(input, start);
parent.append(form);
start.addEventListener("click", (event) => {
onSubmit({ name : input.value, firstTime : false });
form.remove();
});
};
//mocks for testing
const checkCollision = () => console.log("checking collision");
const countDown = (init) => {
if(init) {
console.log(init);
setTimeout(() => countDown(--init), 1e3);
}
};
const startGame = ({ name = "Player 1", firstTime = true } = {}) => {
let restarted = false;
if(!restarted && firstTime) {
return loadForm({
defaultUname : name,
onSubmit : startGame
});
}
countDown(3);
};
startGame();
All Steps combined
You will have to implement the UI handling, guards against no name, and connect collision detection, but this should take care of all the core logic. You might also want to make your fireball and spaceship proper JavaScript objects, and not impose logic on DOM elements for the reasons stated above.
function getCounter({
init = 3,
onEnd = () => {},
onStep = () => {},
until = 0
} = {}) {
let curr = init;
return {
interval : null,
start() {
this.interval = setInterval(() => {
onStep(this, curr--);
const shouldStop = until === curr;
shouldStop && this.stop();
}, 1e3);
},
stop() {
const { interval } = this;
clearInterval(interval);
onEnd();
}
};
}
const detectOverlap = () => !!Math.floor(Math.random() * 4); //mock for testing
const checkCollision = ({
obj1,
obj2,
interval = 20,
curHits = 0,
maxHits = 0,
onMiss,
onHit,
onGameOver
}) => {
const isHit = detectOverlap(obj1, obj2);
isHit && curHits++;
const hitOrMissConfig = {
curHits,
maxHits,
obj1,
obj2
};
isHit ? onHit(hitOrMissConfig) : onMiss(hitOrMissConfig);
const timeout = setTimeout(
() => checkCollision({
obj1, obj2, interval,
curHits, maxHits,
onHit, onMiss, onGameOver
}),
interval
);
if (curHits >= maxHits) {
clearTimeout(timeout);
return onGameOver();
}
};
const loadForm = ({
parent = document.body,
defaultUname,
onSubmit
} = {}) => {
const form = document.createElement("form");
const input = document.createElement("input");
input.name = "name";
input.type = "text";
input.value = defaultUname;
const start = document.createElement("button");
start.type = "button";
start.innerText = "Start";
form.append(input, start);
parent.append(form);
start.addEventListener("click", (event) => {
onSubmit({
name: input.value,
firstTime: false
});
form.remove();
});
};
const startGame = ({
name = "Player 1",
firstTime = true
} = {}) => {
if (firstTime) {
return loadForm({
defaultUname: name,
onSubmit: startGame
});
}
console.log(`Get ready, ${name}`);
const counter = getCounter({
onStep : (_,count) => console.log(count),
onEnd : () => checkCollision({
interval : 1e2,
maxHits : 8,
obj1 : { id : 1 },
obj2 : { id : 2 },
onHit : () => console.log("hit!"),
onMiss : () => console.log("miss!"),
onGameOver : () => {
console.log("game over!");
startGame({ name, firstTime : false });
}
})
});
counter.start();
};
startGame();
Useful Resources
How I separate logic from presentation?
I have 2 divs witch I need to animate:
<div class="d"></div>
<div class="p"></div>
Width of first div should become 70% and width of second div should become 30%. But when I'am trying to animate one div after another, calling at first function for 70% and then function for 30%, width of both of them become 30%.
Javascript code:
Anim({
target: document.getElementsByClassName('d')[0],
drawFunc: (progress, element) => {
element.style.width = (progress * 70) + '%';
}
});
Anim({
target: document.getElementsByClassName('p')[0],
drawFunc: (progress, element) => {
element.style.width = (progress * 30) + '%';
}
});
I don't understand why this is happening and how to make both functions work correctly.
Code snippet if needed:
(() => {
"use strict";
const init = (params) => {
const start = performance.now();
const element = params.target || null;
requestAnimationFrame(function animate(time) {
let timeFraction = (time - start) / params.duration;
if (timeFraction > 1) {
timeFraction = 1;
}
const progress = params.timingFunc(timeFraction, params.timingArg);
params.drawFunc(progress, element);
if (timeFraction < 1) {
requestAnimationFrame(animate);
}
if (params.callback) {
if (timeFraction >= 1) {
params.callback();
}
}
});
};
const timingFunctions = {
linear: (timeFraction) => {
return timeFraction;
}
};
const paces = {
easeIn: (func) => {
return timingFunctions[func];
}
};
const defaultParams = {
duration: 1000,
timingFunc: paces.easeIn('linear'),
timingArg: null,
delay: null,
callback: null
};
const makeParams = (def, add) => {
let params = def;
if (add) {
for (let i in add) {
if (Object.prototype.hasOwnProperty.call(add, i)) {
params[i] = add[i];
}
}
}
return params;
};
function Anim(paramArgs) {
const params = makeParams(defaultParams, paramArgs);
if ('timingFunc' in paramArgs) {
params.timingFunc = (typeof paramArgs.timingFunc === 'function') ? paramArgs.timingFunc : paces[paramArgs.timingFunc.pace](paramArgs.timingFunc.func);
}
if (!params.delay) {
init(params);
} else {
setTimeout(() => {
init(params);
}, params.delay);
}
}
window.Anim = Anim;
})();
Anim({
target: document.getElementsByClassName('d')[0],
drawFunc: (progress, element) => {
element.style.width = (progress * 70) + '%';
}
});
Anim({
target: document.getElementsByClassName('p')[0],
drawFunc: (progress, element) => {
element.style.width = (progress * 30) + '%';
}
});
.d, .p {
background-color: red;
height: 50px;
width: 0;
margin-top: 10px;
}
<div class="d"></div>
<div class="p"></div>
The problem is that both Anim calls have the same params object. Both params objects have the same exact callback drawFunc.
Why? Because in makeParams you are doing this:
let params = def;
Then you assign to params which in turn alters the original defaultParams (aliased here as def). When the second function calls Anim, the callback drawFunc of this second call gets assigned to the defaultParams object. Since all params objects are basically a reference to defaultParams, they get altered too, and the callback of the last call to Anim gets assigned to all of them.
To fix this, just clone def using Object.assign:
let params = Object.assign({}, def);
Side note: The target property is also altered in the params object, but before it changes, it gets assigned to a new variable inside init:
const element = params.target || null;
Thus, even though it changes in the params object, you don't really notice because all subsequent code uses the variable element instead of params.target.
Working code:
(() => {
"use strict";
const init = (params) => {
const start = performance.now();
const element = params.target || null;
requestAnimationFrame(function animate(time) {
let timeFraction = (time - start) / params.duration;
if (timeFraction > 1) {
timeFraction = 1;
}
const progress = params.timingFunc(timeFraction, params.timingArg);
params.drawFunc(progress, element);
if (timeFraction < 1) {
requestAnimationFrame(animate);
}
if (params.callback) {
if (timeFraction >= 1) {
params.callback();
}
}
});
};
const timingFunctions = {
linear: (timeFraction) => {
return timeFraction;
}
};
const paces = {
easeIn: (func) => {
return timingFunctions[func];
}
};
const defaultParams = {
duration: 1000,
timingFunc: paces.easeIn('linear'),
timingArg: null,
delay: null,
callback: null
};
const makeParams = (def, add) => {
let params = Object.assign({}, def);
if (add) {
for (let i in add) {
if (Object.prototype.hasOwnProperty.call(add, i)) {
params[i] = add[i];
}
}
}
return params;
};
function Anim(paramArgs) {
const params = makeParams(defaultParams, paramArgs);
if ('timingFunc' in paramArgs) {
params.timingFunc = (typeof paramArgs.timingFunc === 'function') ? paramArgs.timingFunc : paces[paramArgs.timingFunc.pace](paramArgs.timingFunc.func);
}
if (!params.delay) {
init(params);
} else {
setTimeout(() => {
init(params);
}, params.delay);
}
}
window.Anim = Anim;
})();
Anim({
target: document.getElementsByClassName('d')[0],
drawFunc: (progress, element) => {
element.style.width = (progress * 70) + '%';
}
});
Anim({
target: document.getElementsByClassName('p')[0],
drawFunc: (progress, element) => {
element.style.width = (progress * 30) + '%';
}
});
.d, .p {
background-color: red;
height: 50px;
width: 0;
margin-top: 10px;
}
<div class="d"></div>
<div class="p"></div>
Related issue: How do I correctly clone a JavaScript object?
I build a game and have an issue.
My game looks for a few keydown which move the character.
I added an A* algorithm to let the players the option to move their character with a mouse click (It gives the keys for destination point).
My issue is:
The code is looking for keydown which allowing continuous click and the algorithm return the keys for destination point which should be keypress as per-key.
How should I simulate the keypress for this? (The main question is in AStarWalk function)
Code:
class Event {
constructor(engine) {
this.engine = engine;
this.engine.event = this;
this.focus = false;
this.pressedKeys = {};
this.events = {};
// - - - - - - - - - -
// Events
this.onKey('keydown', 'gameWindow', ['KeyA', 'ArrowLeft'], () => {
this.engine.player.movePlayer(1);
}); // Left
this.onKey('keydown', 'gameWindow', ['KeyW', 'ArrowUp'], () => {
this.engine.player.movePlayer(3);
}); // Up
this.onKey('keydown', 'gameWindow', ['KeyD', 'ArrowRight'], () => {
this.engine.player.movePlayer(2);
}); // Right
this.onKey('keydown', 'gameWindow', ['KeyS', 'ArrowDown'], () => {
this.engine.player.movePlayer(0);
}); // Down
this.onKey('keydown', 'gameWindow', ['KeyR'], () => {
this.engine.player.running = true;
}); // Start running
this.onKey('keyup', 'gameWindow', ['KeyR'], () => {
this.engine.player.running = false;
}); // Stop running
this.onKey('keyup', 'gameWindow', ['PrintScreen'], () => {
console.log('save a picture');
});
this.onKey('focus', 'gameWindow', () => {
this.focus = true;
}); // On focus the game
this.onKey('focusout', 'gameWindow', () => {
this.focus = false;
this.pressedKeys = {};
}); // Focus has out from game
this.onKey('mousedown','gameWindow', [0], (e) => {
let x = Math.floor(e.layerX / this.engine.mapSettings.pxPerSquare);
let y = Math.floor(e.layerY / this.engine.mapSettings.pxPerSquare);
let node = [x, y];
let path = this.engine.astar.findPath(node);
this.AStarWalk(path);
});
// - - - - - - - - - -
// addEventListener
// code - for keyboard
// botton - for mouse
for (let id in this.events) {
for (let type in this.events[id]) {
if (!this.events[id].hasOwnProperty(type))
continue;
document.getElementById(id).addEventListener(type, (event) => {
let e = event;
if (this.inArray(type, ['keydown', 'keyup']))
event.preventDefault();
// Define variables
let key = e.code || e.button; // e.keyCode || e.which;
// Check if the key has event
if (!this.events[id][type].hasOwnProperty(key) && !this.events[id]['keyup'].hasOwnProperty(key))
return;
// Check if the key already pressed
if (this.pressedKeys.hasOwnProperty(key) && type === 'keydown')
return;
// Do
if (type === 'keydown')
this.pressedKeys[key] = e;
else if (type === 'keyup') {
this.runCallbacks(this.events[id][type][key]);
}
else if (this.inArray(type, ['focus', 'focusout'])) {
for (let callback in this.events[id][type]) {
if (!this.events[id][type].hasOwnProperty(callback))
continue;
this.events[id][type][callback](e);
}
}
else if (this.inArray(type, ['mousedown', 'mouseup'])) {
this.runCallbacks(this.events[id][type][key], e);
}
});
document.getElementById(id).addEventListener('contextmenu', (e) => {
e.preventDefault();
});
}
}
// - - - - - - - - - -
// Thread
this.engine.thread.thread(true, 0, (1000 / this.engine.graphic.lastfps), () => {
for (let id in this.events) {
for (let key in this.pressedKeys) {
this.runCallbacks(this.events[id].keydown[key], key);
}
}
});
}
runCallbacks(array, key) {
let e;
for (let callback in array) {
if (!array.hasOwnProperty(callback))
continue;
e = (this.pressedKeys[key] instanceof Event) ? this.pressedKeys[key] : key;
array[callback](e);
}
}
inArray(key, array) {
for (let i in array)
if (array.hasOwnProperty(i) && array[i] === key)
return true;
return false;
}
onKey() {
let event = arguments[0];
let id = arguments[1];
let keyCode = (this.inArray(event, ['keydown', 'keyup', 'mousedown', 'mouseup'])) ? arguments[2] : null;
let callback = (!this.inArray(event, ['keydown', 'keyup', 'mousedown', 'mouseup'])) ? arguments[2] : arguments[3];
// Convert keyCodeList to an array based on keyCode.
if (keyCode != null) {
if (!keyCode instanceof Array)
keyCode = [keyCode];
}
// Create event id if is not exist.
if (!this.events.hasOwnProperty(id)) {
this.events[id] = {
keydown: {},
keyup: {},
focus: [],
focusout: [],
mousedown: {},
mouseup: {}
};
}
// Add event to an array
if (keyCode !== null) {
let done = false;
for (let k in keyCode) {
if (!keyCode.hasOwnProperty(k))
continue;
k = keyCode[k].toString();
for (let key in this.events[id][event]) {
if (key === k) {
if (callback !== undefined)
this.events[id][event][k].push(callback);
if (event === 'keydown')
this.events[id]['keyup'][k].push(() => { delete this.pressedKeys[k]; });
done = true;
break;
}
}
if (!done) {
if (callback !== undefined)
this.events[id][event][k] = [callback];
if (event === 'keydown')
this.events[id]['keyup'][k] = [() => { delete this.pressedKeys[k]; }];
}
}
}
else {
this.events[id][event].push(callback);
}
}
AStarGetKey(state) {
if (state === 'LEFT') return 'ArrowLeft';
if (state === 'UP') return 'ArrowUp';
if (state === 'RIGHT') return 'ArrowRight';
if (state === 'DOWN') return 'ArrowDown';
if (state === 'LEFTUP') return ['ArrowLeft', 'ArrowUp'];
if (state === 'LEFTDOWN') return ['ArrowLeft', 'ArrowDown'];
if (state === 'RIGHTUP') return ['ArrowRight', 'ArrowUp'];
if (state === 'RIGHTDOWN') return ['ArrowRight', 'ArrowDown'];
return false;
}
AStarWalk(path) {
for (let i in path) {
let key = this.AStarGetKey(path[i]);
if (!key) break;
// How to simulate the keypress per key which works with keydown ?
document.getElementById('gameWindow').dispatchEvent(new KeyboardEvent('keypress',{'code': key}));
}
}
}
Sorry for my English guys, is not my native language. I hope you will find the power to understand me ;-)