Tic-Tac-Toe

This week your assignment is to create a web-based version of the classic game Tic-Tac-Toe. The classic rules are to be applied. Requirements for a perfect score The computer player must choose automatically. Human player's choices must be processed via html form POSTs. Must implement a usable interface (see below), the more advanced your interface... the higher your score. Included below is a template that can be used if you lack HTML experience. However points will be deducted if you fail to customize the template for your code. The program must be able to determine a winner (or a draw) for all 8 winning combination The program must prevent both the user and computer from choosing an already used block. Bonus Points Automate both players, but instead of choosing randomly implement some form of BASIC artificial intelligence. For example automatically blocking when the opponent has 2 in a row. Coding Tips To make your game remember each move, you will have to set a default value for each form field from $_POST. If you don't, every time you move... the game will reset. See the "form memory" example below, or the code on this page. Using the readonly html attribute will prevent a user from changing the contents of a form field, but will still POST the value when the form is submitted. The disabled attribute will not POST the value... don't use it. Using variable variable names may help simplify your code Check the PHP cookbook for examples of form processing when you get stuck.

Example code

# Form Memory $f1 = ''; if( !empty( $_POST['f1'] ) ){ $f1 = $_POST['f1']; }

# Usage...

Attached Files:

Tic-Tac-Toe HTML Template (3.794 KB)

# Your PHP code can go here... or you can do a require() to another file

?>

$(document).ready(function(){

// This block of code prevents you from entering anything but X or O

$('input').bind('keyup',function() {

if( $(this).hasClass('button') == false ){

this.value = this.value.toUpperCase();

if(this.value != 'X' && this.value != 'O') {

this.value = '';

}

}

});

// This block of code makes the used spots on the grid readonly once used

$('input').each(function(i){

this.value = this.value.toUpperCase();

if(this.value == 'X' || this.value == 'O') {

$(this).addClass('disabled').attr('readonly', true);

//this.readOnly = true;

}

});

});

body * { padding:0; margin:0; }

.disabled { background: #eeeeee; }

.button { display: block; width:180px; margin: 10px 0; }

#gameboard { border-collapse:collapse; padding:0; margin:0; }

#gameboard tr:nth-child(even) {

border-top:2px solid black;

border-bottom:2px solid black;

}

#gameboard tr td:first-child { border-right:2px solid black; }

#gameboard tr td:last-child { border-left:2px solid black; }

#gameboard input {

font-size:50px;

width:60px;

padding:3px;

text-transform:uppercase;

text-align:center;

}