Games : Battleship / The JavaScript Source

Browse Doc JS's Tips!

Promotions

Free Announcements

General

Enter into a naval battle against your computer. But watch out, your adversary is not stupid!

Click here to open the game in a new window.

Notes

Created by: Jason Hotchkiss
Posted: December 15, 1999

Source Code

Paste this source code into the designated areas.

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

.intro { font-size:10pt; font-style:italic }
.heading { font-size:14pt; font-weight:bold; font-family:sans-serif }
.title { font-size:18pt; font-weight:bold; background-color:navy; color:white; text-align:center; font-family:sans-serif }

Body

Paste this code into the BODY section of your HTML document

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Jason Hotchkiss |  */

/* Information used to draw the ships */
var ship =  [[[1,5], [1,2,5], [1,2,3,5], [1,2,3,4,5]], [[6,10], [6,7,10], [6,7,8,10], [6,7,8,9,10]]];

/* Information used to draw sunk ships */
var dead = [[[201,203], [201,202,203], [201,202,202,203], [201,202,202,202,203]], [[204,206], [204,205,206], [204,205,205,206], [204,205,205,205,206]]];

/* Information used to describe ships */
var shiptypes = [["Minesweeper",2,4],["Frigate",3,4],[ "Cruiser",4,2],[ "Battleship",5,1]];

var gridx = 16, gridy = 16;
var player = [], computer = [], playersships = [], computersships = [];
var playerlives = 0, computerlives = 0, playflag=true, statusmsg="";

/* Function to preload all the images, to prevent delays during play */
var preloaded = [];

function imagePreload() {
  var i,ids = [1,2,3,4,5,6,7,8,9,10,100,101,102,103,201,202,203,204,205,206];
  window.status = "Preloading images...please wait";
  for (i=0;i<ids.length;++i) {
    var img = new Image, name = "batt"+ids[i]+".gif";
    img.src = name;
    preloaded[i] = img;
  }
  window.status = "";
}

/* Function to place the ships in the grid */
function setupPlayer(ispc) {
  var y,x;
  grid = [];
  for (y=0;y<gridx;++y) {
    grid[y] = [];
    for (x=0;x<gridx;++x)
    grid[y][x] = [100,-1,0];
  }
  var shipno = 0;
  var s;
  for (s=shiptypes.length-1;s>=0;--s) {
    var i;
    for (i=0;i<shiptypes[s][2];++i) {
      var d = Math.floor(Math.random()*2);
      var len = shiptypes[s][1], lx=gridx, ly=gridy, dx=0, dy=0;
      if ( d==0) {
        lx = gridx-len;
        dx=1;
      } else {
        ly = gridy-len;
        dy=1;
      }
      var x,y,ok;
      do {
        y = Math.floor(Math.random()*ly);
        x = Math.floor(Math.random()*lx);
        var j,cx=x,cy=y;
        ok = true;
        for (j=0;j<len;++j) {
          if (grid[cy][cx][0] < 100) {
          ok=false;
          break;
        }
        cx+=dx;
        cy+=dy;
      }
    } while(!ok);
      var j,cx=x,cy=y;
      for (j=0;j<len;++j) {
        grid[cy][cx][0] = ship[d][s][j];
        grid[cy][cx][1] = shipno;
        grid[cy][cx][2] = dead[d][s][j];
        cx+=dx;
        cy+=dy;
      }
      if (ispc) {
        computersships[shipno] = [s,shiptypes[s][1]];
        computerlives++;
      } else {
        playersships[shipno] = [s,shiptypes[s][1]];
        playerlives++;
      }
      shipno++;
    }
  }
return grid;
}

/* Function to change an image shown on a grid */
function setImage(y,x,id,ispc) {
  if ( ispc ) {
    computer[y][x][0] = id;
    document.images["pc"+y+"_"+x].src = "batt"+id+".gif";
  } else {
    player[y][x][0] = id;
    document.images["ply"+y+"_"+x].src = "batt"+id+".gif";
  }
}

/* Function to insert HTML source for a grid */
function showGrid(ispc) {
  var y,x;
  for (y=0;y<gridy;++y) {
    for (x=0;x<gridx;++x) {
      if ( ispc )
      document.write ('<a href="javascript:gridClick('+y+','+x+');"><img name="pc'+y+'_'+x+'" src="batt100.gif" width=16 height=16></a>');
      else
      document.write ('<a href="javascript:void(0);"><img name="ply'+y+'_'+x+'" src="batt'+player[y][x][0]+'.gif" width=16 height=16></a>');
    }
    document.write('<br>');
  }
}

