JQuery Game Tutorial | Moving a Character | 17




💚 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


32 responses to “JQuery Game Tutorial | Moving a Character | 17”

  1. 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!

  2. 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. 

  3. 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);

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. @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!

  9. 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.

  10. 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 Reply