Batalha Naval Simples

[code]<html>
<head>
<style type=“text/css”>
body{
background-color:#6A5ACD;
}

		#bloco{
		        width:320px;
						height:280px;
						border-color:#483D8B;
						border-style:groove;
						margin:3% 20% 10% 30%;
				  }
					
		#coluna1{
		        height:270px;
						width:40px;
						border-color:#4169E1;
						border-style:groove;
						float:left;
						}
	
		.quadradoc1{
		           height:40px;
							 width:40px;
							 border-color:#6495ED;
							 border-style:groove;
							 background-color:#6495ED;
		         }
					
	 #coluna2{
		        height:270px;
						width:40px;
						border-color:#4169E1;
						border-style:groove;
						float:left;
						}
			
	#coluna3{
		        height:270px;
						width:40px;
						border-color:#4169E1;
						border-style:groove;
						float:left;
						}
						
						#coluna4{
		        height:270px;
						width:40px;
						border-color:#4169E1;
						border-style:groove;
						float:left;
						}
						
						#coluna5{
		        height:270px;
						width:40px;
						border-color:#4169E1;
						border-style:groove;
						float:left;
						}
						
						#coluna6{
		        height:270px;
						width:40px;
						border-color:#4169E1;
						border-style:groove;
						float:left;
						}
			  
&lt;/style&gt;

&lt;script&gt;
  function Disparo()
  {  
        var valor = Math.random()*10;
	    var valorD = Math.round(valor);
		alert(valorD);
		
	  if ((valorD%2 == 0) && (valorD != 0))
	  {
		div.style.background = url("barco.png");
		alert("Barco Destruído"); 
	  }
	  
  }

&lt;/script&gt;

</head>

&lt;body &gt;
  &lt;div id="bloco"&gt;
	  &lt;div id="coluna1"&gt;
	    &lt;div class="quadradoc1" &gt; <a >A1 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >B1 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >C1 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >D1 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >E1 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >F1 &lt;/div&gt;
		  
	&lt;/div&gt;
	
	&lt;div id="coluna2"&gt;
	    &lt;div class="quadradoc1"&gt; <a >A2  &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >B2 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >C2 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >D2 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >E2 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >F2 &lt;/div&gt;

	&lt;/div&gt;
	
	&lt;div id="coluna3"&gt;
	    &lt;div class="quadradoc1" &gt; <a >A3 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >B3 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >C3 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >D3 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >E3 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >F3 &lt;/div&gt;

	&lt;/div&gt;
	
	&lt;div id="coluna4"&gt;
	    &lt;div class="quadradoc1" &gt; <a >A4 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >B4 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >C4 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >D4 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >E4 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >F4 &lt;/div&gt;

	&lt;/div&gt;
	
	&lt;div id="coluna5"&gt;
	    &lt;div class="quadradoc1" &gt; <a >A5 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >B5 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >C5 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >D5 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >E5 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >F5 &lt;/div&gt;

	&lt;/div&gt;
	
	&lt;div id="coluna6"&gt;
	    &lt;div class="quadradoc1" &gt; <a >A6 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >B6 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >C6 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >D6 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >E6 &lt;/div&gt;
		  &lt;div class="quadradoc1" &gt; <a >F6 &lt;/div&gt;

	&lt;/div&gt;
	
	<img  >
	

	
	
	

	&lt;/div&gt;

&lt;/body&gt;

</html>
[/code]

Pessoal estou tendo dificuldades na parte em que quando houver o click e o numero aleatório for par e diferente de 2 que seja exibida a imagem de um barco destruido, mas acaba saindo um número par e não acontece nada.
Help!!

Poxa na moral me ajuda pessoal, isso é trabalho que tenho que entregar semana que vem! :frowning: :frowning:

nao sou expert em javascript,
mas quero tentar ajudar…

onde vc ta pegando a var ’ div ’ ?

nao vi nenhum ‘getElementById’ e nem um Jquery …

aqui nao funcionou nada.
a idéia é boa. em swing faria com botões…

