Learn HTML 5 Game Development : Create Cross Platform Games

Learn to create HTML Games that can be used on any device with a modern web browser.
2.8 (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.
245 students enrolled
$19
$125
85% off
Take This Course
  • Lectures 62
  • Length 6 hours
  • Skill Level Beginner Level
  • 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 6/2016 English

Course Description

This course will teach you how to create an HTML 5 2d game from scratch that will run on all platforms and devices that have a web browser.  What this means is that HTML games are cross platform. The huge advantage of creating your games in HTML 5 is that you can use completely free tools to create the games. Also you only have to write the code once and use it on any device or platform with a web browser.

To have a better understanding of this course you are expected to have a basic working knowledge of Html, Css and JavaScript. I will be including some refreshers as a guide.

In this course our project will be to create a complete 2d HTML game that can be played on any device or platform.  We will be rendering our game inside HTML 5 canvas element of which you get some basic training on what is a canvas and how to create one and also draw on it.

What you’ll learn in this course:

  • What is a canvas?
  • HTML Refresher quick course
  • CSS Refresher quick course
  • JAVASCRIPT   Refresher quick course
  • Understanding Co-ordinates
  • How to draw graphics
  • Create a complete 2d HTML Game

After completing this course you will have enough creative skills to create your own games and web apps using HTML 5.

Thank you and welcome to the course.

What are the requirements?

  • Download and install Notepad++ or other editors

What am I going to get from this course?

  • Create a complete 2d game in HTML 5
  • Create your own Canvas
  • Understand how co-ordinates works
  • Create Variables
  • Create Functions
  • Understand conditional statements

What is the target audience?

  • Beginner HTML5 Game developers
  • Anyone interested in new skills

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: Introduction
Introduction
Preview
02:07
The Benefits of using developing games in HTML 5
Preview
02:41
Plain Text Editors
Preview
03:47
Section 2: HTML 5 Refresher
Creating Folder Structure
Preview
02:34
HTML Document Structure
07:12
HTML Heading Tags
05:43
Creating Paragraphs
05:11
HTML5 Comments
06:36
HTML Elements | Attributes | Links
08:50
Section 3: CSS Refresher
CSS Syntax Rule
Preview
05:22
Internal CSS
03:47
External CSS
06:39
Id Attribute
04:21
Class Attribute
05:13
CSS Margin Property
07:05
CSS Padding Property
08:14
CSS Comments
05:26
CSS Font -Family
05:39
CSS Font-Weight Property
05:17
Css Font Size Property
06:05
CSS Background -Color
05:39
Section 4: JavaScript Refresher
JavaScript Syntax
Preview
05:49
Changing Content
06:10
Conditional Satements
07:52
Data Types
04:54
Operators
04:59
Variables
10:36
Functions
07:50
Javascript Comments
07:05
Housing Javascript
03:56
Section 5: Introduction To Canvas
What is Canvas
01:24
Canvas is Popular
03:07
Create a Canvas
04:36
Create a canvas continued
07:58
Learning the Co-ordinates
04:28
Create Graphic on Canvas
11:45
Section 6: Project: Complete HTML 5 2D Game Development Part 1
Have a peek at what we will create
01:51
Creating the game Canvas
05:03
Referencing the game canvas
04:52
Creating the game ball
11:46
Creating movement for the game ball
07:55
Clearing ball obstruction
06:21
Getting the ball to bounce Part 1
03:48
Getting the ball to bounce part 2 : Collision Detection
10:25
Section 7: Complete HTML 5 2D Game Development Part 2: Paddle and Keyboard Controls
Introduction
00:28
Create Variables for the paddle
05:35
Create function to draw the paddle
07:09
Create event listeners for keyUP and keyDown events
04:52
Create functions to control the events
07:04
Create variables to store left and right movement
03:40
Create logic to move the paddle
07:40
Create Game Over Logic
05:58
Section 8: Complete HTML 5 2D Game Development Part 3: Building The Bricks
Introduction
01:25
Create variables for building the brick
04:16
Create Arrays to hold the bricks
04:30
Create function to draw the bricks
07:06
Implementing Collision detection for the bricks
08:31
Activating the collision detection
04:05
Creating a Score and Wining The Game
09:43
Implementing Mouse Controls
06:17
The Amazon App Store
01:54
Some games made with HTML 5
04:39

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Skill Tree, Skill based learning

We are experienced company that provides quality video based training .
Our courses are easy to follow and understand and will take you from
an absolute beginner with no technical skills to being efficient and confident with various technical skill like SQL and databases.
We have worked with companies of various sizes and provided consultancy services at various levels.
Thank you for learning with us and we hope your experience will be pleasant.

Ready to start learning?
Take This Course