JS Battleship

JavaScript Battleship with AI

HTML

<div class="boards">
    <div id="topBoard" class="board">dummy</div>
    <br />
    <div id="botBoard" class="board">dummy</div>
</div>
<!--
<div class="boards">
    <div id="cTopBoard" class="board">dummy</div>
    <br />
    <div id="cBotBoard" class="board">dummy</div>
</div>
-->
<div id="actionLog">
</div>
<div class="divclear" />
<div id="p1FireControls">
    <select id="fireypos">
        <option value="0">A</option>
        <option value="1">B</option>
        <option value="2">C</option>
        <option value="3">D</option>
        <option value="4">E</option>
        <option value="5">F</option>
        <option value="6">G</option>
        <option value="7">H</option>
        <option value="8">I</option>
        <option value="9">J</option>
    </select>
    <select id="firexpos">
        <option value="0">1</option>
        <option value="1">2</option>
        <option value="2">3</option>
        <option value="3">4</option>
        <option value="4">5</option>
        <option value="5">6</option>
        <option value="6">7</option>
        <option value="7">8</option>
        <option value="8">9</option>
        <option value="9">10</option>
    </select>
    <button id="fire">FIRE</button>
</div>
<div id="p1ShipControls">
    <select id="shipypos">
        <option value="0">A</option>
        <option value="1">B</option>
        <option value="2">C</option>
        <option value="3">D</option>
        <option value="4">E</option>
        <option value="5">F</option>
        <option value="6">G</option>
        <option value="7">H</option>
        <option value="8">I</option>
        <option value="9">J</option>
    </select>
    <select id="shipxpos">
        <option value="0">1</option>
        <option value="1">2</option>
        <option value="2">3</option>
        <option value="3">4</option>
        <option value="4">5</option>
        <option value="5">6</option>
        <option value="6">7</option>
        <option value="7">8</option>
       ...

CSS

*
{
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 12px;
    opacity: .75;
}

input
{
    width: 20px;
}

.boards
{
    float: left;
    margin-right: 20px;
}

.board
{
    font-size: 16px;
}

#actionLog
{
    width: 300px;
    height: 400px;
    border: solid black 1px;
    float: left;
    overflow: auto;
    padding: 5px;
    font-size: 12px;
}

.divclear
{
    clear: both;
}

.playerName
{
    color: blue;
}

.compName
{
    color: green;
}

.hitText
{
    color: red;
}

.missText
{
    color: grey;
}

.logTxt
{
    padding-left: 22px;
    text-indent: -22px;
}

#p1FireControls
{
    display: none;
}

#p1ShipControls
{
    
}

JavaScript

var al;

function main()
{
    var pTop = new Board(Players.player, $("#topBoard"));
    var pBot = new Board(Players.player, $("#botBoard"));
    var cTop = new Board(Players.computer);
    var cBot = new Board(Players.computer);
    
    al = new ActionLog($("#actionLog"));
    console.log(Ship.types.carrier);
    //pBot.placeAllRandom();
    cBot.placeAllRandom();
   	
    $("#fire").click(function()
    {
        var pos = new Vec2d(parseInt($("#firexpos").val()), parseInt($("#fireypos").val()));
        pTop.logShot(pos, cBot.shoot(pos, Players.player));
    });
    
    $("#placeShip").click(function()
    {
        
    });
}

var Board = function(owner, domobj)
{
    this.domobj = typeof domobj !== "undefined" ? domobj : "";
    this.hidden = this.domobj === "";
    this.owner = owner;
    
    this.data = new Array(10);
    this.ships = [];
    for (var i = 0; i < this.data.length; i++)
    {
        this.data[i] = new Array(10);
        for (var j = 0; j < this.data[i].length; j++)
        {
            this.data[i][j] = '-';
        }
    }
    this.redraw();
};
Board.prototype.getHtml = function()
{
    var output = "";
    var letters = "ABCDEFGHIJ";
    output += "&nbsp;&nbsp;1 2 3 4 5 6 7 8 9 10<br />";
    for (var i = 0; i < this.data.length; i++)
        output += letters[i] + " " + this.data[i].join("&nbsp;") + "<br />";
    return output;
};
Board.prototype.placeShip = function(ship)
{
    if (this.canPlace(ship))
    {
        this.ships.push(ship);
        
        if (ship.direction == Ship.directions.horizontal)
        {
            for (var x = ship.pos.x; x < ship.pos.x + ship.length; x++)
            {
                this.data[ship.pos.y][x] = ship.char;
            }
        }
        else
        {
            for (var y = ship.pos.y; y < ship.pos.y + ship.length; y++)
            {
                this.data[y][ship.pos.x] = ship.char;
            }
        }
        
        this.redraw();
        
        return true;
    }
   ...