Menu

Update: Reversi board game in PHP and Javascript

This is an old post from 2012. As such, it might not be relevant anymore.

I like playing the occasional game of Reversi, and thought it would prove to be an interesting project (creating something like RedHotPawn for chess). Several hours programming later I had a simple working prototype. A couple more hours later I added in some missing features and smartened everything up.

Demonstration and Download

To view a demonstration of the code in action, click here.

You can view the Github repository here.

The PHP backend

This type of program is often used in online games like action bank slots and GoBonanza. It is designed to be flexible — it can handle boards of any size and will place the starting 4 disks in the center. The PHP is also very quick — the size of the board does not really effect the performance due to the way its programmed. It only allows legal moves to be played, each move needs to flip at least one of your opponents disks, if you play an invalid move it will give you the option to skip your play.

A quick snippet of the traversing function in the PHP class

<?php
/**
 * Traverse the board to see if we can take any of our opponants disks.
 *
 * To traverse the board we can add, substract, or do nothing with each X and Y coord.
 * Keep traversing until we reach an empty position, a wall, or our own disk. Once
 * reached an end, traverse back down the coords replacing the disks with our own.
 *
 * @param $xDiff int
 * @param $yDiff int
 * @access private
 */
public function doTraverse($xDiff, $yDiff) {
    // Set variables
    $x = $this->_x;
    $y = $this->_y;
    $continue = true;
    
    // Begin the loop
    do {
        // Work out the new coords to test
        $x += $xDiff;
        $y += $yDiff;
        
        // What is in the next position?
        $next = isset($this->_boardContent[$y][$x])
            ? $this->_boardContent[$y][$x]
            : 'e'; // Edge

        // Have we hit an edge or an empty position?
        if ($next == 'e' || $next == '-') {
            $continue = false;
        }
        
        // Have we reached our own disk colour?
        else if ($next == $this->_turnInPlay) {
            // We are currently at our own disk, move back one so we are at our
            // .. last free (potentially) disk.
            if ($xDiff > 0) { $x--; } else if ($xDiff < 0) { $x++; }
            if ($yDiff > 0) { $y--; } else if ($yDiff < 0) { $y++; }
            
            // Are we where we started?
            while ($x != $this->_x || $y != $this->_y) {
                // Change this disk to the player who just moved
                $this->_boardContent[$y][$x] = $this->_turnInPlay;
                
                // Set the number of disks this flipped
                $this->_disksFlipped++;
                
                // Move back one coord to begin another replacement
                if ($xDiff > 0) { $x--; } else if ($xDiff < 0) { $x++; }
                if ($yDiff > 0) { $y--; } else if ($yDiff < 0) { $y++; }
            }
            
            // We have converted all of the possible disks, exit the traverse
            $continue = false;
        }
    } while ($continue);
}

The Javascript frontend

Javascript provides a real-time view of what disks will be flipped. The traversing function is a virtual copy of the PHP classes.

Functionality to be built

One piece of functionality that is really needed is ensuring a legal move is actually possible. If it isn’t then it automatically skips to the next player, and if that player cannot play a legal move either then it ends the game. I’m not sure if it will be best to implement this in either PHP or Javascript — both options have their benefits.