Is there an issue with the proper execution of keypresses/updates in the code

Question

Is there an issue with the proper execution of keypresses/updates in the code

I'm currently stuck while trying to develop a game in Javascript. My challenge lies in detecting keypresses and constantly checking if they are being held down to move the character. Below is the code I have been using:

var THREE;
var keys;
var update;
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var player_fov = 45;
var player_aspect = window.innerWidth / window.innerHeight;
var player_near = 0.1;
var player_far = 10000;
var player_camera = new THREE.PerspectiveCamera(player_fov, player_aspect, player_near, player_far);
var player_material = new THREE.MeshNormalMaterial({color: 0xd0bd4b});
var player_geometry = new THREE.BoxGeometry(1,1,1,1);
var player = new THREE.Mesh(player_geometry, player_material);


function INIT()
{
    scene.add(player);
    player_camera.position.z = 5;
    window.addEventListener('keydown', function (e) {
        keys.keys = (keys.keys || []);
        keys.keys[e.keyCode] = true;
    });
    window.addEventListener('keyup', function (e){
        keys.keys[e.keyCode] = false;
    });
    requestAnimationFrame(INIT);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer.render(scene, player_camera);
    if(keys.keys && keys.keys[87]) //w
    {
        player.position.y += 1;
    }
    if(keys.keys && keys.keys[65]) //a
    {
        player.position.x -= 1;
    }
    if(keys.keys && keys.keys[83]) //s
    {
        player.position.y -= 1;
    }
    if(keys.keys && keys.keys[68]) //d
    {
        player.position.x += 1;
    }
}

The movement isn't working properly despite pressing different keys. It should be an easy error to identify for experienced programmers. Is there something wrong with my understanding of event listeners or requestAnimationFrame? If so, please provide guidance on how to rectify it. Thank you.

javascript three.js addeventlistener requestanimationframe

Answer 1

Answer №1

Your code could use some improvements:

Make sure to call the INIT() function for the code to run.
Avoid using requestAnimationFrame in the INIT function as it doesn't need to run every frame.
Create a separate render() function to be called at the end of INIT or right after calling it, and include the requestAnimationFrame(render) inside this new function.
Consider using a javascript Object instead of an array for the keys.

Here is an example of how these changes could look:

var keys = {};
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var player_fov = 45;
var player_aspect = window.innerWidth / window.innerHeight;
var player_near = 0.1;
var player_far = 10000;
var player_camera = new THREE.PerspectiveCamera(player_fov, player_aspect, player_near, player_far);
var player_material = new THREE.MeshNormalMaterial({color: 0xd0bd4b});
var player_geometry = new THREE.BoxGeometry(1,1,1,1);
var player = new THREE.Mesh(player_geometry, player_material);

INIT();

function INIT()
{
  document.addEventListener('keydown', function (e) {
    keys = (keys || {});
    keys[e.keyCode] = true;
  });

  document.addEventListener('keyup', function (e){
    keys[e.keyCode] = false;
  });
  
    scene.add(player);
    player_camera.position.z = 5;
  
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
  
   render();
}


function render(){
    requestAnimationFrame(render);

    if(keys && keys[87]) //w
    {
      player.position.y += 0.2;
    }
    if(keys && keys[65]) //a
    {
      player.position.x -= 0.2;
    }
    if(keys && keys[83]) //s
    {
      player.position.y -= 0.2;
    }
    if(keys && keys[68]) //d
    {
      player.position.x += 0.2;
    }
    renderer.render(scene, player_camera);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js"></script>

Answer 2

Your code could use some improvements:

Make sure to call the INIT() function for the code to run.
Avoid using requestAnimationFrame in the INIT function as it doesn't need to run every frame.
Create a separate render() function to be called at the end of INIT or right after calling it, and include the requestAnimationFrame(render) inside this new function.
Consider using a javascript Object instead of an array for the keys.

Here is an example of how these changes could look:

var keys = {};
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var player_fov = 45;
var player_aspect = window.innerWidth / window.innerHeight;
var player_near = 0.1;
var player_far = 10000;
var player_camera = new THREE.PerspectiveCamera(player_fov, player_aspect, player_near, player_far);
var player_material = new THREE.MeshNormalMaterial({color: 0xd0bd4b});
var player_geometry = new THREE.BoxGeometry(1,1,1,1);
var player = new THREE.Mesh(player_geometry, player_material);

INIT();

function INIT()
{
  document.addEventListener('keydown', function (e) {
    keys = (keys || {});
    keys[e.keyCode] = true;
  });

  document.addEventListener('keyup', function (e){
    keys[e.keyCode] = false;
  });
  
    scene.add(player);
    player_camera.position.z = 5;
  
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
  
   render();
}


function render(){
    requestAnimationFrame(render);

    if(keys && keys[87]) //w
    {
      player.position.y += 0.2;
    }
    if(keys && keys[65]) //a
    {
      player.position.x -= 0.2;
    }
    if(keys && keys[83]) //s
    {
      player.position.y -= 0.2;
    }
    if(keys && keys[68]) //d
    {
      player.position.x += 0.2;
    }
    renderer.render(scene, player_camera);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js"></script>

Is there an issue with the proper execution of keypresses/updates in the code

Answer №1

Similar questions

What steps are involved in setting up a local server on my computer in order to create an API that can process http requests from Flutter?

Create a series of vertical lines using jQuery

What is the best way to receive several responses from a PHP file using AJAX?

Polymer: Basic data binding is not functional in the second element

Ajax loaded scripts are unable to access global variables

When navigating within a page, Firefox shows {{ }} tags while Chrome does not in AngularJS

What is the best way to add a checkbox tag in Rails using JavaScript?

two collided collada entities

The most effective method for incorporating a header and footer into an HTML page utilizing a variety of client-side frameworks

In TypeScript, both 'module' and 'define' are nowhere to be found

How to continuously stream and display an actively updating log text file from a server in real-time onto a web textbox, eliminating the need for webpage

What is the best way to secure videos and other static files with authentication in a next.js web application?

Searching recursively for keys with empty values in an array using Javascript

Vue.js will trigger the updated() method only when a particular array undergoes changes

Checking for the status of a checked box when the ::after pseudo-element is added after the box is marked

navigating through an array with a loop (for)

Having Trouble Redirecting to Another Page from My Ionic Framework Controller?

Guide on utilizing the disable feature in SortableJS for a Vue project

Tips for leveraging async and await within actions on google and API integration

What's with the lack of acknowledgment when I triumph in rock, paper, scissors, lizard, spock?