HTML5 Canvas - Create 5 Games, 5 Projects, and Learn JavaScript [Video]
Video
Video
$124.99
Subscription
$15.99
$10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
What do you get with video?
What do you get with video?
What do you get with Audiobook?
What do you get with Exam Trainer?
Video
$124.99
Subscription
$15.99
$10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
-
Free ChapterIntroduction to Drawing using JavaScript on HTML5 Canvas Element
- HTML5 Canvas Introduction
- WebDeveloper Setup Resources
- Start Drawing on Canvas with JavaScript
- Basics of Drawing on Canvas
- Color Units and Options for Line and Fill Color within Canvas Objects
- Strokes and Lines: Drawing More Objects on Canvas
- Draw Arcs and Circles
- Add Text to Canvas JavaScript
- Canvas Drawing: Draw a StickMan Challenge
- Options and How to Draw Line Styles on Canvas
- Using Images - Image Options Canvas HTML5 JavaScript Drawing
- Color Gradients and Styling Fun
- Applying Text Shadows to Text Content Within Canvas
- How to Use Save and Restore
- Scaling Reverse Text: Mirror Your Text Content
- Creating Canvas Animations using JavaScript
- Project: How to Create Image Rotator
- Color Gradients and Styling Fun
-
Battle Game using HTML5 Canvas and JavaScript
- Battle Game Introduction
- Game Setup: How to Set up and Draw HTML5
- How to Draw Paths on Canvas: Game Prep
- How to Draw Arcs and Circles on Canvas
- How to Make Game Animation with Canvas HTML5 JavaScript Animation Frame
- Make the Game Interactive with Arrow Keys and Keyboard Event Listener Move
- How to Add a Second Player to Your HTML5 Canvas Game
- How to Set Movement Conditions and Boundaries for Players in the Game
- How to Add Shooting with Keypresses Player Event Listeners
- How to Add Collision Detection Objects within HTML5 JavaScript Game
- How to Add Player Scoring within Your JavaScript HTML5 Game
- How to Reset Game and Restart the Game Values
- HTML5 Game Code: Game Tweaks and Updates
- How to Make an Opponent in HTML5 Game: Opponent Brain Logic
- Adding Opponent Brain Logic 2: Making the Player Move Within the Game
- How to Add Opponent Attack Mode to Improve Your Gameplay
- How to Add Game Tweaks and Adjustments to Your HTML5 Game
- Game Code Review and Section Code Conclusion
- Game Next Steps: Make 2 Autonomous Players in HTML5 Canvas Battle Game V2
-
Create a Simple Interactive HTML5 Canvas PONG Game
- HTML5 Canvas PONG Game Introduction
- HTML5 Pong Setup of HTML5 Game Board
- How to Draw More Shapes on Canvas
- HTML5 Canvas Game Setup: Keyboard Interaction
- How to Add Second Object on Screen for Pong Game Online
- HTML5 Pong Game Setup Animations: Animation Frames
- Adding Collision Detection Between Ball and Paddles in HTML5 Pong
- HTML5 Pong: Adding Bouncing Ball
- HTML5 Canvas Pong Game: Final Game Tweaks
- Pong Game Code Review
-
HTML5 Canvas Game Bubble Popper JavaScript Game
- Creating a Bubble Popping Game with Canvas: Introduction to Bubble Popper
- Set Up HTML Canvas for Bubble Popping Game
- How to Create Bubbles on Canvas Gradient Fill
- Bubble Popping Game: Generate Bubbles
- Game Objects Animations: Moving Bubbles HTML5
- Adding More Bubbles: Creating Dynamic Content
- Adding Mouse Clicks on Canvas Clickevents
- Mouse Click Collision Detection
- Creating Gameplay HTML5 Canvas Game: Multiple Array Collision Detection
- Game Values and Gameplay: Adding Game Scoring Canvas
- Final Code Review: Bubble Popper
-
Falling Object Catcher Game: HTML5 Canvas and JavaScript
- Introduction: Catcher Game
- Set Up HTML Code game for HTML5 canvas
- How to Create JavaScript Elements
- Adding Keyboard Event Listeners
- Gameplay: Add and Drop Random Items
- Gameplay: Adding Dynamic Moving Content: Move Random Objects
- Add Colors and Set hazards to Increase Gameplay
- Game Interactions: Collision Detection HTML5
- Making Game Interactive: HTML5 Canvas Game Collision Actions
- Gameplay Scoring and Keeping Count
- Adding Game Controls
- How to Set Restart for Game and Game End: Start Game Option
- HTML5 Canvas Catcher Game Code Review
-
JavaScript HTML5 Breakout Game: Block Breaker
- Brick Breaker Game Introduction
- HTML5 Canvas and JavaScript Breakout Game Setup
- How to Set Up Player Paddle for Breakout Game
- Adding Player Movement: Player Movement KeyPresses Event Listeners
- Player Interactions Movement and Animations: Move Player Paddle
- Mouse Event Listeners for Player Movement: Mouse Movement Player
- Breakout Game: Adding Ball Movement: Add a Bouncing Ball
- Dynamic Content and Interactive Objects on Canvas: Collision Detection
- Set Up Game Board: More Bricks to Break: Add Bricks to Screen
- Breakout Game Interactive Bricks: Update Bricks
- Gameplay and Game Win Conditions: Scoring and Winning
- Adding Final Game Updates and Tweaks
- HTML5 Canvas Game Debugging: Bug Fixes and Tweaks
- How to Set Up Bonus Content and Next Steps for Gameplay
- Game Content Making Movement: Ball Speed Update
- Final Game Code Review
-
Course Questions and Answers: Useful Code Snippets and Code Examples
About this
video
This course goes over the features of HTML5 in a way that will help you quickly implement the concepts in interesting projects. You'll learn how to draw elements on Canvas and add keyboard event listeners for arrow keys and player interaction. A smooth animation is very critical for game play, and this course goes on to explain it in great detail. You will also learn other essentials required for gaming, such as scoring and applying automation to player moments.
The games involved in the course are as follows:
#1 HTML5 Canvas Pong: Hit the ball between 2 players on screen
#2 HTML5 Canvas falling items catcher: Catch items before they hit the bottom of the screen
#3 Bubble popper with mouse clicks: Click the bubbles as they appear randomly on the screen
#4 Brick breakout game: A version of the classic brick breaker game
#5 Battle Bots game on Canvas: Two autonomous players or take control and have 2 players using the keyboard
By the end of the course, you will have mastered the basic techniques to create a game using HTML5 Canvas. All you would have used to achieve this feat are HTML and JavaScript.
All resources and code files are placed here: https://github.com/PacktPublishing/HTML5-Canvas-Element
- Publication date:
- September 2020
- Publisher
- Packt
- Duration
- 12 hours 17 minutes
- ISBN
- 9781800567825