Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Raudnei

Uma função para jogo da velha

Por , em Javascript

Recommended Posts

Raudnei    0

Raudnei
Postado

Olá, bom dia. Necessito de ajuda para construir uma função em javascript, coisa simples, mas para quem está iniciando é meio complicado.

 

Fiz um jogo da velha, que nele deve ter o TABULEIRO, e o click só vale dentro da area do canvas , ok ... até aí eu consegui fazer, mas tem uma parte que " A CADA CLIQUE NA AREA DO CANVAS , DESENHAR UMA BOLINHA, ALTERNADA DE CORES DIFERENTES " .

 

Isso aqui que quero fazer -> Com Javascript, capturar a posição do mouse dentro dos limites do desenho e, a cada clique, desenhar de forma alternada o círculo ou o traço.

 

Fiz o código , falta a função :( que tá brabo pra mim 

<body onload="javascript: mesadojogodavelha();">
  
  
<canvas onclick="clicandu()" width="500" height="500" id="bordas"></canvas>

function mesadojogodavelha()
{
   var bordas = document.getElementById('bordas');
  
   width = bordas.width;
   height = bordas.height;
   context = bordas.getContext('2d');

   context.beginPath();
   context.strokeStyle = '#000'; 
   context.lineWidth   = 2;

   context.moveTo((width / 3), 0);
   context.lineTo((width / 3), height);

   context.moveTo((width / 3) * 2, 0);
   context.lineTo((width / 3) * 2, height);

   context.moveTo(0, (height / 3));
   context.lineTo(width, (height / 3));

   context.moveTo(0, (height / 3) * 2);
   context.lineTo(width, (height / 3) * 2);

   context.stroke();
   context.closePath();
    
}

function clicandu (){
  
img = new Image();
img.src = "http://www.dikopataka.com.br/images/bolinha_vermelha.png";
context.drawImage( img , 50, 50);
  
  img = new Image();
img.src = "http://www.dikopataka.com.br/images/bolinha_amarela.png";
context.drawImage( img , 50, 50);

 
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Seria algo nessa pegada?

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<style type="text/css">
		#tabuleiro{
			width: 300px;
			height: 300px;
			background-color: #333;
		}
		
		.pos{
			float: left;
			width: 33%;
			height: 33%;
		}
	</style>
	<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
	
			var url_vermelha = "url('http://www.dikopataka.com.br/images/bolinha_vermelha.png')";
			var url_amarela = "url('http://www.dikopataka.com.br/images/bolinha_amarela.png')";
			
			var click = 0;
			
			$( ".pos" ).bind( "click", function() {
				if(click % 2 ==0){
					$( this ).css({'background-image': url_vermelha, 'background-repeat' : 'no-repeat'})
				} else {
					$( this ).css({'background-image': url_amarela, 'background-repeat' : 'no-repeat'})
				}
				
				click++;
				
			});
		});
	
	</script>
	
	<div id="tabuleiro">
		
		<div id="id_col1" class="pos">.</div>
		<div id="id_col2" class="pos">.</div>
		<div id="id_col3" class="pos">.</div>
		
		<div id="id_col4" class="pos">.</div>
		<div id="id_col5" class="pos">.</div>
		<div id="id_col6" class="pos">.</div>
		
		<div id="id_col7" class="pos">.</div>
		<div id="id_col8" class="pos">.</div>
		<div id="id_col9" class="pos">.</div>
	</div>
	
</body>
</html>
Live Demo:

http://gabrieldarezzo.github.io/velha/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Raudnei    0

Raudnei
Postado

GABRIEL VOCÊ ACERTOU EM CHEIO !

 

 

Só faltou um detalhe, que eu não citei, era javascript + CANVAS (o meu tabuleiro fiz no canvas ) , mas o seu código é o que eu estava precisando, essa lógica aí .

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Show.

Eu ia explicar porem ia sair na hora.

 

Basicamente eu dividi a area via css (width: 300px;height: 300px) por 3 ( 33% ) oq da uns 100 pixel horizontal e vertical pra cada um (equivalente ao tabuleiro)

 

Ai utilizando o seletor $('.pos') monitorei qualquer click que ocorrer dentro dele.

$( ".pos" ).bind( "click", function() {

fora do escopo desta função coloquei um contador/incrementador e verifiquei se é par (2 % 0 == 0) OU impar (2 % != 0) para trazer uma imagem diferente da outra.

if(click % 2 == 0){

Um desafio pra ti!

 

Como saber se já foi clicado? evitando um 'X' virar um 'O'

Se conseguir resolver usando matriz multidimensional é ponto a mais em!!! haha

 

 

Tentai desenvolver ai qualquer coisa da um grito ;) abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito