- Introduction to creating a brick breaking game from scratch
- Code Editor Update
- How to setup a Game Breakout Game Setup
- Setup HTML and JS files and Canvas ready to draw code snippet
- How to create Player Character Setup Player Paddle
- Source Code draw player paddle on screen for game
- How to create Player Movement KeyPresses.
- Source Code - Add key press listeners to game
- How to move player in Game Move Player Paddle.
- Source Code Game Animation Frame movement on canvas
- How to add Player Mouse Movement Player.
- Source Code Move player with Mouse position
- How to add to game Add a Bouncing Ball
- Source Code Draw Bouncing Ball on HTML5 Canvas Game
- How to create Collision Detection within Game
- Source Code HTML5 Collision Detection Code
- How to generate the game screen Add Bricks to Screen
- Source Code Draw bricks to Game
- How to add objects to Game Update Bricks.
- Brick Collision Detection Source Code
- How to add Scoring and Win conditions to game
- Source Code Scoring
- Final Game tweaks and Adjustments
- Source Code Game Updates
- Game Bug Fixes and Tweaks
- Source Code Debugging Game updates
- How to add Bonus Content to your HTML5 Game
- Source Code Bonus Blinking Game Updates
- Game updates Ball Speed Update
- Final Source Code for HTML5 Canvas Breakout Game
What you'll learn
- How to create a Game from scratch
- Build HTML5 Brick breaker Game
- Create a Game using JavaScript
- How to create a Breakout game with JS and HTML5 Canvas
- Updating and drawing on Canvas
- Creating interaction and dynamic content within a game
Description
Make your own games online - start with this amazing simple game project creating a Breakout game from scratch
Explore how you can write code to create GAMEs - Games that run within any browser - Interactive Games that are fun to play and even more fun to make yourself. Dynamic Games that can be built upon to customize and add your own game ideas. See what you can build within just a few short hours.
Want to build online games - want to learn more about game creation - learn from experienced developer who has created over 100 online games. Source Code is included - try the code for yourself and customize it to make your own version of the game!!!! You will be amazed at how easy it can be.
Course covers all the basics of creating a fully functional game from start to finish!!!
Setup your game within HTML
Create page elements with JavaScript
Explore how to set objects and values to prepare for game play
Add interaction - keyboard arrow keys and mouse movement to move your character on the screen
Add animations for smooth game movement
Create conditions for ball behaviours, player behaviours
Build multiple interactive items in the game
Add collision detection to track interactions
How to debug your game
How to improve upon the game
How to add bonus items,
How to setup game start conditions and game win conditions.
Explore how you can create your first game using JavaScript and HTML5 canvas
Apply JavaScript to HTML5 canvas element - drawing on canvas lines and shapes.
How you can add animation to your Game with animation frames
How to make your game interactive with keyboard event listeners
Dynamic and interactive game project to practice and learn more about JavaScript and HTML5
Source Code is included
How to debug your HTML5 canvas game project
Making tweaks and adjustments adding game play , and scoring
Taught by an instructor with over 20 years of real world experience ready to help you learn more about HTML5 and JavaScript.
Start building your own version of the game TODAY.
Other Courses
SAP Debugging- Techno Functional Course
Trouble Shoot Issues in SAP by Debugging the Code/Program
Improve your French Now
A series of videos and audios on different topics with exercises to improve your French
BIM Coordinator: Who Earns the Title?
What tasks does a BIM Coordinator perform in a project? Utilizing Revit, Navisworks, Dynamo, or specialized skills?
Improving Project Success & Avoiding Common Pitfalls
Strategies, Tools, and Insights for Effective Project Management
Lightroom 5 Photographer Workflow
Master Lightroom 5. Learn how to bring your photos into Lightroom 5, get them organized, edit them and export your work.
About the instructors
- 4.35 Calificación
- 1010832 Estudiantes
- 297 Cursos
Laurence Svekis
Instructor, GDE, Application Developer
I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite
Providing Web development courses and digital marketing strategy courses since 2002.
Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.
"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990, and my first website in 1998. I enjoy sharing my knowledge with others and want to help you share in the wonderful opportunities that the internet provides."
"Learning, understanding with a strong passion for education. The internet has provided us with new opportunities to expand and share knowledge."
Want to learn more about becoming a web developer, do you want to experience the freedom that technology provides for us? Learn how to bring amazing things to life online. Technology connects us all in many ways. It opens up doors to those who embrace it and learn how to make those connections real.
"My courses are designed to help you achieve your goals, learn and update skills"
Background : An experienced web application developer, having worked on multiple enterprise level applications, hundreds of websites, business solutions and many unique and innovative web applications. Web application development areas of expertise include HTML, CSS, JavaScript, JQuery, Bootstrap, PHP and MySQL. Anything to do with web creation and digital experience. Passionate about everything to do with web application development, programming to online marketing with a strong focus on social media and SEO.
"Understanding technology provides a means to better connect with users. It also opens so many doors. Knowledge is the key to success and I want to help you experience what technology has to offer. I'm passionate about web technologies, and look forward to sharing my knowledge and experience with you!"
Student feedback
Course Rating
Reviews
amazing and nice for first timers
Yeah i like this experience because i can create my own game and be fun.
Fun way to learn coding by making a game.
It's a really good course. It helps me more to understand JavaScript.
I thought the course was informative and the instructor was good and knowledgeable. I felt like the instructor went fast sometimes. I do really appreciate after each lesson the instructor provided the source code. All in all, I like it, it was a great course for being a free course, and I made a brick breaking game. Fun :)
nice
The code is messy, no comments and spaces to separate parts of the code. There are inconsistent use of indentation and code practice. Us of terms like object can easily confuse programmers that is just starting to learn object oriented programming and wanted to use this as an inspiration. A plus is that special tiles are covered and that speed and direction of the ball are covered.