Tag Archives: tic tac toe

JavaScript/CSS/HTML || Simple Tic Tac Toe Game With Minimax AI Using Vanilla JavaScript

The following is a module with functions which demonstrates how to create a simple Tic-Tac-Toe game with computer AI using vanilla JavaScript.

This game allows for two or more players, or computer AI vs computer AI. The first player to match 3 pieces horizontally, vertically and diagonally in a row wins!


1. Features

This game allows for two or more players. To add more players, click the “add new” button under the “players” list. To edit a player, click the “edit” button next to a players name.

• Adding and editing a player allows you to change:


1. Name
2. Avatar image url
3. CPU player & difficulty

• To remove a player, click the “remove” button next to the players name.

• A “save game” button allows to save the progress of the game. A file is generated, which consists of the state of the game. This file can be used to reload the game, using the “load game” button.

• Match history is saved, and lets you see the game stats from the previous completed games.

• Player AI uses the minimax algorithm. It has 4 levels of difficulty:


1. Easy
2. Normal
3. Hard
4. Impossible - You will not win!


2. Screenshots

New Game

Initial

End Of Game

Game Over

Match History

Match History

Update Player

Update Player

Add New Player

Add New Player


Add New Player

CPU vs CPU

CPU vs CPU


3. Download & Play

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Java || Simple Tic Tac Toe Game Sample Code GUI

The following is another homework assignment which was presented in an intro to Java class. This program was used to provide more practice creating a graphical user interface.

REQUIRED KNOWLEDGE FOR THIS PROGRAM

JFrame
JMenu
JButtons
JPanel
JOptionPane
How To Play Tic-Tac-Toe
Special Fonts For This Game - Click Here To Download
Executable .Jar File - Click Here To Download & Play

This program features a graphical user interface (GUI) which has nine buttons arranged in a square. A user plays the game by clicking the mouse in a available button. The game then places a symbol on the clicked button alternating between the letters “X” and an “O.”

The game begins by clicking on the “New Game” button. This action will clear away any text on the 9 game buttons. The 9 game buttons are still disabled, but the radio button is enabled. This means someone must select who plays first: “X” or “O.” After selecting the starting player then the 9 game buttons become enabled.

When a player clicks on one of the 9 available game buttons, the text on that button will change into an “X” or an “O.” The game stops when one of the two players has 3 identical symbols in a row, a column, or a diagonal. When there is such a winner, the symbol of the winner is displayed to the screen. Sometimes all 9 game buttons have been clicked on but there is still no winner. In that case the text “Tie” is displayed to the screen.

The two buttons “New Game” and “Quit” remain enabled at all times. Clicking on “Quit” will close the window.

This program was implemented into 3 different files, so the code for this program will be broken up into 3 sections. The three-file solution always has one file (the driver) which contains the “main” function. Another file contains the implementation of the graphical user interface (GUI), and the last file contains logic, which in this case is the game algorithms.

==== File #1 – TicTacToe.java ====

==== File #2 – GUI.java ====

This is the GUI (graphical user interface) class for a three-file solution which implements the game of tic tac toe. The sole purpose of this source code is to define the GUI and call methods in the BusinessLogic class when needed.

==== File #3 – BusinessLogic.java ====

This is the BusinessLogic class for a three-file solution which implements the game of tic tac toe. The is the class containing algorithms.


QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

This program uses custom fonts. To obtain those fonts, click here!

Click here to download & play the executable .jar file.

SAMPLE SCREENSHOT:
(click to enlarge)