Untitled

 <!DOCTYPE html>
<html>
<head>
  <title></title>
<style>
  input {
    width: 30px;
    height: 30px;
  }
  canvas {
    border: 1px solid black;
  }
</style>
<script type="text/javascript">
//Variables globales
var tabla0=[];
var canvas;
var ctx;
var libres=100;

//Funcion main
function init(){
  //Funcion que inicializara las variables globales
  for(var i=0;i<=9;i++){
    var aux=[];
    for(var j=0;j<=9;j++){
        aux.push(0);
    }
      tabla0.push(aux);
  }
  canvas=document.getElementById("myCanvas");
  ctx=canvas.getContext("2d");

  canvas=document.getElementById("myCanvas1");
  ctx1=canvas.getContext("2d");
  pintarTablero();
}

function pintarTablero(){
  //Funcion que dibuja las lineas del tablero
  ctx.lineWidth=0.5;
  ctx.strokeStyle='rgb(0,0,0)';
  ctx.fillStyle='rgb(173,216,230)'; //Color azul por defecto

  ctx1.lineWidth=0.5;
  ctx1.strokeStyle='rgb(0,0,0)';
  ctx1.fillStyle='rgb(173,216,230)'; //Color azul por defecto

  for(var i=0;i<=9;i++){
    for(var j=0;j<=9;j++){
      ctx.strokeRect(i*30,j*30,30,30);
      ctx1.strokeRect(i*30,j*30,30,30);
      ctx.fillRect(i*30,j*30,30,30);
      ctx1.fillRect(i*30,j*30,30,30);
    }
  }
}

function pintarBotones(){
  for(var i=0;i<=9;i++){
      document.write("<br />");
    for(var j=0;j<=9;j++){
        document.write("<input type='button'  value='' onclick='tirar("+i+","+j+")' />");
    }
  }
}

function tirar(x,y){
  var inicioX=x*30;
  var inicioY=y*30;
  if (tabla0[y][x]==0 || tabla0[y][x]==1){
    ctx.fillStyle='rgb(30,255,200)';//0,0,60
    ctx.fillRect(inicioY,inicioX,30,30);
    //alert(tabla0[y][x]); ver valor de posición
    libres--;
    //tiradaPC();
  }else if(tabla0[y][x]==40){
    alert("BOOM");
    ctx.fillStyle='rgb(100,0,0)';
    ctx.fillRect(inicioY,inicioX,30,30);
  }
}

function tiradaPC(){
  var x=Math.floor(Math.random()*3)+0;
  var y=Math.floor(Math.random()*3)+0;
  var inicioX=x*30;
  var inicioY=y*30;

  if (tabla0[x][y]==0){

      ctx1.strokeRect(inicioX,inicioY,30,30);

      tabla0[x][y]=1;
      libres--;
  }
}

function cargarSubmarinosPC(){
    for(var i=0;i<=3;i++){
        var x=Math.floor(Math.random()*10);
        var y=Math.floor(Math.random()*10);
        if (tabla0[x][y]==0) {
          tabla0[x][y]=40;
          pinta();

          if(tabla0[x-1]!=undefined){
            if (tabla0[x-1][y-1]==0) {
                tabla0[x-1][y-1]=1;
            }
            if (tabla0[x-1][y]==0) {
                tabla0[x-1][y]=1;
            }
            if (tabla0[x-1][y+1]==0) {
                tabla0[x-1][y+1]=1;
            }
          }

          if (tabla0[x][y-1]!=undefined) {
                tabla0[x][y-1]=1;
              }

          if (tabla0[x+1]!=undefined) {
            if (tabla0[x+1][y+1]==0) {
                tabla0[x+1][y+1]=1;
            }
            if (tabla0[x+1][y]==0) {
                tabla0[x+1][y]=1;
            }
            if (tabla0[x+1][y-1]==0) {
                tabla0[x+1][y-1]=1;
            }
          }

          if (tabla0[x][y+1]!=undefined) {
                tabla0[x][y+1]=1;
              }

        }else{
          var ok=false;
          while((tabla0[x][y]==40 || tabla0[x][y]==1) && ok==false){
            x=Math.floor(Math.random()*10);
            y=Math.floor(Math.random()*10);
            if (tabla0[x][y]==0){
                tabla0[x][y]=40;
                pinta();

              if(tabla0[x-1]!=undefined){
                if (tabla0[x-1][y-1]==0) {
                    tabla0[x-1][y-1]=1;
                }
                if (tabla0[x-1][y]==0) {
                    tabla0[x-1][y]=1;
                }
                if (tabla0[x-1][y+1]==0) {
                    tabla0[x-1][y+1]=1;
                }

              }

              if (tabla0[x][y-1]!=undefined) {
                tabla0[x][y-1]=1;
              }

              if (tabla0[x+1]!=undefined) {
                if (tabla0[x+1][y+1]==0) {
                    tabla0[x+1][y+1]=1;
                }
                if (tabla0[x+1][y]==0) {
                    tabla0[x+1][y]=1;
                }
                if (tabla0[x+1][y-1]==0) {
                    tabla0[x+1][y-1]=1;
                }
              }

              if (tabla0[x][y+1]!=undefined) {
                tabla0[x][y+1]=1;
              }

              ok=true;
            }
          }
        }
    }
}

function pinta(){
  for(var i=0;i<=9;i++){
    for(var j=0;j<=9;j++){
      if(tabla0[j][i]==40 || tabla0[j][i]==30){
          ctx.strokeStyle='rgb(0,0,0)';
          ctx.fillStyle='rgb(0,200,0)'; //Color del barco
          //ctx.strokeRect(j*30,i*30,30,30);
          ctx.fillRect(j*30,i*30,30,30);
      }
    }
  }
}

</script>
</head>
<body>
<pre><h1>      tablero PC        tablero Usuario</h1></pre>
<canvas id="myCanvas" width="300px" height="300px"></canvas>
<canvas id="myCanvas1" width="300px" height="300px"></canvas>
<br />
<script type="text/javascript">
  init();
  pintarBotones();
  cargarSubmarinosPC();
  document.write("<table border>");
  document.write("<tr>");
  for (var i = 0; i < tabla0.length; i++) {
    for (var j = 0; j < tabla0.length; j++) {
      document.write("<td>"+tabla0[j][i]+"</td>");

    }
    document.write("</tr>");
  }

  document.write("</table");
</script>
</body>
</html>