Having trouble with the Keydown event - the image isn't moving as expected

Something seems off with my code. I have an image displayed on a canvas, but when I press the specified key, nothing happens. Can you help me figure out where I went wrong?

  let img = document.getElementById("ship");
let player = {
  x: 375,
  y: 550,
  w: 50,
  h: 50,
};
requestAnimationFrame(draw);

function draw() {
  //Logic
  ctx.drawImage(img, player.x, player.y, player.w, player.h);
  //Draw
  ctx.clearRect(0, 0, cnv.width, cnv.height);
  requestAnimationFrame(draw);
}


document.addEventListener("keydown", move);
function move(event) {
    console.log(event.code);
  if (event.code === 39) {
    player.x = player.x + 50;
  } else if (event.code === 37) {
    player.x = player.x - 50;
  } else if (event.code === 40) {
    player.x = player.y - 50;
  } else if (event.code === 38) {
    player.x = player.y + 50;
  }
}

Answer №1

Remember, when dealing with the event.code, it is important to note that it is a DOMString, not a number like event.keyCode.

For example, if you press the left arrow key, you should expect event.keyCode === 37 and event.code === 'ArrowLeft' to be true.

If you encounter any issues, consider changing either code to keyCode, or adjusting the comparison values for event.code. This small tweak should solve your problem :)

Cheers!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using React Axios to Send Only the State Value of a Prop to the Backend

After successfully passing my parent state to my child component as a prop named title, I encountered an issue while trying to make a put request using axios with the value of that prop. The problem arose when attempting to use this prop's value in th ...

Ways to transfer a value to another component in React

Currently, I am working on a project where users can add, edit, or delete movies from a list. While the addition and deletion functionalities are working fine, I am facing challenges with the editing feature. In my Movie component, I have included a text i ...

Ways to verify if an element includes a specific class in JavaScript

When the mouse hovers over each paragraph within the DIVs with the "change" class, the font color should turn red, and revert back to black when the mouse is not on them. Here's my current code: var paragraphs = document.getElementsByTagName('p& ...

Guide to creating a unit test for canActivate guard in Angular routing

Seeking guidance on writing a unit test for angular routing with the canActivate guard. Encountering an error when using the guard on routes, but no error is thrown without it. Would appreciate a suitable example along with an explanation. app-routing.mod ...

A guide on retrieving bytecode from a specific PDF using Angular

Can anyone help me with extracting the bytecode from a selected PDF file to save it in my database? I keep encountering an error stating that my byte is undefined. Could someone please review my code and identify what might be causing this issue? I attemp ...

Bizarre Actions of a JavaScript Object

Currently, I am in the process of developing a Multiplayer game using Phaser and Eureca io. My main focus right now is on perfecting the authentication of players and their controls. To achieve this, I have implemented a method on the server that retrieves ...

What is the best way to update the color of a label in a Mantine component?

When using the Mantine library, defining a checkbox is done like this: <Checkbox value="react" label="React"/> While it's possible to change the color of the checkbox itself, figuring out how to change the color of the label ...

Prevent MUI Autocomplete from closing when the option menu is opened with blur

Seeking assistance with modifying an autocomplete menu to include a dropdown for each item. Issue arises after trying to open the additional menu as it triggers an immediate closure of the autocomplete. For reference, attached is an image showcasing the i ...

AngularJS: handling multiple asynchronous requests

When I make multiple ajax calls in my code, I noticed that the API is only reached after all the ajax calls have been executed. Below you can see the JavaScript code: function test = function(){ var entity = {}; entity.Number = 1; ...

Issue detected: Click event for Backbone not properly registered

Hey there, I'm new to Backbone.js and having some trouble with a login feature. Despite initiating the view, I can't seem to get the click event to fire during an ajax call for logging in. Any ideas on what I might be doing wrong? I've even ...

Removing an element from the parent/master array after splicing the copied array

My array setup includes a master array called the parent array. When the page loads, a PHP array encoded in JSON with information about every user on the site is assigned to a JavaScript variable - var all_users = <?php echo $users;?>;. Upon logging ...

Why isn't the page redirecting if the query is unable to locate the user?

Why does the application freeze when it fails to find a user, instead of redirecting to the main page? How can this issue be resolved? User.findOne({_id: userid}, function(err, user) { if(err) { res.redire ...

Show each text field individually in JavaScript

Is it possible to display text fields one by one upon button click? Initially, all text fields are hidden, but when the button is clicked, they should be displayed one after another with their visibility property set to visible? This is what I have attemp ...

Execute HTML code within a text field

Is it possible to run html code with javascript inside a text box, similar to w3schools.com? I am working solely with html and javascript. Thank you. For example, I have two text areas - one for inserting html, clicking a button to run the code, and displ ...

Does the useState hook have any connection to hoisting in React?

I am relatively new to React.js and JavaScript, currently working on a project where I need the ability to manually update my components as needed, due to limitations with a third-party library. After doing some research, I came across a pattern on the of ...

Sending an array from the front-end to the back-end in Laravel with JavaScript

I am experiencing difficulty passing a objs array to a function in a Laravel controller using ajax. Unfortunately, I am not receiving any data after the post request. <script> var itemCount = 0; var objs=[]; $(document).read ...

"Expo Securestore is encountering an issue where it is unable to store the user ID and token following authentication

I am currently working on securely storing the userId and token in SecureStore. I have successfully retrieved the token from SecureStore on the next screen, but for some reason, I am unable to see the userId. const doUserLogIn = async() => { try { ...

Cannot assign type void to 'Intrinsic Attributes & Dispatch<SetStateAction<>>'

Just starting out with typescript and ran into this error: Error :Type '{ setTasks: void; }' is not assignable to type 'IntrinsicAttributes & Dispatch<SetStateAction<IStudy[]>>'. Property 'setTasks' does not e ...

Is there a way to stop a setTimeout function in React before it is triggered?

In my application, I have set up a functionality where pressing a button starts the clock countdown. If no action is taken within 23 seconds (23000), the state changes to "this.state.user". This part is working correctly. However, if you click on the elem ...

Transferring a JavaScript variable to JSP using AJAX

I'm struggling to figure out the correct syntax to pass a JavaScript variable named "textVal" to a jsp file. Here is my code snippet: function show(textVal){ AJAX.onreadystatechange = handler; AJAX.open("POST","service.jsp",true); AJAX.setR ...