/* Handler for clicking on the grid */
function gridClick(y,x) {
  if ( playflag ) {
  if (computer[y][x][0] < 100) {
    setImage(y,x,103,true);
    var shipno = computer[y][x][1];
    if ( --computersships[shipno][1] == 0 ) {
      sinkShip(computer,shipno,true);
      alert("You sank my "+shiptypes[computersships[shipno][0]][0]+"!");
      updateStatus();
      if ( --computerlives == 0 ) {
        alert("You win! Press the Refresh button on\n"+
        "your browser to play another game.");
        playflag = false;
      }
    }
    if ( playflag ) computerMove();
    } else if (computer[y][x][0] == 100) {
      setImage(y,x,102,true);
      computerMove();
    }
  }
}

/* Function to make the computers move. Note that the computer does not cheat, oh no! */
function computerMove() {
  var x,y,pass;
  var sx,sy;
  var selected = false;

  /* Make two passes during 'shoot to kill' mode */
  for (pass=0;pass<2;++pass) {
    for (y=0;y<gridy && !selected;++y) {
      for (x=0;x<gridx && !selected;++x) {
        /* Explosion shown at this position */
        if (player[y][x][0]==103) {
          sx=x; sy=y;
          var nup=(y>0 && player[y-1][x][0]<=100);
          var ndn=(y<gridy-1 && player[y+1][x][0]<=100);
          var nlt=(x>0 && player[y][x-1][0]<=100);
          var nrt=(x<gridx-1 && player[y][x+1][0]<=100);
          if ( pass == 0 ) {
            /* On first pass look for two explosions in a row - next shot will be inline */
            var yup=(y>0 && player[y-1][x][0]==103);
            var ydn=(y<gridy-1 && player[y+1][x][0]==103);
            var ylt=(x>0 && player[y][x-1][0]==103);
            var yrt=(x<gridx-1 && player[y][x+1][0]==103);
            if ( nlt && yrt) { sx = x-1; selected=true; }
              else if ( nrt && ylt) { sx = x+1; selected=true; }
              else if ( nup && ydn) { sy = y-1; selected=true; }
              else if ( ndn && yup) { sy = y+1; selected=true; }
            } else {
              /* Second pass look for single explosion - fire shots all around it */
              if ( nlt ) { sx=x-1; selected=true; }
              else if ( nrt ) { sx=x+1; selected=true; }
              else if ( nup ) { sy=y-1; selected=true; }
              else if ( ndn ) { sy=y+1; selected=true; }
            }
          }
        }
      }
    }
  if ( !selected ) {
    /* Nothing found in 'shoot to kill' mode, so we're just taking
       potshots. Random shots are in a chequerboard pattern for
       maximum efficiency, and never twice in the same place */
    do {
      sy = Math.floor(Math.random() * gridy);
      sx = Math.floor(Math.random() * gridx/2)*2+sy%2;
    } while( player[sy][sx][0]>100 );
    }
  if (player[sy][sx][0] < 100) {
    /* Hit something */
    setImage(sy,sx,103,false);
    var shipno = player[sy][sx][1];
    if ( --playersships[shipno][1] == 0 ) {
      sinkShip(player,shipno,false);
      alert("I sank your "+shiptypes[playersships[shipno][0]][0]+"!");
      if ( --playerlives == 0 ) {
        knowYourEnemy();
        alert("I win! Press the Refresh button on\n"+
        "your browser to play another game.");
        playflag = false;
      }
    }
  } else {
    /* Missed */
    setImage(sy,sx,102,false);
  }
}

/* When whole ship is hit, show it using changed graphics
*/
function sinkShip(grid,shipno,ispc) {
  var y,x;
  for (y=0;y<gridx;++y) {
    for (x=0;x<gridx;++x) {
      if ( grid[y][x][1] == shipno )
      if (ispc) setImage(y,x,computer[y][x][2],true);
      else setImage(y,x,player[y][x][2],false);
    }
  }
}

/* Show location of all the computers ships - when player has lost */
function knowYourEnemy() {
  var y,x;
  for (y=0;y<gridx;++y) {
    for (x=0;x<gridx;++x) {
      if ( computer[y][x][0] == 103 )
      setImage(y,x,computer[y][x][2],true);
      else if ( computer[y][x][0] < 100 )
      setImage(y,x,computer[y][x][0],true);
    }
  }
}

/* Show how many ships computer has left */
function updateStatus() {
  var f=false,i,s = "Computer has ";
  for (i=0;i<computersships.length;++i) {
    if (computersships[i][1] > 0) {
      if (f) s=s+", "; else f=true;
      s = s + shiptypes[computersships[i][0]][0];
    }
  }
  if (!f) s = s + "nothing left, thanks to you!";
  statusmsg = s;
  window.status = statusmsg;
}

function setStatus() {
  window.status = statusmsg;
}

/* Start the game! */

imagePreload();
player = setupPlayer(false);
computer = setupPlayer(true);
document.write("<center><table><tr><td align=center><p class='heading'>COMPUTER'S FLEET</p></td>"+
"<td align=center><p class='heading'>PLAYER'S FLEET</p></td></tr><tr><td>");
showGrid(true);
document.write("</td><td>");
showGrid(false);
document.write("</td></tr></table></center>");
updateStatus();
setInterval("setStatus();", 500);