Unique key press responses for various key press events result in different actions being taken. Wondering how to achieve this? Explore

Question

Unique key press responses for various key press events result in different actions being taken. Wondering how to achieve this? Explore

As a newbie to JavaScript,

I have a question regarding multiple keypress events and how to assign them to different actions.

Here is the code snippet:

var imga = ["http://img1.jpegbay.com/gallery/004236128/1_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/2_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/3_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/4_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/5_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/6_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/7_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/8_t.jpg",
];
var imgb = ["http://img1.jpegbay.com/gallery/004236316/1_t.jpg",
"http://img1.jpegbay.com/gallery/004236316/2_t.jpg",
"http://img1.jpegbay.com/gallery/004236316/3_t.jpg"
];
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
if (e.keyCode == "65") {
    changeImage(-1);
}
if (e.keyCode == "66") {
    changeImage(-1);
}
};

function changeImage(dir) {
var img = document.getElementById("imgClickAndChange");
img.src = imga[imga.indexOf(img.src)+dir] || imga[(dir==1) ? 0 :         imga.length-1];
var img = document.getElementById("b");
img.src = imgb[imgb.indexOf(img.src)+dir] || imgb[(dir==1) ? 0 : imgb.length-1];

}

You can also access this on JSFiddle:

http://jsfiddle.net/k3wxhc58/39/

The setup involves two sets of images assigned to the A and B buttons, where pressing either button switches the displayed image.

I aim to extend this functionality to cover the entire alphabet.

Additionally, I am exploring if using THREE.js library for creating typographical animation with 3D models rendered from JSON would be a more efficient approach.

This project is my first dive into coding, so everything you see here is a result of my research and experimentation.

Appreciate your help!

J

javascript json three.js keypress

Answer 1

Answer №1

When it comes to keyboards, the best approach really depends on personal preference. Your method works well for a few keys, especially when using 'keydown' to trigger the action each time a key is pressed. Depending on various factors such as whether you want the action triggered once or continuously while the key is held down, the number of keys being monitored, and if they need to work simultaneously, different methods can be used:

If working with Three.js, a simple solution is to use THREEx.KeyboardState:

Alternatively:

If dealing with multiple buttons that should be pressed individually, the switch statement can be very effective: http://www.w3schools.com/js/js_switch.asp
```
switch(e.keyCode){
   case 65:
       //do this
       break; 
   case 66:
       ...
}
```

For pressing keys simultaneously, creating an object to track pressed keys and accordingly updating their status can be useful:

var down_keys = {}
document.addEventListener( "keydown" , function(e){
    down_keys[ e.keyCode ] = true;
})

document.addEventListener( "keyup" , function(e){
    down_keys[ e.keyCode ] = false;
})

A combination of these two approaches

Regarding the second question: Using slide-by-slide animation at high resolutions may not be practical and could limit frame rates. Personally, I believe utilizing three.js for animation purposes rather than images offers more advantages.

Answer 2

When it comes to keyboards, the best approach really depends on personal preference. Your method works well for a few keys, especially when using 'keydown' to trigger the action each time a key is pressed. Depending on various factors such as whether you want the action triggered once or continuously while the key is held down, the number of keys being monitored, and if they need to work simultaneously, different methods can be used:

If working with Three.js, a simple solution is to use THREEx.KeyboardState:

Alternatively:

If dealing with multiple buttons that should be pressed individually, the switch statement can be very effective: http://www.w3schools.com/js/js_switch.asp
```
switch(e.keyCode){
   case 65:
       //do this
       break; 
   case 66:
       ...
}
```

For pressing keys simultaneously, creating an object to track pressed keys and accordingly updating their status can be useful:

var down_keys = {}
document.addEventListener( "keydown" , function(e){
    down_keys[ e.keyCode ] = true;
})

document.addEventListener( "keyup" , function(e){
    down_keys[ e.keyCode ] = false;
})

A combination of these two approaches

Regarding the second question: Using slide-by-slide animation at high resolutions may not be practical and could limit frame rates. Personally, I believe utilizing three.js for animation purposes rather than images offers more advantages.

Unique key press responses for various key press events result in different actions being taken. Wondering how to achieve this? Explore

Answer №1

Similar questions

Reduce the size of several JavaScript files using webpack

Is it advisable to encapsulate my entire Express server within a TypeScript class?

Should Angular libraries be developed using Typescript or transpiled into JavaScript?

Animating the change in Slider value with Material-UI in React

When using node.js with express, the req.on('end') event is triggered, but the req.on('data') event does not fire

I keep encountering an error stating that parameter 1 for 'FormData' is not of type 'HTMLFormElement'. I am struggling to resolve this issue on my own. Can someone please assist me with fixing this problem?

Has Next.js incorporated a maximum cache size feature along with an invalidation algorithm like LRU?

Modifying array elements in JavaScript without explicit instructions

I have to arrange the results that I retrieve from MySQL in a specific order

Contrast 2 GET objects retrieved from separate controllers

Generate a customizable URL for my search bar

Transforming the initial character of a label element into uppercase

Creating a visual representation of data using Google Charts to display a stacked bar chart

Determine the sibling input value using jQuery in an ASP.NET MVC application

Inspect the json data to find a specific value and then determine the corresponding key associated with

Exploring the Process of Setting Up a Temporary Endpoint in Express

Making sure the axios API call is completed before rendering the child component with props

Adjust particle quantity

Unhandled error: 'this' is not defined within the subclass

What could be causing the border around my three.js canvas?