<Javascript Tic Tac Toe ⁄ >

10454

2009-02-24

mySnippets javascript

Download

Bookmark This

Here's a game that, I think, almost everyone knows about, Tic-Tac-Toe, who never played this one?
I’ll try to give a full working example, well, almost full, I won’t implement a Human vs Computer, only Human Vs Human, later on a future snippet I'll try to do it.
If you still can’t figure it out, what Tic-Tac-Toe means, please check this link in wikipedia

The algorithm will be a rather basic one, I'll just make a brute force to check if the last player has a winning path, this is, we'll have an object that keeps all valid moves to win a game, and at each player move, will check it.

We'll have 9 squares, each one will have an internal number (0 until 8), starting at upper left corner, like the following picture:

style.css

*{padding: 0; margin: 0;}
 
 
body{
  font-family: Verdana, Tahoma, Arial, sans-serif;font-size: 62.5%;
  color: #000;background-color: #fff;text-align: center;
}
 
 
div#board_title{
  margin: 0 auto; text-align: center; font-weight: 900;color: #cc0000;
  font-size: 3em;width: 27.4em; margin-bottom: .5em;
}
 
 
div#board{margin: 0 auto;width: 27.4em;height: 27.4em;}
div#board div{
  float: left;border: solid 0.2em #ce5c00;cursor: pointer;
  width: 8.6em;height: 8.6em; line-height: 8.6em;
}
div#board div#square0,div#board div#square1,
div#board div#square3,div#board div#square4,
div#board div#square6,div#board div#square7{border-left: 0; border-top: 0;}
div#board div#square2,div#board div#square5,
div#board div#square8{border-right: 0; border-top: 0; border-left: 0;}
div#board div#square6,div#board div#square7,
div#board div#square8{border-bottom: 0;}
div#board div.player1,
div#info div#board_info div.player1{background: url("player1.gif") no-repeat center center; color: #fff;}
div#board div.player2,
div#info div#board_info div.player2{background: url("player2.gif") no-repeat center center;}
div#board div.win{background-color: #ffff99;}
div#board div.clear{background: none;}
 
 
div#info{margin: 0 auto; width: 46em;}
 
div#info div#board_console{
  float: left;
  width: 26.5em;
  border: dashed .2em #cc0000;
  padding: .4em;line-height: 2em;
}
div#info div#board_console span{
  color: #fff;font-weight: 700;padding: .1em;
}
div#info div#board_console span.player1{background-color: #204a87;}
div#info div#board_console span.player2{background-color: #4e9a06;}
div#info div#board_console span.draw{background-color: #cc0000;}
 
div#info div#board_control, div#info div#board_info{
  float: right;
  border: solid .5em #ce5C00;
  line-height: 1.8em;
  padding: .2em;width: 16.5em;
}
div#info div#board_control input{
  background-color: #ffffd4; border: solid .1em #e9b96e;
  font-size: 1em; font-weight: 700; padding: .4em;
}
div#info div#board_control label.player{font-weight: 700; font-size: 2em;float: right;}
div#info div#board_control label.one{color: #204a87;}
div#info div#board_control label.two{color: #4e9a06;}
div#info div#board_control label.draw{color: #cc0000;}
div#info div#board_control span{float: left;}
 
div#info div#board_info{margin-top: .4em; clear: right; height: 8em;color: #000;}
div#info div#board_info div{height: 5.8em;background-position: center top;}

Events.js, this file's responsible for events management, that is, our page has elements and those elements will react to events/ triggers, with this class we'll be able to add or remove events, such as onchange, onload, etc, etc.

/**
* Static Class
* Manage Events
*/
Events = function(){}
 
/**
* Add Event
*
* Source and full credits to:
* http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
*
* @param Object
* @param Object
* @param Object
*/
Events.AddEvent = function(obj, type, fn){
  if(!obj) return;
 
  this.RemoveEvent(obj, type, fn);
  if (obj.addEventListener) {obj.addEventListener(type, fn, false);}
  else {
    if (obj.attachEvent) {
      obj["e" + type + fn] = fn;
      obj[type + fn] = function(){
      obj["e" + type + fn](window.event);
      }
      obj.attachEvent("on" + type, obj[type + fn]);
    }
  }
}
 
/**
* Remove Event
*
* Source and full credits to:
* http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
*
* @param Object
* @param Object
* @param Object
*/
Events.RemoveEvent = function(obj, type, fn){
  if (obj.removeEventListener) {
    try{obj.removeEventListener(type, fn, false);}catch(e){}
  }
  else{
    if (obj.detachEvent) {
      obj.detachEvent("on" + type, fn);
      obj[type + fn] = null;
      obj["e" + type + fn] = null;
    }
  }
}

Dom.js, responsible for the DOM operations

/**
* Static Class
*
* A few basic DOM manipulations
* 
* @author: pedrocorreia.net
*/
Dom = function(){}
 
