Batalha Naval Simples

Josean771 · Setembro 15, 2012, 8:53am

[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!!

Josean771 · Setembro 15, 2012, 7:02pm

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

d34d_d3v1l · Setembro 15, 2012, 8:13pm

nao sou expert em javascript,
mas quero tentar ajudar…

onde vc ta pegando a var ’ div ’ ?

nao vi nenhum ‘getElementById’ e nem um Jquery …

raghy · Setembro 15, 2012, 8:16pm

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…

d34d_d3v1l · Setembro 15, 2012, 8:21pm

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

d34d_d3v1l · Setembro 16, 2012, 3:09am

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>

system · Janeiro 6, 2016, 5:11am

Batalha Naval Simples

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI