• Thursday , 2 April 2020

JQuery Game Tutorial | Moving a Character | 17

Code Canyon



💚 https://paypal.me/jream 💚
This is a quick JQuery Game Tutorial. We aren’t going crazy, but we’ll use HTML, CSS and JavaScript to make a little character move with the arrow keys. If you want to do further building, this could give you some idea as to handle Key Strokes in JavaScript.

http://jream.com/learning

Original source

3d Ocean

Related Posts

32 Comments

  1. Daniel Ardeleanu
    March 28, 2018 at 12:09

    hello, can you put please the code.
    I try exactly like you but when i open the html file, my character does not appear, and also the box does not appear, what i can do?

  2. David Benjamin
    March 28, 2018 at 12:09

    how about a tutorial showing how to make a character move with a dice roll(); PLEASE!

  3. Sofia Wiseley
    March 28, 2018 at 12:09

    JREAM Ive done this but now I want my character (its a spaceship) to shoot bullets at asteroids. . Everything I look at to help me is in html but I want it to be in Jquery just like this code. Please Help!

  4. Pathfinder
    March 28, 2018 at 12:09

    Thank you!

  5. Dr. Andromestrein
    March 28, 2018 at 12:09

    It isn't works.

  6. deadly 3652
    March 28, 2018 at 12:09

    dident work 🙁

  7. Nicholas Eli
    March 28, 2018 at 12:09

    No offense but this is not a good way to do character movement. should be using setInterval() with a loop . Also if a person spams any of their keys they have no control of when the character stops until all key stroke counts have been fulfilled. 

  8. Caleb Prenger
    March 28, 2018 at 12:09

    This is not the ideal way to make games in JavaScript.  It is done in the canvas tag, and a loop runs at 60 times a second which is done with requestAnimationFrame, or setInterval(theFunc(), 1000/60);

  9. Tokume Tensai
    March 28, 2018 at 12:09

    how come position is used in CSS?

    position: top -2??!?

  10. Microwave Hate Machine
    March 28, 2018 at 12:09

    im stuck at 3:06, I have everything the same but when I load it the player does not load… 

  11. Francis Tettey
    March 28, 2018 at 12:09

    elegance in simplicity, thanks 

  12. Mike Moss
    March 28, 2018 at 12:09

    Thanks man, took me a few days to find this but man, you explained this really well. +Sub

  13. heavymetalplease
    March 28, 2018 at 12:09

    Thanks mate, very helpful

  14. Seth Mann
    March 28, 2018 at 12:09

    Thank you so much, this tutorial was extremely helpful. I am just starting out with Javascript and this tutorial got me unstuck. I find jQuery makes more sense to me than just using Javascript.

  15. mendel keller
    March 28, 2018 at 12:09

    "i dont know how to explain that"….

  16. Niels Goedegebure
    March 28, 2018 at 12:09

    Tip: use the CSS3 Transition to make the movements smooth.

  17. John Doe
    March 28, 2018 at 12:09

    I DON'T KNOW HOW TO EXPLAIN THAT
    oh my god you made my day

  18. Minson
    March 28, 2018 at 12:09

    You could just use .css('left', '-=20px'); I think.

  19. confirmedleek
    March 28, 2018 at 12:09

    meh fuck it just wack an e in there!

  20. pdiddles03
    March 28, 2018 at 12:09

    If any of you want to know where to progress after this, as in making a tile based map for the character to move around and it's collision detection, feel free to Mail me here on youtube and I will be happy to help.

  21. James Bond
    March 28, 2018 at 12:09

    omg you make shit simple to understand 😀 please make more videos!

  22. dj miXin
    March 28, 2018 at 12:09

    W O W :]

  23. pdiddles03
    March 28, 2018 at 12:09

    The point is, your learning a whole different language that basically doesn't even exist. Your writing more code to make a game in jquery like this then just writing it in simple javascript. Stick with pure javascript. Using it for websites such as expanding menus I can understand, but if your going to make a game this is pointless.

  24. Another Games
    March 28, 2018 at 12:09

    Can you make a game tutorial playlist ready pls?

  25. pdiddles03
    March 28, 2018 at 12:09

    This is not a good way to do this. Using Jquery is more complicated then just plain javascript. The code he typed there was hard. Using normal javacsript all you do is create a variable using the getElementById function, lets call him "guy" and using "guy.style.left = "5px""; that is much more simple then using jquery which adds a lot of unneeded frustration and new syntax to javascript.

  26. Selcuk Cura
    March 28, 2018 at 12:09

    @JREAMdesign it would be great if you could demonstrate how to use sprites for the character and how to add object collisions; i'm completely lost on how to do so. Great tutorial by the way!

  27. Mak Jacobsen
    March 28, 2018 at 12:09

    Is it possible to make a button that trigger keypress? such as keycode 123(fullscreen)

  28. JREAM
    March 28, 2018 at 12:09

    @Zaillothen ONLY IF YOU A FINE LOOKING HUNNY BOO JK JK

  29. Tony H
    March 28, 2018 at 12:09

    Wow, will you adopt me?

  30. On belangerijk
    March 28, 2018 at 12:09

    @JREAMdesign

    I don't really get reflows and how to prevent it. But maybe this video would help you
    watch?v=q_O9_C2ZjoA around 6:30

    it's an interesting video

  31. David GL
    March 28, 2018 at 12:09

    Minute 3:57, talking about function(e) on the keydown: "e" is NOT a function. "e" is the EVENT being thrown by the FUNCTION keydown. What function(e) is doing, is to capture that event so you can manage it.

  32. Venistro
    March 28, 2018 at 12:09

    Can you make a Tutorial how I can make a animation with jQuery? e.g. a run animation of a animal.
    Or a tutorial how I can make a countdown like this /watch?v=6-RQ1i8i9_E (the Apple counter)
    It would be great =)

    PS: I like all your videos =)

Leave A Comment

You must be logged in to post a comment.