/**
* Get Html Object reference
*
* @param String Id Object
*/
$=function(id){return document.getElementById(id);}
 
/**
* Get, set or append html object css class
*
* @param Object Html Object
* @param Optional String Class Name
* @param Optional Int Append Class?
*/
$class=function(obj /**, css_class**/ /**, append*/){
  if(arguments[1] && arguments[2]){$(obj).className+=" "+arguments[1];}
  else if(arguments[1]){$(obj).className=arguments[1];}
  else{return $(obj).className;}
}

Messages.js, all game messages

/**
* Static Class
*
* Language file
*
* @author: pedrocorreia.net
*/
Messages = function(){}
 
/**
* Where game's already finished
*
* @param String Player Name
* @param Int Who won the game
*/
Messages.AlreadyFinished = function (name, number){
  var str="";
  switch (number){
    case 0:
      str="Draw.";
    break;
    default:
      str=name+" "+number+"'s the winner!";
    break;
 
  }
  return "Game already finished. "+str+"\n\Please press \"New Game\"";
}
 
/**
* Square already filled
*/
Messages.SquareFilled = function(){
  return "Square already filled!";
}
 
/**
* Who won the game
*/
Messages.Winner = function(clss, name, number, path){
  return "<span class='"+clss+"'>"+name+": "+number+", won the game<span> | Squares: "+path;
}
 
/**
* Draw message
*/
Messages.Draw = function(clss){
  return "<span class='"+clss+"'>The game finished tied up!</span>"
}
 
/**
* Trace move
*
* @param String Player Name
* @param Int Player Id
* @param Int Square filled
*/
Messages.TraceMove = function(name, number, square){
  return "<b>"+name+":</b> "+number+" | <b>Square:</b> "+square;
}

TicTacToe.js, our main file, will manage all the game

/**
* This class implements the popular game Tic-Tac-Toe
*
* @author: pedrocorreia.net
*/
TicTacToe = function (){
 
  //needed to allow private functions to call public methods
  var self=this;
 
  //saves all board moves
  var _board_moves;
 
  //all possible winning moves
  var _win_moves = {
    1: {pos1: 0, pos2: 1, pos3: 2},
    2: {pos1: 3, pos2: 4, pos3: 5},
    3: {pos1: 6, pos2: 7, pos3: 8},
    4: {pos1: 2, pos2: 4, pos3: 6},
    5: {pos1: 0, pos2: 3, pos3: 6},
    6: {pos1: 1, pos2: 4, pos3: 7},
    7: {pos1: 2, pos2: 5, pos3: 8},
    8: {pos1: 0, pos2: 4, pos3: 8}
  }
 
  //game settings
  var _settings = {
    num_squares: 9,
    min_plays_check: 5,
    player: "Player",//generic player name
    prefix_square: "square",
    class_player1: "player1",
    class_player2: "player2",
    lbl_points_player1: "lbl_player1",
    lbl_points_player2: "lbl_player2",
    lbl_points_draw: "lbl_draw",
    class_winning: "win",
    class_draw: "draw",
    console: "board_console"
  }
 
  //game statistics
  var _stats = {
    current_player: 1,
    num_plays: 1,
    winning_player: -1,
    points_player1: 0,
    points_player2: 0,
    points_draw: 0
  }
 
  /**
  * Next move
  */
  var _NextPlayer = function(){
    _stats.current_player=(_stats.current_player==1)?2:1;
    _stats.num_plays++;
    $class("next_player",_CurPlayerClass());
  }
 
  /**
  * Get current player css class
  */
  var _CurPlayerClass = function(){
    return (_stats.current_player==1)?_settings.class_player1:_settings.class_player2;  
  }
 
  /**
  * Add Events
  */
  var _EventHandlers = function(){
    var fn;
    for (var i=0;i<_settings.num_squares;i++){
      fn=(function(i){return function(){ _Select (i);}})(i);
      Events.AddEvent($(_settings.prefix_square+i),"click",fn);
    }
 
    Events.AddEvent($("bt_new_game"),"click",self.NewGame);
    Events.AddEvent($("bt_reset"),"click",_Reset);
  }
 
  /**
  * Check if the selected square is filled or not and check if the 
  * current player has a winning path.
  *
  * @param Int Número da Casa
  */
  var _Select = function(i){
 
    //check if the game ended, having or not a winner
    if(_stats.winning_player>-1 || _stats.num_plays>_settings.num_squares){
      alert(Messages.AlreadyFinished(_settings.player,_stats.winning_player));
      return;
    }
 
    if(_IsSquareEmpty(i)){ //check id the selected square is already filled
      $class(_settings.prefix_square+i,_CurPlayerClass());
      _MarkSquare(i,_stats.current_player);
      _TraceValidMove(i);
      _CheckBoard(_stats.current_player);
      _NextPlayer(); //next move
    }
    else{
      alert(Messages.SquareFilled()); //square already filled
    }
  }
 
  /**
  * Check if the selected square is available
  *
  * @param Int Square number
  * @return Bool
  */
  var _IsSquareEmpty = function(pos){return (_board_moves[pos]==0);}
 
  /**
  * Fill the squre, making it unavailable.
  *
  * @param Int Square number
  * @param Int Player number
  */
  var _MarkSquare = function(pos, player){_board_moves[pos]=player;}
 
  /**
  * Log move
  *
  * @param Int Square number
  */
  var _TraceValidMove = function(square){
    var str=Messages.TraceMove(_settings.player,_stats.current_player,square+1);
    $(_settings.console).innerHTML+=str+"<br/>";
  }
 
  /**
  * Check if in the current move, the player has a winning path 
  *
  * @param Int Player number
  */
  var _CheckBoard = function(player){
    if(_stats.num_plays<_settings.min_plays_check){return;}
 
    var count=0;
    var square="";
 
    for (var move in _win_moves){
      for (var i=1;i<=3;i++){
        square=_board_moves[_win_moves[move]["pos"+i]];
        if(square==player){count++;}
      }
 
      if (count==3){
        var path="";
        for (var i=1;i<=3;i++){
          square=_settings.prefix_square+_win_moves[move]["pos"+i];
          $class(square,_settings.class_winning,1);
          path+=(_win_moves[move]["pos"+i]+1)+";";
        }
 
        _stats.winning_player = player;
        $(_settings.console).innerHTML+=Messages.Winner(_CurPlayerClass(),_settings.player,player,path);
 
        _stats["points_player"+player]++;
        $(_settings["lbl_points_player"+player]).innerHTML=_stats["points_player"+player];
        return;
      }
 
      count=0;
    }
 
    if(_stats.num_plays==_settings.num_squares){
      _stats.points_draw++;
      _stats.winning_player = 0;
      $(_settings.lbl_points_draw).innerHTML=_stats.points_draw;
      $(_settings.console).innerHTML+=Messages.Draw(_settings.class_draw);
    }    
  }
 
  /**
  * Reset
  */
  var _Reset = function(){
    _stats.points_player1=0;
    _stats.points_player2=0;
    _stats.points_draw=0;
    $(_settings.lbl_points_player1).innerHTML=_stats.points_player1;
    $(_settings.lbl_points_player2).innerHTML=_stats.points_player2;
    $(_settings.lbl_points_draw).innerHTML=_stats.points_draw;
 
    self.NewGame();
  }
 
  /**
  * Start a new Game
  */
  this.NewGame = function(){
    for (var i=0;i<_settings.num_squares;i++){
      $class(_settings.prefix_square+i,"clear");
      $(_settings.prefix_square+i).innerHTML=(i+1);
    }
 
    _stats.num_plays=1;
    _stats.current_player=1;
    _stats.winning_player=-1;
    _board_moves = new Array(0,0,0,0,0,0,0,0,0);
    $(_settings.console).innerHTML="";
    $class("next_player",_settings.class_player1);
  }
 
  //EventHandlers
  _EventHandlers();
}

