This video will teach you how to make a physics engine in the HTML Canvas API. The Physics engine in question will be demonstrated via a cannon example where the user will be able to aim a cannon with their mouse and can click to shoot cannon balls out of it. Not only will the cannon balls be confined to the laws of the physics engine, like gravity, but they will also be able to collide with both the canvas border & each other. The objects involved in the collision will then have their velocities changed so that the collision will be made to look as realistic as possible.
📚 Materials/References:
Link to the completed applications Code Pen page: codepen.io/LFCProductions/pen/PoWVBdw
Canvas Top Image: ia801504.us.archive.org/32/items/cannon_202104/cannon.png
Collision SFX: archive.org/download/metal-block_202104/metal-block.wav
Cannon Fire SFX: ia601404.us.archive.org/24/items/metal-block/Anti%20Aircraft%20Cannon-18363-Free-Loops.com.mp3
🧠 Concepts Covered:
- How to rotate the canvas & use the save and restore methods so that the rotation is only targeting a specific item and leaves the rest of the canvas alone.
- Collision detection between a ball & a rectangle, & a ball colliding with a ball.
- How to change a ball’s velocity in response to the collision so that the collision can be made to look realistic.
- How to send objects moving in a straight line based of an angle calculated with the ‘atan2’ function.
- How to make a ball effected by mass, elasticity, gravity & friction.
💻 Technologies used:
- HTML5 and the canvas API
- JavaScript (No jQuery)
- CSS (No Bootstrap)
If you enjoyed this video then please consider liking 👍 and subscribing. You would be doing me a huge favour if you did this and it would be greatly appreciated ❤️ by me. Likewise, if you have any queries or comments that you want answered. Then please, don’t hesitate post them down into the comments box below. I would love to hear back from you and will answer all of your questions to the best of my ability.
Stay awesome guys. Peace and love. ☮️❤️
#canvas#api#JavaScript#Java#Development#WebDev#physics#Maths#Trigonometry# Pythagoras #GameDev#PhysicsEngine
28 апр 2021
