There are currently no items in your shopping cart.

User Panel

Forgot your password?.

Learn Javascript & HTML5 Canvas – Build A Tic Tac Toe Game

Video Introducing this tutorial

Introduction :

Algorithm of the game app :
Algorithm - Part 1
Algorithm - Part 2

HTML5 Building Blocks of the Game :
Create skeleton of the HTML5 code
Meta tags of the HTML5 code
Create the header and the result heading
Create the game and rule sections' skeletons
Create the game canvases and new game button
Create the rules section's paragraphs and heading
index.html file - Tic Tac Toe game

Styling the Tic Tac Toe Game app - achieving the final look :
Connect HTML and CSS files
Set background and more on colors
Set default styles and style the header
Style the headings
Style the canvases
Style the entire game area
Style the Divs that hold the canvases and rules area
Style the paragraphs and headings
Style the New Game button
Create hover effects on the canvases and new game button
style.css file - Tic Tac Toe game
HTML5 & CSS practice test
20 questions

[OPTIONAL] Javascript Basic Concepts (related to this project) :
Connecting HTML and script/JS files
An introduction to variables and assigning values
Mathematical operators and alerts
Conditional statements - if else statement
Conditional statements - Switch case
Loops - For loop
Arrays - 1 dimensional arrays
Arrays - 2 dimensional arrays
An introduction to functions (function definition and calls)
Intro to DOM - getElementById and InnerText
Intro to DOM - adding click events to buttons
More Event listeners Part 1
More Event listeners Part 2

[OPTIONAL] HTML5 Canvas Basic Concepts (related to this project) :
Step 1 & 2 - Getting the canvas and creating the drawing object
Drawing a line (also explanation on canvas dimensions and pixel points)
Drawing & coloring a shape with poly lines (a path)
Drawing & coloring a circle and arcs

Javascript code for the game - Making the game playable :
Step 1 - Setting things up + onload function
Step 1 cont. - Initial states - declare and assign
Step 1 cont. - Initial states - assign values to arrays
Step 2 - Make the new game button work
Step 3 - Canvas click event
Step 3 cont. - Canvas click function - retrieve canvas ids
Step 4 - Draw relevant shapes on canvas
Step 4 cont. - X and O draw codes
Step 4 cont. - Test intermediate output
Step 5 - Winner check
Step 5 cont. - Display game results
Error condition alerts
script.js file - Tic Tac Toe game
All the code files - Tic Tac Toe game
Javascript & HTML5 Canvas Practice Test
11 questions

Conclusion & Feature ideas :
New features that you can try to create for this game

You Have Got Gift 25% OFF

Use this Coupon Code “J3JKN396