HTML5 Game Development

Build two HTML5 games in two hours with these fast-paced beginner-friendly videos
3.0 (2 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
64 students enrolled
$19
$85
78% off
Take This Course
  • Lectures 40
  • Length 2 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2014 English

Course Description

This course is packed with step-by-step instructions to help you build modular code, optimize your game for deployment, and easily modify and reuse game logic to extend your game.

With this course, you’ll build two incrementally complex 2D games that run on both desktop and mobile browsers. This course will explain game programming best practices, complete with simplified game logic, physics and collision handling, as well as custom graphics and fonts.

Your first exercise is a simple counting game that lays the foundations for creating clean, customizable, and modular code. We’ll then move on to building a “rush” game with moving backgrounds, basic physics, and dynamic scoreboards.

We’ll cover essentials such as handling mobile touch events, controlling scene transitions, custom fonts and graphics, optimizing your game's load time, a loading progress bar, collision detection, keeping score, and creating a deployable game.

HTML5 Game Development will be your guide as you create two complete games that are compatible with multiple desktop and mobile web browsers.

About the Author

Makzan focuses on web development and game design. He has over 14 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 two books and one video course on building a Flash virtual world and creating games with HTML5 and the latest web standards. He is currently teaching courses in Hong Kong and Macao SAR.

What are the requirements?

  • HTML5 Game Development is ideal for anyone who develops websites and who wants to leverage the benefits of including rich interactive media that captivates users; for example, developers working with design agencies to improve branding or independent developers wanting to enhance their skills and portfolios. Some basic knowledge of HTML, JavaScript, and CSS would be useful.

What am I going to get from this course?

  • The examples in this video course are built using a simple canvas with modularized JavaScript game logic. You'll use basic object-oriented programming concepts to create game components and test your game using a simulator - optimizing it for real-world situations before deployment.

What is the target audience?

  • HTML5 Game Development is ideal for anyone who wants to get started with the fundamentals of game development in HTML5. Some basic knowledge of HTML, JavaScript, and CSS would be useful.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Planning Your First Game
01:11

Exhibiting the final game and encouraging viewers to learn how to build it themselves.

01:46

Avoid having different types of files in one directory. Tidy up the file structure.

02:45

It is cumbersome to always start from scratch; this video shows you how to lay the foundations for your game with some boilerplate code.

03:05

Canvas drawing is stateless. Use the EaselJS library for the first time to draw something with managed states.

03:21

A game object usually contains different components. This video shows how we can put a shape and some text together.

Section 2: Creating the Core Game Logic
02:29

We need to have many tiles on stage so we can make them clickable and playable in the next video.

03:20

Our tiles are not yet clickable. We'll make the tiles clickable and remove a tile when it is clicked.

03:47

Tiles can be randomly removed - so we now need some logic to make sure that players eliminate them sequentially, as well as some way to tell the player which tile is next.

03:44

The counter continues even after a player removes all tiles - we'll need to add a "game over" check and display a game over scene.

01:58

The game stops at the game over scene, and we'll need to make a provision to play the game again by adding a restart link and logic.

Section 3: Adding Graphics to Your Game
02:13

We'll need to add graphics to the game, so we'll check and decide the dimensions of each game object and draw them.

02:39

We'll use a CSS background and the createJS bitmap class to integrate graphics into the game.

04:05

The game's startup isn't optimized for slow internet connections - it could start before all graphics are loaded. We'll track the graphics' loading state and begin the game only after all graphics are loaded.

03:19

The font face doesn't match the pixel art style of the game. We will create a web font and then use it in the game.

02:28

The game doesn't work smoothly on a mobile device due to delayed click responses and mismatched screen dimensions. We add touch-event support to the tile-removal code and configure the game screen to fit common mobile screens.

Section 4: Planning Your Second Game
02:43

We made the first game using just one game object - the tile. We'll now create a game with multiple game objects put together.

03:38

We have different kinds of game objects, such as the hero, platform, and obstacles. We need a class hierarchy with a generic class to share common properties.

04:11

The game object is just a definition. We will need to implement a real game object, platform, and put it on stage with a rectangle shape.

03:44

There are some properties that are shared between moving objects, but this is not applicable to static objects such as platforms. We need a definition for moving objects that extends the GameObject class.

02:50

We have the essential game objects defined but we have not created a game level yet. This video will teach you to put the platforms together to form a game level.

Section 5: Game Objects and Collisions
04:35

Detecting whether the hero's position overlaps any platform's bounding box.

02:18

The game is not challenging enough with only platforms. We can put some obstacles on the platforms to force the hero to jump over them.

02:09

We have obstacles on the platforms that the player needs to watch out for. We'll create another loop to check if the hero hits an obstacle.

02:27

Detecting collisions between the hero and platform or the hero and obstacles is similar - we can create that code as a generic collision-detection method.

02:06

We'll create a reward mechanism that allows the player to collect coins.

Section 6: Character Movement and Input Handling
03:48

Everything in the game is static now and the hero is not moving at all. We will use the createJS ticker function to apply a falling speed to the hero and make him move.

02:05

The hero falls through the platform. We will stop the falling when the hero hits the platform.

02:14

The hero stands still on the platform but he doesn't move forward. We will apply an x velocity to the hero so he will run forward.

01:18

The hero will fall to the bottom when the next platform is higher than the current one - we'll make the hero able to jump higher.

02:41

The hero can run now but there is no effect when the hero hits the coins and obstacles. We will implement the logic when the hero hits them.

Section 7: Adding Graphics and Animations
03:51

The current game is displayed with rectangle shapes, we'll need better graphics to attract players. So we will create animation graphics in Flash and export them as a sprite sheet file.

01:30

We prepared the graphics but haven't integrated the graphics into the game yet. So we will put the static graphics into the game first.

04:01

We have exported the animation into the sprite sheet data. We will now use the SpriteSheet and BitmapAnimation classes to integrate the sprite sheet into the game.

02:57

The width of the platform graphics is fixed, but the logic supports dynamic width. We need a method to scale the platform graphics to a variable width value.

03:21

The game graphics takes some time to load but the game starts before all resources are loaded. We will make a preloader class that visualizes the loading progress into a progress bar.

Section 8: Polishing Your Final Game
03:59

The game starts at once after it is loaded and the player may not be ready for the game yet. So we need to show a menu scene and let the player control when to start the game.

02:34

The game restarts immediately right now, and players haven't a chance compose themselves before the next round. We'll add a game over scene to let players control when the game begins anew.

03:17

We do not motivate players enough right now to make them play again because they cannot compare how well they played in each game session. We are going to introduce a highest-score challenge.

04:23

It is not challenging enough with only one high score in the game. We will store a list of the history of highest scores.

03:33

The game works perfectly but doesn't have any help options to let first-time visitors know how to play. We are going to decorate the game page and provide more information on the game.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course