Lab 9 - Tic Tac Toe Game with KineticJS


The goal is to create a working Tic Tac Toe game using KineticJS . Game pieces will be implemented to change the shape that appears when the user clicks within that area of the board. The required features to implement will depend on the student's level of experience in Computer Science.


You may start with a single working game piece here: Game piece

Download the HTML file with the game piece to your own computer so you can extend it. Notice that this file loads the KineticJS library from

If you want to test the program when you are not connected to the internet, you may also download the kinetic.js file, and save it in the same folder with your program.

Extend the JavaScript program to make a grid with 9 pieces, stored in a two dimensional array. After building the array, you will add code to what is done when a piece is clicked, so that players take turns, alternating between making moves for X and O. After making each move, you will also check to determine if a player has won the game.

Requirements (100 points needed for full credit)

Credit will be assigned based on correct completion of these features, depending on whether you have completed Data Structures and Algorithm Design.

Features not completed
Data Structures
Data Structures
Grid of 9 pieces, each piece changes when clicked 40 30
Make clicks alternate depending on who's turn it is 20 15
Detect and announce winner 15 12
Add a "reset" button to restart game 15 12
Draw line over winning line of pieces 15 12
Don't allow entries to be changed after made 15 12
Make an interesting animation when someone wins 15 12
Make a custom enhanced game piece 10 10

-- RobertKasper - 2015-04-01

Topic revision: r1 - 2015-04-01 - RobertKasper
This site is powered by the TWiki collaboration platformCopyright &© by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback