Git Product home page Git Product logo

html5-games-dev-video-code-example's Introduction

HTML5-Games-Dev-Video-Code-Example

Code example for my HTML5 Games Dev video course (http://www.packtpub.com/html5-game-development/video).

There are two games created in the course. They are Count99 and Rush.

You can try the games in the following links:

Count99: http://42games.net/html5/count-99/

Rush: http://42games.net/html5/rush/


The first 3 sections of the course focuses on the Count99 game. The last 5 sections focuses on making the Rush game.

The code examples maps with the sections in the course. So here is the table of content to help you locate the example folders.

  1. Planning Your First Game [12:08 minutes]

    • Planning Your Game
    • Setting Up Your File Structure
    • Setting Up HTML and JS
    • Drawing Basic Shapes with EaselJS
    • Implementing Your First Game Object
  2. Creating the Core Game Logic [15:23 minutes]

    • Displaying Multiple Objects on Stage
    • Adding Click Input Events
    • Adding the Game Logic
    • Adding the Game Over Logic
    • Restarting the Game
  3. Adding Graphics to Your Game [14:44 minutes]

    • Preparing Your Graphics
    • Adding Graphics to the Game
    • Preloading Graphics
    • Adding Custom Web Fonts
    • Making Your Game Mobile-friendly
  4. Planning Your Second Game [17:13 minutes]

    • Planning the Rush Game
    • Defining the Game Object Class
    • Creating a Platform Class
    • Creating Movable Game Objects
    • Adding Platforms to Your Stage
  5. Game Objects and Collisions [13:42 minutes]

    • Handling Platforms and Hero Collisions
    • Implementing the Obstacle Game Objects
    • Handling Obstacle and Hero Collisions
    • Handling Collisions with Generic Methods
    • Implementing the Detection Score Counter
  6. Character Movement and Input Handling [12:05 minutes]

    • Adding Gravity to the Level
    • Applying Gravity to the Hero
    • Making the Hero Run
    • Making the Hero Jump
    • Handling Hero-Obstacle Collisions
  7. Adding Graphics and Animations [15:40 minutes]

    • Creating the Rush Game's Graphics
    • Integrating Static Graphics in Rush
    • Using EaselJS Sprite Sheet Animations
    • Creating the Dynamic Platform Width Logic
    • Preloading Graphics and the Progress Bar
  8. Polishing Your Final Game [17:44 minutes]

    • Creating a Main Menu Scene
    • Create a Game Over Scene
    • Displaying Scores
    • Displaying a Scoreboard
    • Finalizing Your Game's Web Page

html5-games-dev-video-code-example's People

Watchers

Thomas Seng Hin Mak avatar James Cloos avatar  avatar

Forkers

o3digital hanss

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.