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

Neo•5mo ago

Here is a video about it:

vince•5mo 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 (I'll eat who dont correct me•5mo ago

Cool project you are working at

Neo•5mo 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 (I'll eat who dont correct me•5mo ago

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

Neo•5mo ago

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

Pi (I'll eat who dont correct me•5mo ago

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

Neo•5mo 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 (I'll eat who dont correct me•5mo ago

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

Neo•5mo 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 (I'll eat who dont correct me•5mo 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

Neo•5mo 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 (I'll eat who dont correct me•5mo ago

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

Neo•5mo 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•5mo ago

It's a tool like anything else is really

Neo•5mo 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•5mo 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

Neo•5mo ago

I tried that but not like this

vince•5mo ago

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

Neo•5mo ago

Same thing with different code

Neo•5mo 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•5mo 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•5mo 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•5mo ago

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

Coder_Carl•5mo 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•5mo ago

Ohhh I didn't know that, thanks!

Coder_Carl•5mo 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•5mo 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•5mo 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•5mo 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•5mo ago

just stay away from animations if you havent used em 😄

vince•5mo ago

Why are they less performant / easy to mess up?

Coder_Carl•5mo ago

easy to mess up and there are gotchas

glutonium•5mo 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

Neo•5mo ago

Well it was for importing images

glutonium•5mo ago

u can also do dat with canvas xD

Neo•5mo ago

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

glutonium•5mo 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"

Neo•5mo ago

yeah hahaha I totally forgot it

glutonium•5mo ago

lmao

Gaming

Programming

Jumping for character