by Aarthi Elumalai | Released February 2019 | ISBN: 9781838646646

Javascript for Front End Web App Development - HTML5 Canvas & CSS3 - 2D game development - create the game from scratch.About This VideoHow to create the HTML5 structures of this game.How to make the game pretty with CSS (design, design, design!) and last but never the leastHow to make the game playable (solve problems) with logic and algorithm, i.e JavascriptIn DetailPractice makes perfect. Start your journey into becoming a professional front end web developer here! At DigiFisk, we like making learning fun. Our courses are interactive and fun with a ton of practical elements to it. We've decided to take it a step further with our Web app development practice series. Once you learn the syntax of a programming language, the next logical step is to start creating software and apps. But that's where most students get stuck. Problem-solving isn't as easy as learning a bunch of syntaxes. But we aim to make it easy for you. The course is structured in such a way that each section will handle one of the 3 languages covered here.Introduction: This is where I'll explain how the game works, it's various features and what we'll be using to achieve the same results.Module 1: Every professional developer writes algorithms before creating software or game. We'll be writing the step by step algorithm for our game, and I'll be explaining what we'll do in every step.Module 2: I'll be teaching you how to create the bare bones of the app with HTML5. The result will be a page with all the elements we need in our game, devoid any colours or design elements.Module 3: Here, we'll "beautify" our app. We'll be using CSS elements to give our game colours and styles. At the end of this module, we'll have a Tic Tac Toe web game that'll look like the final result, albeit one that is not playable yet.Module 4: I'll be covering some basic concepts of Javascript in this module. I'll only cover concepts that we'll need for our game's Javascript code though. If you already know the basics, you can skip this module.Module 5: I'll be covering some basic concepts of HTML5 canvas in this module. I'll only cover concepts that we'll need for our game's Javascript/HTML5 canvas code though. If you already know the basics, you can skip this module.Module 6: This would be the meat of the course. We'll be delving into Javascript & HTML5 canvas code of our game in this module, and I'll teach you how to make the game playable in here.All the code files are placed at https://github.com/PacktPublishing/2D-Game-Development-With-HTML5-Canvas-JS---Tic-Tac-Toe-Game Show and hide more

1. Chapter 1 : Introduction
   • Intro 00:06:42
2. Chapter 2 : Algorithm of the game app
   • Algorithm - Part 1 00:07:04
   • Algorithm - Part 2 00:04:41
3. Chapter 3 : HTML5 Building Blocks of the Game
   • Create skeleton of the HTML5 code 00:07:25
   • Meta tags of the HTML5 code 00:06:24
   • Create the header and the result heading 00:05:38
   • Create the game and rule sections' skeletons 00:04:32
   • Create the game canvases and new game button 00:06:09
   • Create the rules section's paragraphs and heading 00:03:06
4. Chapter 4 : Styling the Tic Tac Toe Game app - achieving the final look
   • Connect HTML and CSS files 00:03:38
   • Set background and more on colors 00:05:35
   • Set default styles and style the header 00:04:31
   • Style the headings 00:05:15
   • Style the canvases 00:03:15
   • Style the entire game area 00:07:44
   • Style the Divs that hold the canvases and rules area 00:06:26
   • Style the paragraphs and <h2> headings 00:02:05
   • Style the New Game button 00:05:40
   • Create hover effects on the canvases and new game button 00:05:14
5. Chapter 5 : [OPTIONAL] JavaScript Basic Concepts (related to this project)
   • Connecting HTML and script/JS files 00:06:04
   • An introduction to variables and assigning values 00:09:59
   • Mathematical operators and alerts 00:09:52
   • Conditional statements - if else statement 00:06:13
   • Conditional statements - Switch case 00:07:12
   • Loops - For loop 00:06:31
   • Arrays - 1 dimensional arrays 00:06:37
   • Arrays - 2 dimensional arrays 00:05:08
   • An introduction to functions (function definition and calls) 00:10:42
   • Intro to DOM - getElementById and InnerText 00:10:48
   • Intro to DOM - adding click events to buttons 00:09:06
   • More Event listeners Part 1 00:08:12
   • More Event listeners Part 2 00:04:39
   • JavaScript objects 00:09:52
6. Chapter 6 : [OPTIONAL] HTML5 Canvas Basic Concepts (related to this project)
   • Step 1 & 2 - Getting the canvas and creating the drawing object 00:08:27
   • Drawing a line (also explanation on canvas dimensions and pixel points) 00:08:50
   • Drawing & coloring a shape with poly lines (a path) 00:09:12
   • Drawing & coloring a circle and arcs 00:09:18
7. Chapter 7 : JavaScript code for the game - Making the game playable
   • Step 1 - Setting things up + onload function 00:05:56
   • Step 1 cont. - Initial states - declare and assign 00:04:39
   • Step 1 cont. - Initial states - assign values to arrays 00:07:19
   • Step 2 - Make the new game button work 00:05:44
   • Step 3 - Canvas click event 00:06:59
   • Step 3 cont. - Canvas click function - retrieve canvas ids 00:05:57
   • Step 4 - Draw relevant shapes on canvas 00:06:45
   • Step 4 cont. - X and O draw codes 00:07:54
   • Step 4 cont. - Test intermediate output 00:02:20
   • Step 5 - Winner check 00:09:50
   • Step 5 cont. - Display game results 00:03:07
   • Error condition alerts 00:07:58
Show and hide more