
This introduction presents a tic tac toe game built with html5 canvas and javascript. It covers 9-box grid, the rules panel, and the new game button that restarts the game.
Create the rules section for the tic tac toe game by adding a heading and three paragraphs describing turns, consecutive moves, and starting anew.
I've attached the index.html file here. You can find the HTML5 code we used for this project on here.
Style tic tac toe headings using unique IDs and CSS selectors (#head, #reserved), set 50px cursive font in cornflower blue, then center the result heading in chocolate with 30px margins.
Style the canvases by applying a solid border and background color to all nine canvases, then adjust their alignment and position images on the current canvas for drawing.
I've attached the style.css file here. You can find the CSS code we used for this project on here.
Explore how conditional statements drive gameplay decisions in JavaScript, using if and switch structures, comparison operators, and comments to control code execution in a Tic Tac Toe game.
Explore how switch statements in JavaScript handle multiple conditions with case blocks, breaks, and an optional default, unlike the if statement. See the execution flow in a practical example.
Explore two-dimensional arrays in JavaScript by creating a parent array of child arrays, populating nested values, and accessing elements with two indices for precise data retrieval in a two-dimensional grid.
Learn how to use the mouse down event with addEventListener, retrieve the target element by id, and change its background color using camelCase style properties in JavaScript.
Explore how JavaScript uses objects to model real-world entities by defining properties and values. Learn the basic syntax to declare objects and access their properties in code.
Learn to draw multiple shapes on a canvas by using beginPath and closePath, moveTo and lineTo, and fill or stroke with color to create outlined or filled shapes.
Learn to draw circles and arcs on the canvas using the arc function, specifying center coordinates, radius, start and end angles in radians, and applying fill styles and colors.
Create and link a JavaScript file to the HTML page for the tic tac toe game. Initialize variables and arrays for the nine boxes inside a window.onload anonymous function.
Initialize one- and two-dimensional arrays for a tic tac toe game, setting nine canvases to false and symbols to blank, with zero-based indices for win conditions.
Create a canvas click handler that retrieves the clicked canvas id, maps it to a box index, obtains the canvas context, and uses a switch to update the game state.
Check the tic tac toe winner by comparing the current symbol against eight winning patterns with a for loop, using a winner array to declare a win or draw.
I've attached the script.js file here. You can find the JavaScript and HTML5 canvas code we used for this project on here.
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).
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!