Jumping for character

Hello, I am having an issue with making a jumping animation for my character. Here is the code:

export function handleKeyDown(event) {
    const Ita = document.getElementById("Ita");

    if (event.key === "w") {
        Ita.style.bottom = "120px";
    }

    setTimeout(() => {
        Ita.style.bottom = "30px";
    }, 400);
}

export function handleKeyDown(event) {
    const Ita = document.getElementById("Ita");

    if (event.key === "w") {
        Ita.style.bottom = "120px";
    }

    setTimeout(() => {
        Ita.style.bottom = "30px";
    }, 400);
}

Issue in here, if I hold on "w" key, the character will keep floating. How can I fix that? I tried with "keyup" event but it didn't work well. The picture is showing an example of "if we hold on the key"

40 Replies

Neσ许OP•12mo ago

Here is a video about it:

vince•12mo ago

I might get hate for this but have you tried asking ChatGPT? This seems like a thing it could solve pretty easily + you can ask for further explanation about it if need be. You can use it if you don't get an answer; wish I could help you more but this is outside what I do, sorry ☹️ Game looks really cool though!

Pi, a future fluent jp speaker•12mo ago

Cool project you are working at

Neσ许OP•12mo ago

GPT is kinda... :) Thanks mate. It was going to be a story game but then I said it can wait to myself, so I am going to make dino game :d Animations etc hard though, ngl

Pi, a future fluent jp speaker•12mo ago

Can't you do some conditioning? Like, fire the event just if the character is at a y position?

Neσ许OP•12mo ago

Well, I think that can work? thinking about it xd

Pi, a future fluent jp speaker•12mo ago

That is the only way I thought how to make it. I don't know other ;-:

Neσ许OP•12mo ago

okay so on keydown I will have setTimeout hmm I got your point but How am I suppose to keep the balance in k and l positions? what you said is okay but character is moving to fixed y position so let's say it hit to 200px then there is 199 198 and so on so user can jump again at below 200px which will fire the event again and cause to Ita float in the air

Pi, a future fluent jp speaker•12mo ago

Try logging at what position x or y is your character before it jumping

Neσ许OP•12mo ago

Isn't it moving with animation increases? from 0 to 200 for example It has animation Not a fixed move There is a transition is happening so yeah

Pi, a future fluent jp speaker•12mo ago

