What are some ways to slow down the speed of my animation?

Currently, I am creating a HTML5 game where I have implemented javascript to make my character move in response to the user pressing the arrow keys. The movement animation consists of 6 sprites.

However, I have encountered an issue where when I hold down the right arrow key, the character moves smoothly but appears to be moving too quickly. It's almost like a little bird flapping its wings so rapidly that it's challenging to make out the character's appearance.

Snippet of my code:

if (38 in keysDown) { // Player holding up
        if (character.y>=0)
        {
        character.y -= character.speed * modifier;
        position++;
        if(position > NUM_POSITION) 
                position = 0; 
        }
    }

In my code, I have implemented requestAnimationFrame and modifier to adjust the character's speed per second.

I am curious to know how others tackle the issue of a character appearing to move too rapidly. I am not referring to the character covering a large distance quickly because I can simply reduce the speed. I am referring to the character rapidly switching sprites, making it challenging to see unless it stops moving.

Answer №1

I came across a helpful jsfiddle example that demonstrates how adjusting the x variable can alter the speed of an animation.

Hopefully, this can serve as a useful illustration for your specific issue.

const element = document.getElementById("toChange");
let x = 0;

function makeVisible() {
    if (x === 1) clearInterval(timer);
    x += 0.05;
    element.style.opacity = x;
    element.style.filter = "alpha(opacity=" + (x * 100) + ")";
}

const timer = setInterval(makeVisible, 25);

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

The issue of the highlighted row not disappearing persists even after clicking on the adjacent table row

When selecting the gear icon for the menu option in a table row, I would like the background to turn yellow. I attempted the following code to highlight the table row: var view = Core.view.Menu.create({ model: model, menuContext: { ibmm: ibmm }, ...

Making a POST request with ajax in Django

I encountered some difficulties while attempting to send a POST request using ajax in Django. I have searched various resources, but have not yet found a solution. Below is the javascript code that I am using, following this guide: $.ajax({ url: &apo ...

When I upgraded my "react-router-dom" from version "5.2.0" to "6.14.0", I encountered a warning stating "No routes matched location"

After updating react-router-dom from version "5.2.0" to "6.14.0", I encountered a warning saying "No routes matched location." Initially, I received an error stating that "<Route> is only meant to be used as a child of <Routes>, not rendered d ...

Remove an array key from a MongoDB collection

I am currently working with mongoDB and my JSON data (stored under the table name "student") appears as follows: [{ name : "John", subjects:["English", "Maths"] }, { name : "Winsel" ...

"When a Vuex mutation modifies the state, the computed property fails to accurately represent the changes in the markup

I've encountered a perplexing issue with using a computed property for a textarea value that hasn't been addressed in a while. My setup involves a textarea where user input is updated in Vuex: <textarea ref="inputText" :value="getInputText" ...

Step-by-step guide to utilizing instance functions in AngularJS

Recently I started working with angular in my project but I'm struggling to figure out how to access instance functions from the original code. Here is a snippet of my function: $scope.collapsedrow = true; $scope.PlusClick = function(event) ...

What is the best way to differentiate the behavior of two identical classes using a single JavaScript function?

Can someone help me figure out how to make two circles move differently with the same JavaScript function? I'm new to JavaScript and struggling to differentiate between classes in HTML to achieve this. My goal is to have each circle move randomly and ...

Node.js QuickStart guide for authenticating with the Youtube API encounters error

Using node.js for a Discord bot, I encountered an issue with Google's API tutorial being outdated. Here is the link to their tutorial. The tutorial asks to select an "Other" option which no longer exists, now replaced by "desktop app". This was an ea ...

Personalized cursor that blinks while utilizing window.history.replaceState

While navigating between sub-pages, I utilize the window.history.replaceState method to replace URLs in my web application. However, I have noticed that my custom cursor briefly blinks (replaced by cursor: default) when the current URL is replaced with a n ...

Tips for integrating an HTML template into a React project

I'm finding it challenging to integrate an HTML template into React. The template I am using is for an admin dashboard with multiple pages. I have successfully copied and pasted the HTML code into JSX files and fixed any syntax issues. Here's wh ...

Firefox and IE are unable to make changes to cssRules

To update existing global CSS rules, I access the document.styleSheets property to locate the rule and make modifications. The selector can be modified by accessing the selectorText property. Sample CSS code: <style type="text/css"> .class { ...

Preserving client-side page state during page reloads in angular.js apps

I am currently developing a Single Page application using angular.js and I have encountered an issue that I am struggling to resolve. When performing a full page refresh in an angular app, how can we verify if the user still has a valid session? While Sta ...

Using a node module for Three.js path manipulation

Currently, I am in the process of learning Three.js and have set up a basic project that runs on a node.js server while importing Three.js as a node module. Although my setup is working fine, I find myself a little bit confused about whether this is consi ...

HTML Scripts: Enhancing Web Functionality

I have another question regarding executing a script (docs()) upon clicking on text. I attempted to use the following code: <p><span class="skill">Documentation can be found here.<script>docs()</script></span></p> Unfo ...

Issues with React's onSelect event functionality are persisting

Is there an event handler in React for the onSelect statement? For example, when a user highlights some text within a paragraph using their mouse, is there a way to trigger an event that extracts the highlighted text? import React, { Component } from &apo ...

A guide on retrieving styled text from a database and displaying it in TinyMCE

I am encountering an issue where I need to retrieve formatted text from a database and display it in my TinyMCE editor. The content stored in the database looks like this: <p style="text-align: justify;"><strong>Zdrav&iacute;m</strong ...

Trigger a series of child functions upon clicking the parent button

I am facing an issue where I am attempting to trigger the functions of each child component from a button click event on the parent component. I have tried using props and setting up a new function in the componentDidMount lifecycle method, but only the la ...

Unexpected token . encountered in Javascript: Uncaught Syntax Error. This error message is triggered when

As someone who is completely new to programming, I was given the task of creating a voting website for a class assignment. In order to store data locally, I managed to create variables and implement them using local storage: var eventName = document.getEl ...

Leveraging dependency injection in Angular 2+ with pre-loaded models

I desire the ability to create an instance of a model using a constructor while also providing injected services to that model. To clarify, I envision something like this: var book = new Book({ id: 5 }); // creates instance, sets id = 5 book.makeHttpCa ...

Enhance your webpage's body by zooming in using jQuery on Mozilla Firefox

I have a webpage and I would like to zoom its body when it loads using jQuery. However, the CSS zoom feature is not working in Mozilla Firefox. This is what I currently am using: $("body").css("zoom", "1.05"); It worked in Chrome, Opera, and Edge, but un ...