How to write a TicTacToe program in Javascript

2

Stats

5,402 visits, 7,945 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 4 Mar, 2014. Last updated 19 Feb, 2019

Here is a tutorial that will hopefully help you to make an object-oriented Javascript program that runs a TicTacToe game on a webpage.

Design

First of all, you need to think about what kinds of classes you will be using in your program. After all, if you want to be object-oriented, you can't just throw all your code into one big file. So, what you need to do is draw out a rough UML diagram describing the classes you want to use, including their variables and functions.

An example:

Implementation: Model

Now, make Javascript files for each of your classes, and fill in the variables and functions that you planned for them earlier. Those will make up your model classes. However, you will also need some more code for your GUI.

Implementation: View

Make another Javascript file that will load when the webpage is ready. It will need to handle some events, such as a mouse click on a square of the TicTacToe grid. You will also need to build the grid for the page, and it is not entirely intuitive, so here's some example code for that part:

        (function() {
    		var source = $("#grid-template").html();
    		var template = Handlebars.compile(source);
    		
    		$("#grid").html(template(GRID_NAMESPACE.data));
    	}) ();

You'll also need to make an HTML file. It will need to have access to all of the scripts you have written, as well as a few other scripts you can find online: JQuery and Handlebars. JQuery is a large library of pre-built functions that are useful for almost any Javascript project, and Handlebars will help with your event handling and with connecting the Javascript GUI file to the HTML. Use a Handlebars template to build the grid on the page:

        <script id="grid-template" type="text/x-handlebars-template">
    			<table border=1>
    				<tbody>
    					{{#each grid}}
    					<tr>
    						{{#each this}}
    						<td id="{{this}}">&nbsp;&nbsp</td>
    						{{/each}}
    					</tr>
    					{{/each}}
    				</tbody>
    			</table>
    		</script>

You will also need a div called "grid" (or whatever other name you prefer, just make sure that it matches whatever you use in the Handlebars script above), so that the page will make the table.

Test it!

Now your program should be ready to run, if you did everything perfectly. Unfortunately, this is Javascript, so that's pretty unlikely. You could try the old method of staring at your code and running it and trying to figure out what's wrong, or you could implement some sort of testing ability for your project. While you could do something simple like inserting diagnostic alerts, there is also a testing library you can import, (like JQuery or Handlebars, but for testing) called Jasmine. With Jasmine, you can make spec files that serve a similar purpose to JUnit files in Java.

The End

While I'm not going to post every bit of code, I hope that this tutorial has pointed you in the right direction for making a Javascript TicTacToe game that not only works, but also follows OO principles.

  • 0 Comments

Want to leave a comment? Login or Register an account!