💚 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”
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?
how about a tutorial showing how to make a character move with a dice roll(); PLEASE!
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!
Thank you!
It isn't works.
dident work 🙁
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.
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);
how come position is used in CSS?
position: top -2??!?
im stuck at 3:06, I have everything the same but when I load it the player does not load…
elegance in simplicity, thanks
Thanks man, took me a few days to find this but man, you explained this really well. +Sub
Thanks mate, very helpful
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.
"i dont know how to explain that"….
Tip: use the CSS3 Transition to make the movements smooth.
I DON'T KNOW HOW TO EXPLAIN THAT
oh my god you made my day
You could just use .css('left', '-=20px'); I think.
meh fuck it just wack an e in there!
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.
omg you make shit simple to understand 😀 please make more videos!
W O W :]
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.
Can you make a game tutorial playlist ready pls?
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.
@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!
Is it possible to make a button that trigger keypress? such as keycode 123(fullscreen)
@Zaillothen ONLY IF YOU A FINE LOOKING HUNNY BOO JK JK
Wow, will you adopt me?
@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
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.
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 =)