Othello

CS:Data Structures pair project implementing the game and AI.

HTML

<body>
    <div id="applet"></div>
    <h1>Othello</h1>
    <h2>CS 201 Final Project 12/M3/2007</h2>
    <h3>By Kazuaki Okumura & Michael Luby</h3>
    <h2>Ported to JavaScript 7/T17/2014</h2>
    <h3>by Michael Luby</h3>
</body>

CSS

#applet{
    width: 400px;
    background-color: #EEE;
    text-align: center;
}
#gameState{
    text-align: center;
}
#board{
    margin-top: 5%;
    padding-bottom: 5%;
}
#LEFT, #CENTER, #RIGHT{
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
}
#LEFT{
    float:left;
    padding-right: 15%;
}
#RIGHT{
    float:right;
    padding-left: 15%;
}
button{
    margin: 1px;
    padding: 5%;
}

JavaScript

// Othello Applet (graphics code adapted from Postfix Calculator Applet
// 12/M3/2007
// CS 201 Final Project  -  Kazuaki Okumura & Michael Luby
$(document).ready(function(){
    //***numRanks and numFiles control the dimensions of the gameboard
    //***the four starting pieces are initialized in "initializeGame()"
    //***the computer player can be set to black(1), white(2) or off (!=1,2)
    //***by changing the integer value in "if(currentPlayer == 2)" in "placeTile()"
    // instance variables
    var player1sum; // label used to show player 1's total tiles
    var gameState; // label used to show game state
    var player2sum; // label used to show player 2's total tiles
    var numRanks = 8; // ranks are horizontal
    var numFiles = 8; // files are vertical
    var currentPlayer; //1 = black, 2 = white	
    var boardArray = [];
    var tempBoard= [];
    var flippable; //boolean
    // local color constants
    var black = "black";
    var white = "white";
    var green = "green";
    var dgreen = "gray";
    //code to set up the applet, including layout
    $("#applet").css("background-color", "black");
    $("#applet").append("<div id='gameState'>");
    gameStatePanel();
    $("#applet").append("<div id='board'>");
    initializeGame();

    function gameStatePanel(){
    //dynamic text fields that display the state of the game (in progress, black won,
    // white won, draw) and sum of player 1's tiles, sum of player 2's tiles
        var resultPanel = $("#gameState");
        resultPanel.css("background-color",dgreen);
        resultPanel.append("<div id='LEFT'>");
        resultPanel.append("<div id='CENTER'>");
        resultPanel.append("<div id='RIGHT'>");
        //displays the sum of player 1 (black)'s tiles in the upper left
        player1sum = $("#LEFT"); 
        //player1sum.css("fontTimesRoman", Font.BOLD, 30));
        player1sum.css("background", white);
        player1sum.css("color", black);
        player1sum.text("Black: ");
      ...