quem sabe ali vc também pode fazer um formulário html
e usar botões, cada botão chama uma função específica em javascript quem sabe…

gosto de jogos, tenho um trabalho tcc feito para jogos,
7 jogos em java… segue o link…

andava pensando em fazer uma batalha naval…

acho que essa estrutura ta legal…

mas a função teria que receber o parametro…
tipo saber em qual div que o cara clicou…
deve ter como fazer isso, só nao sei como…
só jogar no google…

eu acho que vou tentar fazer algo assim em Javascript depois…
sou mto fraco em javascript e quero aprender.

mas acho que tentaria algo com JQuery.
Abraços

opa…
não aguentei…

tive que tentar fazer.
kkkkkkkkkkkkk

aqui o que eu fiz:
qqer duvida estamos ai

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Batalha Naval</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
        <script type="text/javascript">
            var missed = 0, fired = 0, hit = 0;
           
            function getRandom(min, max) {
                return min + Math.floor(Math.random() * (max - min + 1));
            }  
                    
            function shipHorizontal(){
                // ships like: [*][*][*]
                num = getRandom(1,150);
                var div,div2,div3; 
                div  = $('#div'+ num);
                div2 = $('#div'+ (num+1));
                div3 = $('#div'+ (num+2));
                            
                if(div.attr("data-status") == "water" && div2.attr("data-status") == "water" && div3.attr("data-status") == "water"){
                               
                    div.attr("data-status","ship");                
                    div2.attr("data-status","ship");
                    div3.attr("data-status","ship"); 
                    return true;
                }
                return false;
                    
            }
            function shipVertical(){
                //            ships like: [*]
                //                        [*]
                //                        [*]
 
                num = getRandom(1,150);
                var div,div2,div3; 
                div  = $('#div'+ num);
                div2 = $('#div'+ (num+17));
                div3 = $('#div'+ (num+34));
                            
                if(div.attr("data-status") == "water" && div2.attr("data-status") == "water" && div3.attr("data-status") == "water"){
                               
                    div.attr("data-status","ship");                
                    div2.attr("data-status","ship");
                    div3.attr("data-status","ship");
                    return true;
                }
                return false;
            }
            function shipDiagonal(){
                //            ships like: [*]
                //                           [*]
                //                              [*]
                      
                num = getRandom(1,150);
                var div,div2,div3; 
                div  = $('#div'+ num);
                div2 = $('#div'+ (num+18));
                div3 = $('#div'+ (num+35));
                            
                if(div.attr("data-status") == "water" && div2.attr("data-status") == "water" && div3.attr("data-status") == "water"){
                               
                    div.attr("data-status","ship");                
                    div2.attr("data-status","ship");
                    div3.attr("data-status","ship");
                                
                    return true;
                }
                return false;
            }
                   
            $(document).ready(function(){

                for(i=1;i<=153;i++){
                    id = 'div'+i;
                    $("<div></div>").attr("id","div"+i).attr("data-status","water").css("background-color","blue").appendTo('span');                                
                }
                        
                while( shipHorizontal() == false ){}
                while( shipVertical() == false ){}
                while( shipDiagonal() == false ){}
                    
                $("div").click(function(){

                    var clicked = $(this);
                    fired++;
                    
                    if(clicked.attr("data-status") == "ship"){
                        clicked.css("background-color","green").attr("data-status","destroyed");
                        hit++;
                    }
                    
                    if(clicked.attr("data-status") == "water"){
                        missed++;
                        //clicked.css("background-color","white").attr("data-status","missed");    
                    }    
                
                    $('#overall').html(" Hit: "+hit+" of "+fired+" shots");

                });

                        
            });

        </script>
        <style type="text/css">
            body{

            }

            span{
                width: 1000px;
                float: left;
            }
            div{
                float: left;
                height: 50px;
                width: 50px;
                border-style:solid;
            }
        </style>
    </head>
    <body>
        <span>
        </span>
        <h1>Your status</h1>
        <ul>
            <li id="overall">Shots Fired: </li>
        </ul>
    </body>
</html>