"Quick as a keypress, the pace at which we move

Question

"Quick as a keypress, the pace at which we move

Trying to explain my issue as clearly as possible. I have a Pacman game where the player controls Pacman using the keyboard. Pacman moves a constant unit in each direction and collision detection is based on a predefined map with obstacles marked by "-". Now, I want to introduce enemies that move randomly without keyboard input. The challenge is maintaining the speed control for enemies moving randomly compared to when controlled by the player. I am also trying to manage the frame rate using requestAnimationFrame but so far, my attempts at frame control haven't been successful. Here is the relevant section of my code:

function handleKeyPressed(e) {

   var PacMan = scene.getObjectByName('PacMan');
   gameSong.play();
   switch(String.fromCharCode(e.which))
   {
     case "w": if(!detectaColisao(PacMan.position.x, PacMan.position.y + SCALE))
          PacMan.position.y += SCALE;
       break;
     case "a": if(!detectaColisao(PacMan.position.x - SCALE, PacMan.position.y))
         PacMan.position.x -= SCALE;
       break;
     case "s": if(!detectaColisao(PacMan.position.x, PacMan.position.y - SCALE))
         PacMan.position.y -= SCALE;
       break;
     case "d": if(!detectaColisao(PacMan.position.x +SCALE, PacMan.position.y))
         PacMan.position.x += SCALE;
       break;

   }
}

function anima()
{
  var delta=clock.getDelta();
  orbitCamera.update(delta);

  requestAnimationFrame(anima);
  rendere

javascript three.js

Answer 1

Answer №1

The object moves at position.x with a value of 10, but it shifts every time

Are you suggesting that it moves too frequently before the animation handling kicks in?

The issue here lies in the asynchronous nature of keypressed compared to your render loop - it triggers whenever a key is continuously held down.

To address this, ensure that your pacman only moves once per animate() cycle.

Incorporate booleans triggered by keypress events to control movement within the animate() cycle, like so:

var u, d, l, r;
u = d = l = r = false;

function handleKeyPressed(e) {
  switch (String.fromCharCode(e.which)) {
    case "w":
      u = true;
      break;
    case "a":
      l = true;
      break;
    case "s":
      d = true;
      break;
    case "d":
      r = true;
      break;
  }
}

function handleKeyReleased(e) {
  switch (String.fromCharCode(e.which)) {
    case "w":
      u = false;
      break;
    case "a":
      l = false;
      break;
    case "s":
      d = false;
      break;
    case "d":
      r = false;
      break;
  }
}

function moveModel(_u, _d, _l, _r, obj) {
  if (_u && !detectCollision(obj.position.x, obj.position.y + SCALE)) {
    obj.position.y += SCALE;
  }
  if (_d && !detectCollision(obj.position.x, obj.position.y + SCALE)) {
    obj.position.y -= SCALE;
  }
  if (_l && !detectCollision(obj.position.x, obj.position.y + SCALE)) {
    obj.position.x -= SCALE;
  }
  if (_r && !detectCollision(obj.position.x, obj.position.y + SCALE)) {
    obj.position.x += SCALE;
  }
}

function animate() {
  var PacMan = scene.getObjectByName('PacMan');
  moveModel(u, d, l, r, PacMan);
  var delta = clock.getDelta();
  orbitCamera.update(delta);
  requestAnimationFrame(animate);
  render();
}

Remember to reset these booleans when keys are released using handleKeyReleased function. This ensures we move only once per animate cycle, avoiding multiple movements in a single keypress event triggering.

This approach introduces an abstraction layer as key pressed responses occur independently, regardless of where you are in the animation cycle. By utilizing flags to dictate movement actions within the model, we maintain control over its behavior per animate() iteration.

Answer 2

The object moves at position.x with a value of 10, but it shifts every time

Are you suggesting that it moves too frequently before the animation handling kicks in?

The issue here lies in the asynchronous nature of keypressed compared to your render loop - it triggers whenever a key is continuously held down.

To address this, ensure that your pacman only moves once per animate() cycle.

Incorporate booleans triggered by keypress events to control movement within the animate() cycle, like so:

var u, d, l, r;
u = d = l = r = false;

function handleKeyPressed(e) {
  switch (String.fromCharCode(e.which)) {
    case "w":
      u = true;
      break;
    case "a":
      l = true;
      break;
    case "s":
      d = true;
      break;
    case "d":
      r = true;
      break;
  }
}

function handleKeyReleased(e) {
  switch (String.fromCharCode(e.which)) {
    case "w":
      u = false;
      break;
    case "a":
      l = false;
      break;
    case "s":
      d = false;
      break;
    case "d":
      r = false;
      break;
  }
}

function moveModel(_u, _d, _l, _r, obj) {
  if (_u && !detectCollision(obj.position.x, obj.position.y + SCALE)) {
    obj.position.y += SCALE;
  }
  if (_d && !detectCollision(obj.position.x, obj.position.y + SCALE)) {
    obj.position.y -= SCALE;
  }
  if (_l && !detectCollision(obj.position.x, obj.position.y + SCALE)) {
    obj.position.x -= SCALE;
  }
  if (_r && !detectCollision(obj.position.x, obj.position.y + SCALE)) {
    obj.position.x += SCALE;
  }
}

function animate() {
  var PacMan = scene.getObjectByName('PacMan');
  moveModel(u, d, l, r, PacMan);
  var delta = clock.getDelta();
  orbitCamera.update(delta);
  requestAnimationFrame(animate);
  render();
}

Remember to reset these booleans when keys are released using handleKeyReleased function. This ensures we move only once per animate cycle, avoiding multiple movements in a single keypress event triggering.

This approach introduces an abstraction layer as key pressed responses occur independently, regardless of where you are in the animation cycle. By utilizing flags to dictate movement actions within the model, we maintain control over its behavior per animate() iteration.

Answer 3

Answer №2

It seems like a logical approach. Perhaps you could enhance their userData by including a variable such as "ghost.userData.timer" and incrementing it each cycle. Once it surpasses a predetermined coolDown value, for example 60, they can receive a random move and reset the timer to zero.

This method allows them to take steps at the intervals you specify.

Answer 4

It seems like a logical approach. Perhaps you could enhance their userData by including a variable such as "ghost.userData.timer" and incrementing it each cycle. Once it surpasses a predetermined coolDown value, for example 60, they can receive a random move and reset the timer to zero.

This method allows them to take steps at the intervals you specify.

"Quick as a keypress, the pace at which we move

Answer №1

Answer №2

Similar questions

Is it possible to implement pagination for API requests in a JavaScript and React environment?

Enhance the display in Angular2

What is the correct way to shut down a Node.js Express server?

AngularJS : "Executing successive promises" with additional functions interspersed

Toggle the Dropdowns and Submit Buttons on and off

Tips for dealing with event bubbling in React

concealing a section of a div using the jQuery sortable feature

What issue is there with the href attribute in the pug file?

Retrieve Header information when making a cross-domain AJAX request

Can this pagination task be accomplished without the use of backgrid?

Any suggestions on MySQL auto-inserted apostrophes?

Opening the three.js editor by accessing local files

For each variable, assign a value

Encountering problem while exhibiting server's response message within a modal popup in Angular 6

Here is a unique PHP snippet that demonstrates how to close the current browser window:

Converting table data to JSON using JavaScript, including rows for "parent" and "children."

Mapping with groups in JavaScript

What's the reason that app.use(app.static(...)); isn't functioning properly?

"Utilizing three.js to repeat a normal map texture effect

Building a custom order creation system for Paypal shopping carts with personalized user information