Init.js, this is where initially events will be triggered.

/**
* Init function
*
* @author pedrocorreia.net
*/
Init = function(){
  var tic_tac_toe=new TicTacToe();
  tic_tac_toe.NewGame();
}
 
Events.AddEvent(window,"load",Init);

index.htm,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
    <title>Tic-Tac-Toe</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="Events.js"></script>  
    <script type="text/javascript" src="Dom.js"></script>  
    <script type="text/javascript" src="Messages.js"></script>  
    <script type="text/javascript" src="TicTacToe.js"></script>
    <script type="text/javascript" src="Init.js"></script>  
  </head>
 
  <body>
    <div id="board_title">Tic-Tac-Toe</div>
 
    <div id="board">
      <div id="square0"></div>
      <div id="square1"></div>
      <div id="square2"></div>
      <div id="square3"></div>
      <div id="square4"></div>
      <div id="square5"></div>
      <div id="square6"></div>
      <div id="square7"></div>
      <div id="square8"></div>
    </div>
 
    <div id="info">
 
      <div id="board_console"></div>
 
      <div id="board_control">
        <span>Stats Player 1:</span> <label id="lbl_player1" class="player one">0</label>
        <br />
        <span>Stats Player 2:</span> <label id="lbl_player2" class="player two">0</label>
        <br />
        <span>Draws:</span> <label id="lbl_draw" class="player draw">0</label>
        <br /><br />
        <input type="button" value="New Game" id="bt_new_game" />
        <input type="button" value="Reset" id="bt_reset" />
      </div>
 
      <div id="board_info">Next move<div id="next_player"></div></div>
 
    </div>
  </body>
 
</html>

Here's a full working example of this snippet, convince a friend to Play with you ^_^''

If you have any doubt or found any error, please drop me an email.

10454

2009-02-24

mySnippets javascript

Download

Bookmark This