Having trouble moving a square diagonally when two keys are pressed simultaneously. Trying to create an if statement that detects both key presses at the same time and triggers the movement. However, all attempts have failed so far, leaving uncertainty about whether the x and y translations of the square will function properly. Additional information can be provided upon request.
JavaScript
// Function for handling key press events
function pressed() {
let squarePosY = 0;
let squarePosX = 0;
// Event listener for keydown
document.addEventListener("keydown", (event) => {
if (event.keyCode === 87) {
// Change background color to yellow
document.getElementById("w-key").style.backgroundColor = "yellow";
squarePosY -= 5;
anime({
targets: '#square',
translateY: squarePosY
});
} else if (event.keyCode === 83) {
document.getElementById("s-key").style.backgroundColor = "yellow";
squarePosY += 5;
anime({
targets: '#square',
translateY: squarePosY
});
} else if (event.keyCode === 65) {
document.getElementById("a-key").style.backgroundColor = "yellow";
squarePosX -= 5;
anime({
targets: '#square',
translateX: squarePosX
});
} else if (event.keyCode === 68) {
document.getElementById("d-key").style.backgroundColor = "yellow";
squarePosX += 5;
anime({
targets: '#square',
translateX: squarePosX
});
} else if (event.keyCode == 87 && event.keyCode == 65) {
squarePosX += 5;
squarePosY += 5;
anime({
targets: '#square',
translateX: squarePosX,
translateY: squarePosY
});
alert("worked");
}
});
// Event listeners for keyup to reset background color
document.addEventListener("keyup", (event) => {
if (event.keyCode === 87 ) {
document.getElementById("w-key").style.backgroundColor = "white";
}
});
document.addEventListener("keyup", (event) => {
if (event.keyCode === 83 ) {
document.getElementById("s-key").style.backgroundColor = "white";
}
});
document.addEventListener("keyup", (event) => {
if (event.keyCode === 65 ) {
document.getElementById("a-key").style.backgroundColor = "white";
}
});
document.addEventListener("keyup", (event) => {
if (event.keyCode === 68 ) {
document.getElementById("d-key").style.backgroundColor = "white";
}
});
}
// Start the animation
function startAnim() {
pressed();
}
CSS
#square {
width: 10px;
height: 10px;
background-color: black;
left: 50%;
bottom: 50%;
position: absolute;
}
.squareStartPos {
width: 8px;
height: 8px;
border: 1px solid black;
left: 50%;
bottom: 50%;
position:absolute;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="html.js"></script>
<link rel="stylesheet" href="css.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js" integrity="sha512-aNMyYYxdIxIaot0Y1/PLuEu3eipGCmsEUBrUq+7aVyPGMFH8z0eTP0tkqAvv34fzN6z+201d3T8HPb1svWSKHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body onload="startAnim()">
<div id="keyboard">
<div class="top-row"></div>
<div class="button-key button" id="w-key"></div>
<div id="bottom-row">
<div class="button-key button" id="a-key"></div>
<div class="button-key button" id="s-key"></div>
<div class="button-key button" id="d-key"></div>
</div>
</div>
<div class="square" id="square"></div>
<div class="squareStartPos"></div>
</body>
</html>
Attempted to combine keyCodes using '&&' in the if statement without success.