The event won't fire if your character isn't at a specific position. if (characterPosition === positionX(or Y) fire event You can log the x and y position of an element, I just forgot what was the method xD

Neσ许OP•12mo ago

Actually yeah Adding a bool Like let isFloating = false; if the distance from 0 to 200 is aka x + 1 smaller than 200, then isFloating = true and That doesn’t really help to make Ita stop floating though 🥹

Pi, a future fluent jp speaker•12mo ago

I'll try to make a sample code, wait a minute

Neσ许OP•12mo ago

What I mean here is; - do not letting player jump when it is “y + 1” aka 1px. - setting floating true, cause Ita still on floating state All good but has no effect on the code, okay I will be waiting Pi

vince•12mo ago

It's a tool like anything else is really

Neσ许OP•12mo ago

I know but It was not a good idea to try it It actually made the game freeze when Ita jumps 🥶 It was nonsense, so I decided to not use gpt Atleast on this project

vince•12mo ago

How I approach a chatgpt prompt is I'll basically say: "Hey, I need to do X. The constraints are A, B, and C. I've already tried D, E, and F. " <chatgpt gives you code that makes the game freeze> "Thanks, but the code you gave me makes the game freeze. I suspect it's because of G. Do you know of any other options to solve this?" <chatgpt gives you a solution that works> "Thanks! But I don't understand Z. Could you explain?" <chatgpt explains> "Hm, okay.. that makes sense. But it seems a bit inefficient or hacky to use this solution. Are there any other options?" ... Basically just keep doing this until you find something that you a) understand and b) works well. What you're doing is basically rubber duckying with chatgpt but instead of it being a rubber ducky it's an AI that has access to the whole internet and can retrieve information in milliseconds chatgpt does suck if all you do is expect it to give you a a good answer the first time which is what a lot of people assume it's going to do when it's not. You really need to "massage" it to get something good

Neσ许OP•12mo ago

I tried that but not like this

vince•12mo ago

Ah well that's unfortunate. Did it give you any avenues to research into?

Neσ许OP•12mo ago

Same thing with different code

Neσ许OP•12mo ago

So I decided to make a post about it On the screenshot, ChatGPT fully broke it Ita could jump only once And can’t jump again So I said “Alright. That’s all.”

vince•12mo ago

Yea I'm not even going to hold you chatgpt does suck for this, I've been trying as well I think I have a decent starting point though https://codepen.io/vince1444/pen/BabWKbp I'll rewrite this in a second but chatgpt gave me this:

const box = document.getElementById("box");
let canJump = true;

document.addEventListener("keydown", (event) => {
  if (event.key === "w" && canJump) {
    box.style.marginTop = `${parseInt(box.style.marginTop || 0) - 100}px`;
    canJump = false;

    setTimeout(() => {
      canJump = true;
    }, 500);
  }
});

const box = document.getElementById("box");
let canJump = true;

document.addEventListener("keydown", (event) => {
  if (event.key === "w" && canJump) {
    box.style.marginTop = `${parseInt(box.style.marginTop || 0) - 100}px`;
    canJump = false;

    setTimeout(() => {
      canJump = true;
    }, 500);
  }
});

I was then able to cross-reference that solution with solutions I found on StackOverflow when I googled javascript cooldown on key press: https://stackoverflow.com/questions/36594962/using-settimeout-to-add-cooldown-time-to-a-button

Coder_Carl•12mo ago

Im going to come in and suggest that you dont use JS to move characters around unless needed. just toggle a classname on/off the classname will have a keyframe animation that transform: translates the element as needed

vince•12mo ago

What's the difference between having the styling be done with js vs css in this case?

Coder_Carl•12mo ago

moving things with margin and location etc. uses more of the computer than just a css animation which is specifically designed to work with the DOM in a performant manner

vince•12mo ago

Ohhh I didn't know that, thanks!

Coder_Carl•12mo ago

its why you will see people use a transform + translate to move items rather than just setting a new top or left attribute we dont want to cause a reflow of the DOM unless needed doing transforms on position fixed / absolute elements wont impact on any other element on the page so we only cause a repaint to occur its always something to consider when doing this sort of thing one other thingsyou need to be aware of when handling animations in this way - wait for animation events (animationStart | animationEnd) before allowing something else to be triggered p.s. if you are using all of the cpu because you are causing repaints AND reflows of the entire DOM then you may experience choppiness in the movement of the character

vince•12mo ago

Thanks Carl! You actually helped me out a ton. If you get a second do you mind checking the codepen and seeing what you think of the performance? Edit: changed margin-bottom to translateY

Coder_Carl•12mo ago

unless you are bottleknecking and need some optimizing I will stay out of it further 😄 sounds like you have an idea where you are going. I do see that the codepen is just putting a mrgin-bottom you could do either of these

#box.jump {
  transform: translateY(-100px)
}

#box.jump {
  transform: translateY(-100px)
}

or and this one would require you to be resetting the animation count etc with js

#box.jump {
animation: 250ms ease-in 0s 1 normal both paused jump;
}

@keyframes jump {
  0%, 100%: {
transform: translateY(0px)
}
  50%: {
transform: translateY(-100px)}
}
}

#box.jump {
animation: 250ms ease-in 0s 1 normal both paused jump;
}

@keyframes jump {
  0%, 100%: {
transform: translateY(0px)
}
  50%: {
transform: translateY(-100px)}
}
}

vince•12mo ago

I have never seen those animation properties in my life 😂 though to be fair I don't ever use animations. Thanks a ton!

Coder_Carl•12mo ago

just stay away from animations if you havent used em 😄

vince•12mo ago

Why are they less performant / easy to mess up?

Coder_Carl•12mo ago

easy to mess up and there are gotchas

glutonium•12mo ago

a suggestion I'd give u is , instead of using html elements, use js canvas for making games canvas is more suitable for games u don't need to html elements to generate sprite also OOP helps a lot when making amy game. u don't need css either if u use canvas instead of using animation you'd be updating entities on each frame which is how it's actually done for games

Neσ许OP•12mo ago

Well it was for importing images

glutonium•12mo ago

u can also do dat with canvas xD

Neσ许OP•12mo ago

with src attribute Well, I didn't think of that at that moment aksjdakdjsads

glutonium•12mo ago

canvas has it ahaha it was something like

image = new Image()
image.src = "./path/to/file.extension"

image = new Image()
image.src = "./path/to/file.extension"

Neσ许OP•12mo ago

yeah hahaha I totally forgot it

glutonium•12mo ago

lmao

Gaming

Programming

Jumping for character