Tic-Tac-Toe

Creating tic-tac-toe in html/javascript for practise

by Marcus Baptiste

HTML

<div class="interface">
     <h1> Tic - Tac - Toe </h1>

    <div id="menu">
        <input id="btn_new_game" type="button" value="New Game"/>
        <input id="btn_show_options" type="button" value="Options"/>
    </div>
    <div id="game_options">    
        <h3> Game Options </h3>
        <input type="radio" name="players" value="1" checked="checked"/>
            <p class="radio_label long_label">Single Player</p><br/>
        <input type="radio" name="players" value="2"/>
            <p class="radio_label long_label">Two Players</p>

        <div id="single_player_options" >
            <p>Your Name</p><input type="text" class="name_box" name="your_name" value="player"/>
            <input type="button" name="save_your_name" value="save"/><br />
            <p class="radio_label" style="margin-top: 15px;">Symbol</p>
            <input type="radio" name="your_symbol" value="X" checked="checked" />
            <p class="radio_label">X</p>
            <input type="radio" name="your_symbol" value="O" />
            <p class="radio_label">O</p>
        </div>
                
        <div id="two_player_options" style="display: none;" >
            <p>Player Names</p>
            <select name="player_select" value="Ex">
                <option value="X" selected="selected">Player X</option>
                <option value="O">Player O</option>
            </select>               
            <input type="text" class="name_box" name="player_name" value="X"/>
            <input type="button" name="save_player_name" value="save" />   
        </div> 
        </div>    
    <div id="board">
    </div>
    
    <p id="status" class="neutral fade">INACTIVE</p>
</div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
}

p {
 margin: 10px 0 4px;
}
.interface {
    background-color: #CACACA;
    padding: 5px 0 20px 0;
}
.interface h1 {
    text-align: center;
}
#menu {
    height: auto;
    width: auto;
    margin: 0 auto;
    text-align: center;
}
input[type=text], select { 
    padding: 2px 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid grey;
}

input[type=text]{ 
    padding: 3px 4px;
}

input[type=button] {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 4px 8px;
    border: 1px solid grey;
}
input[type=button]:hover {
    background-color: #9A9A9A;
    color: white;
}
#status {
    display: block;
    background-color: #ACACAC;
    padding: 10px 0;
    text-align: center;
    font-weight: bold;
    font-size: 1em;

}

/* message status types */
 .neutral {
    color: black;
}
.confirm {
    color: green;
}
.error {
    color: red;
}
/* game options */
#game_options {
   width: auto; height: 150px;
    display: block;
   margin: 20px auto 40px;
    text-align: center;
}

.radio_label { 
    padding: 0; margin:0;
    display: inline-block;
    position: relative; top: -0.3em;
    text-align: left;
    font-size: 1em; line-height: 1em;
    width: auto;
}

.long_label { width: 100px; }

input[type=radio] {

    display: inline-block;
    width: 1.5em; height: 1.5em;
}

.name_box { width: 100px; }
#btn_show_options { display: none; }

/* GAME BOARD */
 #board {
    width: 150px; height: 150px;
    border: 2px solid white;
    padding: 0;
    cell-padding: 0;
    margin: 20px auto;
display: none;
}
.cell {
    height:50px;  width: 50px;   float: left;
    outline: 1px solid #ABABAB;
    background-color: #FEFEFE;
    text-align:center; 
    color: blue;
    font-size: 2em; line-height: 1.5em;
    font-weight: bold;
    cursor: pointer;
}
.cell:hover {
    background-color: #ECECEC;
}



/*css animations */

JavaScript

//game base data
var numPlayers = 1;
var playerNames = { "X": "Ex", "O": "Oh" };
var gameOn = false; //use this to check all actions before executing
var computerTurn = false;
var computerHover =  undefined;

//elements 
var btnNewGame = document.getElementById("btn_new_game");
var players = document.getElementsByName("players");
var playerSelect = document.getElementsByName("player_select")[0];
var playerName = document.getElementsByName("player_name")[0];
var yourName = document.getElementsByName("your_name")[0];
var btnSaveName = document.getElementsByName("save_player_name")[0];
var btnSaveYourName = document.getElementsByName("save_your_name")[0];
var yourSymbol = document.getElementsByName("your_symbol");

var gameOptions = document.getElementById("game_options");
var singlePlayerOptions = document.getElementById("single_player_options");
var twoPlayerOptions = document.getElementById("two_player_options");
var btnShowOptions = document.getElementById("btn_show_options");
var board = document.getElementById("board");
var cells = [];


//game objects
//player object
function Player(name, symbol) {
    this.name = name;
    this.symbol = symbol;
}

//cell object
function Cell(cellIndex) {   
    //create graphic of cell 
    var tempCell = document.createElement('div');
    var cellRef;
    var value = ""; 
    tempCell.id = "cell" + cellIndex;
    tempCell.setAttribute("class", "cell");
    board.appendChild(tempCell);
    cellRef = document.getElementById("cell" + cellIndex);
    cellRef.innerHTML = ""; //only using innerHTML for text on cells
    
    
    //functions 
    this.getValue = function getValue() {
        return value;
    }
    
    this.markCell = function markCell() {
        cellRef.style.transition = "background 0.5s linear 0s";
        cellRef.style.background = "#888";
    }
    
    //reset cell
    this.reset = function reset() {
        cellRef.innerHTML = "";
        cellRef.style.background = "#fff";
        value = "";
    }
   
 ...