This course will take you through all you need to know to get started creating your first game in HTML5. It starts by introducing you to working with HTML5 to create web-based games. Through practical game examples, you will understand how to work with HTML to create game logic, work with animations in CSS3, add audio, implement basic physics and collision detection, build levels, and polish the game with menus and game over sequences.
You will see how to write games with the graphical in-browser drawing capabilities of HTML Canvas, with the support of the CreateJS library. It also covers how to make games mobile-friendly. By the end of this video, you will be comfortable creating in-browser games in HTML and CSS.
About The Author
Thomas Makzan focuses on the fields of web development and game design. He has over 15 years of experience in building digital products. He has worked on real-time multiplayer interaction games, iOS applications, and rich interactive websites.
He has written several books on building a Flash virtual world, creating games with HTML5, and building websites with the Flexbox layout. He currently teaches courses in Hong Kong and Macao SAR.
We need to get started with the project, and for that, we first need to set up the environment.
Download the CreateJS library.
Our game is still blank, as we haven't added any graphics to it. So now, we will need to create graphics and connect it with the code for the game to work.
We have all the preparations, but the game is still empty. It's now time to get our game up and running. We'll use the graphics to implement the game object.
We will be displaying multiple objects on stage and will also be producing the main logic of the game.
We placed the box on the stage, but we still cannot interact with them. We will add interactivity to the game object by adding tap input events.
Make the game look good in mobile and improve the game display.
We have made the box clickable, but there is no constraint now. We need to implement the core game logic.
We need to determine how the game ends and show a game overview.
Enhance the game overview with animation. Also add interaction to the numbered box.
Make our game user friendly by allowing it to restart after it is over.
Display a customized web font in the numbered box by adding custom web fonts to the game.
We will add sound effects to the game so that when the player clicks on the button or the game object, there are audio effects.
Deploying the game on the web to make it available for others players.
We need to create game graphics and add them to the game.
We want to set up the foundation GameObject class.
We will create a Platform class so that the avatar will stand on it later.
We will create a better hierarchy for the platforms and the avatar.
We want the avatar to stand on the platform. So, we need to check whether they collide
We need to make game objects move.
We want to make the avatar fall under gravity.
We want to make the avatar run towards the right of the screen.
We want to make the avatar jump over a gap when the player presses the mouse button.
We need an enemy before we create our collision detection logic.
Detect collision between hero and the enemy by checking their bounding box.
We want to make the collisions work not only on one enemy, but also on any type of game object collection.
We need another game object type to test our collision detection code.
Handle the collision between Hero and coins.
We want continuous platforms with game objects on them.
We want to make the game has more variety by having multiple platform width.
We want different difficulties.
We want to generate platforms based on the level data.
We want to calculate the accumulated score based on the current level and the coins collected
We want to add a menu scene before the game starts, so that the game starts when players is ready instead of the game starts when page is loaded.
We want to add a game over scene and connect the scene between menu, game and game over.
We want to show the game score to the player.
We want to make the game’s web page attractive.
We want to allow adding the game’s web page to home screen of mobile phones with a nice icon.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.