English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 5.5 Hours | 675 MB
Javascript for Front End Web App Development – HTML5 Canvas & CSS3 – 2D game development – create the game from scratch
Practice 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.
What will you learn in this course?
In this course, you’ll learn how to build your own Tic Tac Toe Game App from the ground up with just HTML5 canvas, Javascript and CSS in just a couple of hours.
You’ll learn:
1. How to create the HTML5 structures of this game.
2. How to make the game pretty with CSS (design, design, design!)
and last but never the least
3. How to make the game playable (solve problems) with logic and algorithm, i.e Javascript
By the end of the course, you’ll be one stop closer to creating web apps and 2d web games like a pro. You could even try creating other smaller web apps and games.
How is this course designed?
I’ve made this course as easy to understand as possible. I’ve structured it 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 a software or game. We’ll be writing the a 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 colors or design elements.
Module 3: Here, we’ll “beautify” our app. We’ll be using CSS elements to give our game colors 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 (let the user draw on the canvas and display the game results) in here.
Final section: Finally, I’ll give you some ideas on how to improve/enhance the game and make it your own in terms of design and functionalities.
Table of Contents
Introduction
1 Introduction
Algorithm of the game app
2 Algorithm – Part 1
3 Algorithm – Part 2
HTML5 Building Blocks of the Game
4 Create skeleton of the HTML5 code
5 Meta tags of the HTML5 code
6 Create the header and the result heading
7 Create the game and rule sections skeletons
8 Create the game canvases and new game button
9 Create the rules sections paragraphs and heading
10 index.html file – Tic Tac Toe game
Styling the Tic Tac Toe Game app – achieving the final look
11 Connect HTML and CSS files
12 Set background and more on colors
13 Set default styles and style the header
14 Style the headings
15 Style the canvases
16 Style the entire game area
17 Style the Divs that hold the canvases and rules area
18 Style the paragraphs and h2 headings
19 Style the New Game button
20 Create hover effects on the canvases and new game button
21 style.css file – Tic Tac Toe game
OPTIONAL Javascript Basic Concepts related to this project
22 Connecting HTML and scriptJS files
23 An introduction to variables and assigning values
24 Mathematical operators and alerts
25 Conditional statements – if else statement
26 Conditional statements – Switch case
27 Loops – For loop
28 Arrays – 1 dimensional arrays
29 Arrays – 2 dimensional arrays
30 An introduction to functions function definition and calls
31 Intro to DOM – getElementById and InnerText
32 Intro to DOM – adding click events to buttons
33 More Event listeners Part 1
34 More Event listeners Part 2
OPTIONAL HTML5 Canvas Basic Concepts related to this project
35 Step 1 2 – Getting the canvas and creating the drawing object
36 Drawing a line also explanation on canvas dimensions and pixel points
37 Drawing coloring a shape with poly lines a path
38 Drawing coloring a circle and arcs
Javascript code for the game – Making the game playable
39 Step 1 – Setting things up onload function
40 Step 1 cont. – Initial states – declare and assign
41 Step 1 cont. – Initial states – assign values to arrays
42 Step 2 – Make the new game button work
43 Step 3 – Canvas click event
44 Step 3 cont. – Canvas click function – retrieve canvas ids
45 Step 4 – Draw relevant shapes on canvas
46 Step 4 cont. – X and O draw codes
47 Step 4 cont. – Test intermediate output
48 Step 5 – Winner check
49 Step 5 cont. – Display game results
50 Error condition alerts
51 script.js file – Tic Tac Toe game
52 All the code files – Tic Tac Toe game
Conclusion Feature ideas
53 Congrats
54 New features that you can try to create for this game
Resolve the captcha to access the links!