Learn Javascript & HTML5 Canvas - Build A Tic Tac Toe Game
4.9 (11 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,135 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn Javascript & HTML5 Canvas - Build A Tic Tac Toe Game to your Wishlist.

Add to Wishlist

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

Javascript for Front End Web App Development - HTML5 Canvas & CSS3 - 2D game development - create the game from scratch
4.9 (11 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,135 students enrolled
Created by Aarthi Elumalai
Last updated 8/2017
English
Current price: $10 Original price: $100 Discount: 90% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5 hours on-demand video
  • 6 Articles
  • 4 Supplemental Resources
  • 2 Practice Tests
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create a complete dynamic Tic Tac Toe game app with Javascript, HTML5 canvas and css
  • How to design the game logic for the game and implement it as code
  • Improve your web app development, web game development & javascript skills
  • Improve your logical problem solving skills
  • Improve your front end design and development skills
View Curriculum
Requirements
  • You can come to this course with absolutely no coding knowledge. I explain everything you need to create your very first web app.
  • A PC or laptop to practice what I teach
Description

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. 

This course is for you if:

1. If you like learning by doing rather than hours of boring theoretical lectures. 

2. If you're a complete newbie to the world of web development, or just programming in general, and would like to start creating software with the help of a beginner-friendly course. You'll learn the basics of everything used in this project (HTM5, CSS3, Javascript, HTML canvas).  I'll be explaining every single line of code I'll be using in this course, so you won't feel lost. 

3. If you have the passion for programming, and know the basics of HTML5 and CSS, but you're stuck on the practical aspects of it. Turn your theoretical knowledge into practical knowledge with our course. 

4. If you want to delve into the exciting world of front end web app development, this course will take you a couple steps further in the right direction.  

5. If you're a Javascript web developer who just wants to try out a new project. Our course welcomes coders of every level, from absolute beginners, to pros.

So, what are you waiting for? Get this course today, and begin your journey into the wonderful world of web development and game development!


Who is the target audience?
  • This course is for people who want to learn web development/web app development the fun way
  • This course is also for people who've learned the basics and want to move on to practical programming
  • If you love learning by creating, and don't like to listen to hours of theory, this course is for you
Students Who Viewed This Course Also Viewed
Curriculum For This Course
52 Lectures
05:05:27
+
Introduction
1 Lecture 06:42
+
Algorithm of the game app
2 Lectures 11:45
Algorithm - Part 1
07:04

Algorithm - Part 2
04:41
+
HTML5 Building Blocks of the Game
7 Lectures 33:19

Meta tags of the HTML5 code
06:24

Create the header and the result heading
05:38

Create the game and rule sections' skeletons
04:32

Create the game canvases and new game button
06:09

Create the rules section's paragraphs and heading
03:06

I've attached the index.html file here. You can find the HTML5 code we used for this project on here. 

index.html file - Tic Tac Toe game
00:05
+
Styling the Tic Tac Toe Game app - achieving the final look
11 Lectures 49:59


Set default styles and style the header
04:31

Style the headings
05:15

Style the canvases
03:16

Style the entire game area
07:44

Style the Divs that hold the canvases and rules area
06:26

Style the paragraphs and <h2> headings
02:05

Style the New Game button
05:40

Create hover effects on the canvases and new game button
05:36

I've attached the style.css file here. You can find the CSS code we used for this project on here. 

style.css file - Tic Tac Toe game
00:05

We'll go over the topics covered in the last 2 sections. You'll only be questioned on the HTML5 t& CSS topics that we've covered for this project. You'll have around 1 minute to answer each question (20 minutes in total). 

HTML5 & CSS practice test
20 questions
+
[OPTIONAL] Javascript Basic Concepts (related to this project)
11 Lectures 01:29:32


Mathematical operators and alerts
10:10

Conditional statements - if else statement
06:18

Conditional statements - Switch case
07:12

Loops - For loop
06:46

Arrays - 1 dimensional arrays
06:37

Arrays - 2 dimensional arrays
05:08

An introduction to functions (function definition and calls)
10:43

Intro to DOM - getElementById and InnerText
10:54

Intro to DOM - adding click events to buttons
09:22
+
[OPTIONAL] HTML5 Canvas Basic Concepts (related to this project)
4 Lectures 36:46

Drawing a line (also explanation on canvas dimensions and pixel points)
08:51

Drawing & coloring a shape with poly lines (a path)
09:12

Drawing & coloring a circle and arcs
09:37
+
Javascript code for the game - Making the game playable
14 Lectures 01:15:19

Step 1 cont. - Initial states - declare and assign
04:39

Step 1 cont. - Initial states - assign values to arrays
07:20

Step 2 - Make the new game button work
05:44

Step 3 - Canvas click event
06:59

Step 3 cont. - Canvas click function - retrieve canvas ids
05:57

Step 4 - Draw relevant shapes on canvas
06:45

Step 4 cont. - X and O draw codes
07:54

Step 4 cont. - Test intermediate output
02:20

Step 5 - Winner check
09:50

Step 5 cont. - Display game results
03:07

Error condition alerts
08:25

I've attached the script.js file here. You can find the JavaScript and HTML5 canvas code we used for this project on here.

script.js file - Tic Tac Toe game
00:05

I've uploaded a zip file with the entire Tic Tac Toe game code. All the files needed to make this game work are available in this zip file. Please unzip this file and run the index.html file in your browser to make it work. 

You can also upload these files to your server and access the game by visiting a link similar to domainName.com/index.html (replace domainName.com with your domain's name). 

All the code files - Tic Tac Toe game
00:18

We'll go over the topics covered in the last few sections. You'll only be questioned on the Javascript and HTML5 concepts that we've covered in this project. You'll have around 1 minute to answer each question (20 minutes in total). 

Javascript & HTML5 Canvas Practice Test
11 questions
+
Conclusion & Feature ideas
2 Lectures 02:01
Congrats!
00:29

New features that you can try to create for this game
01:31
About the Instructor
Aarthi Elumalai
4.6 Average rating
75 Reviews
4,752 Students
3 Courses
Internet marketer and small business consultant

I've been making money online for over 6 years now, right from when I finished high school. I kept equipping my knowledge and trying out new methods throughout college, so when I finished my studies, I can work for myself and someone else. I'm proud to say that I accomplished that goal.

My businesses involve affiliate marketing, services, list building, Kindle etc. I believe in keeping my eggs in various baskets, and I preach what I practice & believe.

I recently decided to document my methods and knowledge in the form of helpful information products. I believe in being as thorough as possible, and that's what you'll find in my courses.

I cover every aspect of a business or method so my student is equipped with the complete knowledge they need to start their business and run it successfully.