HTML5 Game 2 – Part 3: Rectangles Drawing and Colliding

adminSeptember 26, 2024156 views

Next: http://youtu.be/8QKaxOMGxAM
Source Version: http://lifeofadreamer.com/html5-game-framework-part-2-rectangles-and-collision/

Showing collision and contains and drawing the rectangle to the canvas.

Twitter ► http://brentfarris.com/twitter
Website ► http://brentfarris.com
GitHub ► http://brentfarris.com/github

source

previous post

Auresia – Raíces Official Music Video

next post

Listen/download on any music app!!

15 comments

@lovefashro September 26, 2024 - 4:46 pm

Thank you for the tutorial. The problem is there is although i get no error, and I don't see the rectangle. Also, how come the rectangle is black if you didn't add any color in the rect.Draw function?

@greendragon3351 September 26, 2024 - 4:46 pm

how do I make my character move I did ctx.drawimage(guy,10,10); what do I do to get the x and y of it

@vgza September 26, 2024 - 4:46 pm

Why on earth would you put a DRAW method inside the rectangle? Create another class that will do the drawing for all figures. Make your game a little bit more OOP ;)

@K0NM September 26, 2024 - 4:46 pm

nice tutorials, but would you mind getting your mic out of your mouth?

@justinfransen2195 September 26, 2024 - 4:46 pm

Very nice tutorial! This intersects function is really important! It made effects like gravity, bounce-effects and much more possible for me. Thanks!

@playboycity September 26, 2024 - 4:46 pm

Hi im having the same problem as arjun malhotra and ph33lz had, can I get the code for this somewhere? I could not find it on your website, I couldn't get this to work and i can't understand why, it seem to make logical sense......please help !

@trouncer123 September 26, 2024 - 4:46 pm

could it be the Rectangle function should be (x, y, width, height) and not (x, y, w, h)

@BrentFarris September 26, 2024 - 4:46 pm

I see that the other comment was witheld by author, did you solve it?

@BrentFarris September 26, 2024 - 4:46 pm

:) if you don't mind dropping the framework code that you have onto the pastebin website and sending the url over to me I could check it out there and see what the issue might be.

@TheHufflepuff333 September 26, 2024 - 4:46 pm

hey....ty soo much for ur tutrials....... but i have been stuck at the same thing as ph33lz since past week it is getting very frustrating..... i have seen the video 3 and 4 numeric times now but just cant find the error . The console shows no error but the chrome just doesnt show any rectangle(s)......

@BrentFarris September 26, 2024 - 4:46 pm

:D woot! It's always great when bugs are smaller things haha. Yeah working in a language without auto-complete like JavaScript sometimes presents the same problems for me too :P :) Thanks for the support! I do have a new series to expand on this one planned out and have almost finished the prototype. Hopefully I can start tutorializing it this weekend.

@bobonthenet September 26, 2024 - 4:46 pm

I'm not sure how I missed it but that was it. Thanks for the feedback and for posting these great lessons.

@BrentFarris September 26, 2024 - 4:46 pm

Did you finish video #4 in the playlist named "HTML5 Game 2 - Part 2: Rectangles Intersection (REDO)" This is the video that goes over how to setup the intersects function... on that note you said I just noticed that you said "Intersect". The function we setup should have been "Intersects". :) Hopefully its as easy as fixing that, if not let me know and I'd be happy to help out!

@bobonthenet September 26, 2024 - 4:46 pm

I'm getting an Uncaught TypeError: Object [object Object] has no method 'Intersect' did I miss something from earlier?

@BrentFarris September 26, 2024 - 4:46 pm

It still works for me because I misspelled it in the declaration as well. I will send you a link to the finished code in a message. Look at the rectangle section to compare your code.

Comments are closed.