Add exact physics in order to give the game a more natural look.
- [Instructor] Now in the previous section we've added…this basic logic, the collision,…which checks if the ball itself is outside the perimeter…of the rectangle which surrounds the brickElement.…Then we can determine that they haven't collided.…Now we need to add the more complex logic codes,…so we're going to change it a bit.…I'm going to paste some code,…and we're going to discuss it.…Now, the code that I pasted, although it looks scary,…it isn't so scary.…
It's supposed to make the reading of the physics code…much easier, given that we have a name…for each one of the borders.…So I've created a leftBorder,…a rightBorder, topBorder, and bottomBorder…variables for the hitElement.…The hitElement will replace the brickElement,…which we used in the last section because…checkCollision function more general…since we're going to use it on the paddle as well.…So leftBorder basically takes the x value,…takes the width of the element,…and divides it by two.…
This way we'll get the left border.…rightBorder, same thing, we take the x value…
Note: This course was created by Packt Publishing. We are pleased to host this training in our library.
- Playing sounds in various browsers using SoundJS
- Tweening objects using TweenJS
- Creating graphic assets and basic animations
- Game stage creation and object positioning
- Adding the basic game logic
- Add the game physics
- Adding mouse and keyboard controls
- Debugging with breakpoints in Chrome
- Debugging on Android and iOS
- Character movement and input handling