You can learn anything on Udemy. Start today with one of our 10,000+ online courses

Create a HTML5 Game from Scratch

Learn how to make html5 games with this HTML5 game development tutorial.
34 reviews
TAUGHT BY
  • Pablo Farias Navarro Founder of ZENVA

    Pablo is a web + mobile app developer and entrepreneur. Pablo is the founder of ZENVA, a global IT startup based in Santiago (Chile). By providing online training and custom development solutions, our goal is to turn our customers ideas intro reality.

    ZENVA runs four development communities featuring game, web and mobile app development tutorials: Zenva Academy, GameDev Academy, HTML5 Hive (also known as "the hive"), and for Spanish speakers, De Idea A App.

    Pablo holds a Master in Information Technology (Management) degree from the University of Queensland (Australia) and a Master of Science in Engineering degree from the Catholic University of Chile. Specialized in web and mobile HTML5, his preferred technologies for the development of web and mobile apps are PHP (Symfony2 and Code Igniter), MySQL, JavaScript and NodeJS.

WHAT'S INSIDE
  • Lifetime access to 29 lectures
  • 2+ hours of high quality content
  • A community of 600+ students learning together!
SHARE

Create a HTML5 Game from Scratch

Learn how to make html5 games with this HTML5 game development tutorial.
34 reviews

At ZENVA we specialize in making high-quality technology courses that will give you all the skills you need to turn your ideas into reality. Get in touch to find out about our latest courses and discounts:

Making games is a lot easier than you think. Imagine you could learn how to make HTML5 games that run in all browsers and Windows 8 with our HTML5 game development tutorial in only 2.5 hours! Well, that is exactly what this course does.

We know you've always wanted to make your own games. Don't keep postponing it. Start TODAY

Learn how to create a Zelda-like action game demo from scratch using only Javascript and HTML. No experience or previous knowledge is required! Although knowing the basics of HTML and Javascript is recommended.

This HTML5 game development tutorial is aimed for both beginners and more advanced users who may have HTML5 experience but haven't got into games yet.

Some of the topics you'll learn by building this game from total scratch:

● Creating a basic game that can be embed in any website and can be played with just a web browser.

● Displaying a map and characters on the screen.

● Moving a player on this map.

● Using collision detection to simulate the shooting of bad guys.

● Adding enemies to your games.

● Adding sound to your games.

● Putting it all together to create a fun playable demo.

● All game files, including images and sound are available at the end of each chapter for download.

This HTML5 game development tutorial has been created by Jacob Deichert in collaboration with Pablo Farias. Jacob has created comprehensive HTML5 game dev screencast tutorials on YouTube and other platforms. Pablo is the author of another awesome game dev course called HTML5 Mobile Game Development for Beginners, which you are also welcome to check out.

    • Basic JavaScript knowledge will be of help
    • Over 29 lectures and 2.5 hours of content!
    • Learn how to create a simple game using HTML5's CANVAS API
    • Game enthusiasts who want to turn their game ideas into reality

CURRICULUM

  • SECTION 1:
    Drawing the background
  • 1
    Course preview
    00:32
  • 2
    Download course files
    Text
  • 3
    Other Game Development Courses by Zenva
    05:13
  • 4
    Drawing the Background
    05:12
    In this chapter, we get all of the beginning tasks out of the way. We setup our working directory, all of our files, and get the canvas to draw the background.
  • 5
    Drawing the Background - part 2
    05:14
  • 6
    Drawing the Background - part 3
    05:08
  • 7
    Drawing the Background - part 4
    04:31
  • 8
    Drawing the Background - part 5
    05:12
  • SECTION 2:
    Update. Draw. Loop
  • 9
    Update, draw, loop
    06:43

    In this chapter, we create the very important update, draw, and loop functions. They are used to update and draw each frame which is requested from the browser using requestAnimationFrame.

  • SECTION 3:
    Drawing the Player
  • 10
    Drawing the player
    04:59

    In this chapter, we create the player's object, along with it's update and draw functions which allow the player to be drawn to the canvas.

  • 11
    Drawing the Player - part 2
    04:59
  • 12
    Drawing the Player - part 3
    04:19
  • SECTION 4:
    Controlling the Player
  • 13
    Controlling the Player
    06:04
    In this chapter, we setup event listeners for the arrow keys as well as the spacebar. We also check which direction the player is moving and if they try to go out of bounds.
  • 14
    Controlling the Player - part 2
    04:59
  • 15
    Controlling the Player - part 3
    06:07
  • 16
    Controlling the Player - part 4
    04:23
  • SECTION 5:
    Blocking Objects
  • 17
    Blocking Objects
    05:24

    In this chapter, we create the obstacle object and define where all of the blocking objects on the background are located. Then we check to see if the player collides with any of them.

  • 18
    Blocking Objects - part 2
    04:31
  • 19
    Blocking Objects - part 3
    05:42
  • 20
    Blocking Objects - part 4
    04:19
  • SECTION 6:
    Drawing Enemies
  • 21
    The Bad Guys
    05:43
  • 22
    The Bad Guys - part 2
    05:13
  • SECTION 7:
    Moving Enemies
  • 23
    Moving Enemies
    05:10
  • 24
    Moving Enemies - part 2
    07:19
  • SECTION 8:
    Shoot!
  • 25
    Shoot!
    06:02

    In this chapter, we get started with bullets by creating the bullet object along with it's update, draw, and fire functions. We also add a sound effect for when the bullet is fired.

  • 26
    Shoot! - part 2
    06:18
  • SECTION 9:
    Bullet Collisions
  • 27
    Bullet Collisions
    07:33

    In this chapter, we check to see if the bullets collide with any alive enemies, an obstacle, or if they try to go out of bounds.

  • SECTION 10:
    The Game is Ready!
  • 28
    The Game is Ready!
    07:50

    In this chapter, we finally check to see if and when the player is shooting, as well as drawing all of the bullets to the canvas. The game is finally finished and fully playable!

  • SECTION 11:
    Course Evaluation Survey
  • 29
    Course Evaluation Survey
    Text

RATING

  • 20
  • 11
  • 2
  • 1
  • 0
AVERAGE RATING
NUMBER OF RATINGS
34

REVIEWS

  • Stuart Smith
    OK as an overview

    OK, this course is more of a watch the presenter code than a direct learning experience. He goes through everything at break neck speed with very little explanation. If you want to get a view of how a game is created then this is worth watching but if you really want to learn what is going on then something else will suit you better.

  • Iran José Alves
    Curso objetivo

    O curso é bem objetivo no que propõe, porém o professor poderia falar um pouco mais devagar para ajudar quem não tem tanta fluência no idioma inglês.

  • Robert Tomas G IV
    A little fast but cool!!!!!!

    great introduction on the back end of games!

  • Steve Muir
    Really well pitched enjoyable course

    I found this course refreshing and enjoyable. I love how the lessons are pitched and I learnt a lot about JavaScript and the gaming side of it. It worked for me in gaining an understanding and I definitely look to complete another course by these guys.

  • Mark Warner
    Great course and the reason I found Udemy

    Just a really good course, well presented, easy to follow and fun.

  • 30 day money back guarantee!
  • Lifetime Access. No Limits!
  • Mobile Accessibility
  • Certificate of Completion