HTML5 Game Development

Planning Your First Game 5 lectures 12:09 Planning Your Game Exhibiting the final game and encouraging viewers to learn how to build it themselves. Setting Up Your File Structure Avoid having different types of files in one directory. Tidy up the file structure.

• Create the project folder
• Create essential folders and file placeholders
• Put the game library in place

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

• Set up the HTML document with a canvas tag and include external CSS and JS files
• Create a Game class in JavaScript that initializes the game stage
• Execute the game initialize code when the page is loaded

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

• Create a shape object
• Draw a rectangle with color fill and borders
• Configure the rectangle to be displayed

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

• Create a tile class that inherits from the EaselJS container.
• Draw the rectangle shape and put numbered text on top of it
• Create one tile on stage with a random position

Planning Your First Game 5 lectures 12:09 Planning Your Game Exhibiting the final game and encouraging viewers to learn how to build it themselves. Setting Up Your File Structure Avoid having different types of files in one directory. Tidy up the file structure.

• Create the project folder
• Create essential folders and file placeholders
• Put the game library in place

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

• Set up the HTML document with a canvas tag and include external CSS and JS files
• Create a Game class in JavaScript that initializes the game stage
• Execute the game initialize code when the page is loaded

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

• Create a shape object
• Draw a rectangle with color fill and borders
• Configure the rectangle to be displayed

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

• Create a tile class that inherits from the EaselJS container.
• Draw the rectangle shape and put numbered text on top of it
• Create one tile on stage with a random position

Planning Your Game Exhibiting the final game and encouraging viewers to learn how to build it themselves. Planning Your Game Exhibiting the final game and encouraging viewers to learn how to build it themselves. Planning Your Game Exhibiting the final game and encouraging viewers to learn how to build it themselves. Planning Your Game Exhibiting the final game and encouraging viewers to learn how to build it themselves. Exhibiting the final game and encouraging viewers to learn how to build it themselves. Exhibiting the final game and encouraging viewers to learn how to build it themselves. Setting Up Your File Structure Avoid having different types of files in one directory. Tidy up the file structure.

• Create the project folder
• Create essential folders and file placeholders
• Put the game library in place

Setting Up Your File Structure Avoid having different types of files in one directory. Tidy up the file structure.

• Create the project folder
• Create essential folders and file placeholders
• Put the game library in place

Setting Up Your File Structure Avoid having different types of files in one directory. Tidy up the file structure.

• Create the project folder
• Create essential folders and file placeholders
• Put the game library in place

Setting Up Your File Structure Avoid having different types of files in one directory. Tidy up the file structure.

• Create the project folder
• Create essential folders and file placeholders
• Put the game library in place

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

• Create the project folder
• Create essential folders and file placeholders
• Put the game library in place

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

• Create the project folder
• Create essential folders and file placeholders
• Put the game library in place

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

• Set up the HTML document with a canvas tag and include external CSS and JS files
• Create a Game class in JavaScript that initializes the game stage
• Execute the game initialize code when the page is loaded

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

• Set up the HTML document with a canvas tag and include external CSS and JS files
• Create a Game class in JavaScript that initializes the game stage
• Execute the game initialize code when the page is loaded

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

• Set up the HTML document with a canvas tag and include external CSS and JS files
• Create a Game class in JavaScript that initializes the game stage
• Execute the game initialize code when the page is loaded

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

• Set up the HTML document with a canvas tag and include external CSS and JS files
• Create a Game class in JavaScript that initializes the game stage
• Execute the game initialize code when the page is loaded

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

• Set up the HTML document with a canvas tag and include external CSS and JS files
• Create a Game class in JavaScript that initializes the game stage
• Execute the game initialize code when the page is loaded

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

• Set up the HTML document with a canvas tag and include external CSS and JS files
• Create a Game class in JavaScript that initializes the game stage
• Execute the game initialize code when the page is loaded

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

• Create a shape object
• Draw a rectangle with color fill and borders
• Configure the rectangle to be displayed

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

• Create a shape object
• Draw a rectangle with color fill and borders
• Configure the rectangle to be displayed

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

• Create a shape object
• Draw a rectangle with color fill and borders
• Configure the rectangle to be displayed

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

• Create a shape object
• Draw a rectangle with color fill and borders
• Configure the rectangle to be displayed

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

• Create a shape object
• Draw a rectangle with color fill and borders
• Configure the rectangle to be displayed

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

• Create a shape object
• Draw a rectangle with color fill and borders
• Configure the rectangle to be displayed

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

• Create a tile class that inherits from the EaselJS container.
• Draw the rectangle shape and put numbered text on top of it
• Create one tile on stage with a random position

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

• Create a tile class that inherits from the EaselJS container.
• Draw the rectangle shape and put numbered text on top of it
• Create one tile on stage with a random position

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

• Create a tile class that inherits from the EaselJS container.
• Draw the rectangle shape and put numbered text on top of it
• Create one tile on stage with a random position

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

• Create a tile class that inherits from the EaselJS container.
• Draw the rectangle shape and put numbered text on top of it
• Create one tile on stage with a random position

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

• Create a tile class that inherits from the EaselJS container.
• Draw the rectangle shape and put numbered text on top of it
• Create one tile on stage with a random position

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

• Create a tile class that inherits from the EaselJS container.
• Draw the rectangle shape and put numbered text on top of it
• Create one tile on stage with a random position

Creating the Core Game Logic 5 lectures 15:19 Displaying Multiple Objects on Stage We need to have many tiles on stage so we can make them clickable and playable in the next video.

• Add a for loop for to create multiple tiles
• Set the total number of displayed tiles with a variable
• Test the game in a web browser

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

• Add the mouse-press event handler for a tile.
• Add the tile-removal logic inside the mouse press handler
• Optimize the code by extracting the mouse handler function creation outside the for loop

Adding the Game Logic 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.

• Add a current counter check inside the mouse-press event handler to prevent removing tiles out of turn.
• Add an indicator to tell the player which tile is the next one to be clicked on
• Add styles to the counting indicator

Adding the Game Over Logic 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.

• Stop the counting when all the tiles are removed
• Prepare a game over scene in HTML and CSS
• Show the game over scene using CSS transition that's toggled using JavaScript logic

Restarting the Game 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.

• Extract the game's initialization logic into a function so that we can call it later to reinitialize the game
• Add a restart game link to the game over scene
• Add the restart game logic when the restart game logic is triggered

Creating the Core Game Logic. 5 lectures 15:19 Displaying Multiple Objects on Stage We need to have many tiles on stage so we can make them clickable and playable in the next video.

• Add a for loop for to create multiple tiles
• Set the total number of displayed tiles with a variable
• Test the game in a web browser

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

• Add the mouse-press event handler for a tile.
• Add the tile-removal logic inside the mouse press handler
• Optimize the code by extracting the mouse handler function creation outside the for loop

Adding the Game Logic 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.

• Add a current counter check inside the mouse-press event handler to prevent removing tiles out of turn.
• Add an indicator to tell the player which tile is the next one to be clicked on
• Add styles to the counting indicator

Adding the Game Over Logic 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.

• Stop the counting when all the tiles are removed
• Prepare a game over scene in HTML and CSS
• Show the game over scene using CSS transition that's toggled using JavaScript logic

Restarting the Game 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 rong The game's startup...