Нужно сделать небольшую игру, где два игрока гоняются друг за другом. Игра без канвас и фреймворкаов. Есть вот такой код, но когда один движется, второй не может. Как сделать чтоб они могли двигаться синхронно.
ИГровое поле 800 н 800, как сделать чтоб они за него не заезжали?
'use strict'
let firstSquare = document.querySelector('.firstSquare');
let secondSquare = document.querySelector('.secondSquare');
let gameArea = document.querySelector(".game");
function buttonClicked() {
let firstSquareParameters = document.querySelector("#firstPlayer").value;
let secondSquareParameters = document.querySelector("#secondPlayer").value;
document.querySelector(".form").classList.add("disabled");
gameArea.classList.add("active");
firstSquare.style.height = +firstSquareParameters + 'px';
firstSquare.style.width = +firstSquareParameters + 'px';
secondSquare.style.height = +secondSquareParameters + 'px';
secondSquare.style.width = +secondSquareParameters + 'px';
}
window.addEventListener('keydown', function(e){
if(e.keyCode == 38){
let goUp = firstSquare.offsetTop;
firstSquare.style.top = goUp - 10 + "px";
}
if(e.keyCode == 40){
let goDown = firstSquare.offsetTop
firstSquare.style.top = goDown + 10 + "px"
}
if(e.keyCode == 37){
let goLeft = firstSquare.offsetLeft
firstSquare.style.left = goLeft - 10 + "px"
}
if(e.keyCode == 39){
let goRight = firstSquare.offsetLeft
firstSquare.style.left = goRight + 10 + "px"
}
if(e.keyCode == 87){
let moveUp = secondSquare.offsetTop;
secondSquare.style.top = moveUp - 10 + "px";
}
if(e.keyCode == 83){
let moveDown = secondSquare.offsetTop
secondSquare.style.top = moveDown + 10 + "px"
}
if(e.keyCode == 65){
let moveLeft = secondSquare.offsetLeft
secondSquare.style.left = moveLeft - 10 + "px"
}
if(e.keyCode == 68){
let moveRight = secondSquare.offsetLeft
secondSquare.style.left = moveRight + 10 + "px"
}
})