Bem-vindo ao fórum do Arena 4G!

Junte-se a essa incrível comunidade para tirar suas dúvidas e ter acesso aos links.

[Tutorial] Como fazer Jogo Da Velha pelo AIDE

Discussão em 'Fórum dos desenvolvedores Android' iniciado por Heroghast, Setembro 23, 2015.

  1. Heroghast

    Heroghast Administrador
    Administrador Moderador Desenvolvedor

    Setembro 1, 2015
    211
    63
    77
    Masculino
    Programador, Designer, Tecnico
    Santos, SP
    [​IMG]

    Bom galera este tutorial tem como intuito te mostrar um pouco do AIDE, esteremos programando um jogo da velha bem simples lembrando que so seguir os passos voce consegue

    Vamos abrir o AIDE e criar um novo projeto
    [​IMG]
    Como de costume vamos eliminar todo código dispensável que foi gerado automaticamente… Nosso ‘hello world’ fica:
    [​IMG]
    Código:
    importandroid.app.Activity;
    importandroid.os.Bundle;
    
      publicclassMainActivityextendsActivity
    {
       @OverridepublicvoidonCreate(Bundle savedInstanceState)
        {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
         }
    }
    Agora vamos criar uma classe ‘Tela’ que é uma extensão da classe ‘View’ que nos permite desenhar na tela

    Código:
    importandroid.app.Activity;
    importandroid.os.Bundle;
    importandroid.view.View;
    importandroid.content.Context;
    
    publicclassMainActivityextendsActivity
    {
         @OverridepublicvoidonCreate(Bundle savedInstanceState)
          {
           super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
           }
             classTelaextendsView
           {
             Tela(Contextc){super(c);}
           }
    }


    Vamos instanciar a classe ‘Tela’ que criamos e vamos atribuir ela como ‘View da app’:

    Tela t;
    @Override public void onCreate(Bundle savedInstanceState)
    {
    super.onCreate(savedInstanceState);
    //setContentView(R.layout.main);
    t=new Tela(this);
    setContentView(t);
    }

    Agora vamos ‘desenhar’ o tabuleiro:


    [​IMG]

    Nao esqueça os Imports

    Código:
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.graphics.Color;
    
    [COLOR=rgb(0, 102, 102)]@OverrideprotectedvoidonDraw(Canvasc)
    {super.onDraw(c);
    Paintp=newPaint();
    p.setStyle(Paint.Style.STROKE);
    p.setColor(newColor().rgb(30,30,30));
    c.drawLine(100,0,100,300,p);
    c.drawLine(200,0,200,300,p);
    c.drawLine(0,100,300,100,p);
    c.drawLine(0,200,300,200,p);
    }
    [/COLOR]

    O método ‘onDraw’ é um método da classe Tela…
    O tabuleiro tem 300×300 px de tamanho para caber em qualquer dispositivo… Em uma outra oportunidade mostrarei métodos de adequar (redimensionando) o tamanho do tabuleiro na tela…
    Agora vamos criar uma variável que armazena os estados das 9 celulas do tabuleiro (um atributo da classe MainActivity):
    (cada ‘0’ representa uma célula no tabuleiro 3×3) (o valor ‘0’ será alterado quando o jogador clicar sobre a célula…)



    Código:
    int[][]tabuleiro={{0,0,0},{0,0,0},{0,0,0}};

    Vamos ‘mapear’ a tela para ‘manusear’ o toque…
    Ou seja, ‘escutar’ o toque na tela e identificar onde foi pressionado…


    O método ‘onTouchEvent’ da clsse ‘Tela’ nos permite identificar ‘onde’ a tela está sendo pressionada (atravéz dos métodos getX() e getY() que ‘retornam’ as coordenadas do ponto onde a tela está sendo pressionada)

    Existem constantes para identificar se é a ‘entrada do toque’ na tela, ou o ‘arrastar do toque’ na tela, ou o ‘abandonar o toque’ na tela… É o ‘abandonar o toque’ que nos interessa: MotionEvent.ACTION_UP
    O código até aqui fica:


    Código:
    [/COLOR]
    package jogo.velha;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.graphics.Color;
    import android.view.MotionEvent;
    
    public class MainActivity extends Activity
    {
        Tela t;
        int[][] tabuleiro={{0,0,0},{0,0,0},{0,0,0}};
        @Override public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            //setContentView(R.layout.main);
            t=new Tela(this);
            setContentView(t);
        }
        class Tela extends View
        {
            Tela(Context c){super(c);}
            @Override public boolean onTouchEvent(MotionEvent me)
            {   
                if(me.getAction()==MotionEvent.ACTION_UP)
                {    float x=me.getX();
                    float y=me.getY();
                }
                return true;
            }
            @Override protected void onDraw(Canvas c)
            {    super.onDraw(c);
                Paint p=new Paint();
                p.setStyle(Paint.Style.STROKE);
                p.setColor(new Color().rgb(30,30,30));
                c.drawLine(100,0,100,300,p);
                c.drawLine(200,0,200,300,p);
                c.drawLine(0,100,300,100,p);
                c.drawLine(0,200,300,200,p);
            }
        }
    }
    
    Vamos fazer o app ‘entender’ que o usuário selecionou a primeira célula do tabuleiro… (na ontouchevent)


    Código:
    if(x>0&&x<100&&y>0&&y<100)tabuleiro[0][0]=1;
    t.invalidate();
    

    se o toque(x,y) foi entre o ponto “0,0” (da tela) e o ponto “100,100” (da tela)

    então a primeira célula deve ser carimbada com o ‘X’…
    o método ‘invalidate’ serve para chamar o ‘OnDraw’

    Vamos fazer a ‘ondraw’ ‘carimbar’ o ‘X’:


    Código:
    p.setColor(newColor().rgb(30,30,230));
    if(tabuleiro[0][0]==1)
    {
    c.drawLine(0,0,100,100,p);
    c.drawLine(0,100,100,0,p);
    }
    

    Vamos editar de novo a ‘ontouchevent’… Vamos ‘replicar’ o código que identifica ‘se o usuário pressiona a primeira célula’.


    Vamos usar um ‘laço for’ para replicar o código para as três primeiras células:

    O código até agora fica:

    Código:
    [/COLOR]
    package jogo.velha;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.graphics.Color;
    import android.view.MotionEvent;
    
    public class MainActivity extends Activity
    {
        Tela t;
        int[][] tabuleiro={{0,0,0},{0,0,0},{0,0,0}};
        @Override public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            //setContentView(R.layout.main);
            t=new Tela(this);
            setContentView(t);
        }
        class Tela extends View
        {
            Tela(Context c){super(c);}
            @Override public boolean onTouchEvent(MotionEvent me)
            {   
                if(me.getAction()==MotionEvent.ACTION_UP)
                {    float x=me.getX();
                    float y=me.getY();
                    for(int m=0;m<3;m++)if(x>m*100&&x<(m+1)*100&&y>0&&y<100)tabuleiro[m][0]=1;
                    t.invalidate();
                }
                return true;
            }
            @Override protected void onDraw(Canvas c)
            {    super.onDraw(c);
                Paint p=new Paint();
                p.setStyle(Paint.Style.STROKE);
                p.setColor(new Color().rgb(30,30,30));
                c.drawLine(100,0,100,300,p);
                c.drawLine(200,0,200,300,p);
                c.drawLine(0,100,300,100,p);
                c.drawLine(0,200,300,200,p);
                p.setColor(new Color().rgb(30,30,230));
                 for(int m=0;m<3;m++)if(tabuleiro[m][0]==1)
                {
                    c.drawLine(m*100,0,(m+1)*100,100,p);
                    c.drawLine(m*100,100,(m+1)*100,0,p);
                }
            }
        }
    }
    
    Repare que usamos uma variavel ‘m’


    Como já identificamos e carimbamos quando o usuário clica sobre as três primeiras células, vamos ‘replicar’ o código para as duas linhas de baixo:
    Na ‘ontouch’:


    Código:
    for(intn=0;n<3;n++)for(intm=0;m<3;m++)if(x>m*100&&x<(m+1)*100&&y>n*100&&y<(n+1)*100)tabuleiro[m][n]=1;
    

    e na ondraw:


    Código:
    for(intn=0;n<3;n++)for(intm=0;m<3;m++)if(tabuleiro[m][n]==1)
    {
    c.drawLine(m*100,n*100,(m+1)*100,(n+1)*100,p);
    c.drawLine(m*100,(n+1)*100,(m+1)*100,n*100,p);
    }
    

    Já mapeamos o ‘X’ em todas células… Agora vamos mapear o ‘O’:

    Vamos comentar essa última linha que escrevemos (substituimos) na ontouch…

    Código:
    //for(int n=0;n<3;n++)for(int m=0;m<3;m++)if(x>m*100&&x<(m+1)*100&&y>n*100&&y<(n+1)*100)tabuleiro[m][n]=1;
    

    e vamos refazer os passos anteriores… Na ‘ontouch’ escreva:


    Código:
      if(x>0&&x<100&&y>0&&y<100)tabuleiro[0][0]=2;

    e na ‘ondraw’:


    Código:
    p.setColor(newColor().rgb(30,230,30));
    if(tabuleiro[0][0]==2)c.drawCircle(50,50,50,p);[/COLOR]
    

    O código até aqui fica:

    Código:
    [/COLOR]
    package jogo.velha;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.graphics.Color;
    import android.view.MotionEvent;
    
    public class MainActivity extends Activity
    {
        Tela t;
        int[][] tabuleiro={{0,0,0},{0,0,0},{0,0,0}};
        @Override public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            //setContentView(R.layout.main);
            t=new Tela(this);
            setContentView(t);
        }
        class Tela extends View
        {
            Tela(Context c){super(c);}
            @Override public boolean onTouchEvent(MotionEvent me)
            {   
                if(me.getAction()==MotionEvent.ACTION_UP)
                {    float x=me.getX();
                    float y=me.getY();
                    //for(int n=0;n<3;n++)for(int m=0;m<3;m++)if(x>m*100&&x<(m+1)*100&&y>n*100&&y<(n+1)*100)tabuleiro[m][n]=1;
                    if(x>0&&x<100&&y>0&&y<100)tabuleiro[0][0]=2;
                    t.invalidate();
                }
                return true;
            }
            @Override protected void onDraw(Canvas c)
            {    super.onDraw(c);
                Paint p=new Paint();
                p.setStyle(Paint.Style.STROKE);
                p.setColor(new Color().rgb(30,30,30));
                c.drawLine(100,0,100,300,p);
                c.drawLine(200,0,200,300,p);
                c.drawLine(0,100,300,100,p);
                c.drawLine(0,200,300,200,p);
    
                p.setColor(new Color().rgb(30,230,30));
                if(tabuleiro[0][0]==2)c.drawCircle(50,50,50,p);
    
                p.setColor(new Color().rgb(30,30,230));
                for(int n=0;n<3;n++)for(int m=0;m<3;m++)if(tabuleiro[m][n]==1)
                {
                    c.drawLine(m*100,n*100,(m+1)*100,(n+1)*100,p);
                    c.drawLine(m*100,(n+1)*100,(m+1)*100,n*100,p);
                }
            }
        }
    }
    

    Vamos ‘replicar’ o manuseio do toque para todas celulas… Dessa vez atribuindo ‘2’ para a ‘onDraw’ identificar que deve desenhar o ‘0’

    Código:
    for(intn=0;n<3;n++)for(intm=0;m<3;m++)if(x>m*100&&x<(m+1)*100&&y>n*100&&y<(n+1)*100)tabuleiro[m][n]=2;
    

    e replicar o ‘carimbo’ do ‘0’ em todas as celulas


    Código:
    for(intn=0;n<3;n++)for(intm=0;m<3;m++)if(tabuleiro[m][n]==2)c.drawCircle(50+(m*100),50+(n*100),50,p);
    

    Já temos ‘mapeados’ todas as ‘impressões’ do ‘0’ e do ‘X’


    Para finalizar vamos criar uma variável booleana ‘vezdox’ que muda a cada toque, identificando cada jogada:


    Código:
    booleanvezdox=true;

    e na ‘ontouchevent’:

    Código:
    for(intn=0;n<3;n++)for(intm=0;m<3;m++)if(x>m*100&&x<(m+1)*100&&y>n*100&&y<(n+1)*100)if(tabuleiro[m][n]==0)
    {tabuleiro[m][n]= (vezdox?1:2);
    vezdox=!vezdox;
    }

    Se você não entendeu o comando (vezdox?1:2) pesquise por ‘operador ternário’ ou ‘inline if’

    Adianto que é uma maneira simplificada e direta de fazer um ‘if’

    e pronto!!! copie os codigos em azul se nao conseguiu acompanhar aqui em baixo vou postar o codigo completo !!

    ---------------- jogo completo ----------------

    Código:
    package jogo.velha;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.graphics.Color;
    import android.view.MotionEvent;
    
    public class MainActivity extends Activity
    {
        Tela t;
        int[][] tabuleiro={{0,0,0},{0,0,0},{0,0,0}};
        boolean vezdox=true;
        @Override public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            //setContentView(R.layout.main);
            t=new Tela(this);
            setContentView(t);
        }
        class Tela extends View
        {
            Tela(Context c){super(c);}
            @Override public boolean onTouchEvent(MotionEvent me)
            {  
                if(me.getAction()==MotionEvent.ACTION_UP)
                {    float x=me.getX();
                    float y=me.getY();
                    for(int n=0;n<3;n++)for(int m=0;m<3;m++)if(x>m*100&&x<(m+1)*100&&y>n*100&&y<(n+1)*100)if(tabuleiro[m][n]==0)
                    {    tabuleiro[m][n]= (vezdox?1:2);
                        vezdox=!vezdox;
                    }
                    t.invalidate();
                }
                return true;
            }
            @Override protected void onDraw(Canvas c)
            {    super.onDraw(c);
                Paint p=new Paint();
                p.setStyle(Paint.Style.STROKE);
                p.setColor(new Color().rgb(30,30,30));
                c.drawLine(100,0,100,300,p);
                c.drawLine(200,0,200,300,p);
                c.drawLine(0,100,300,100,p);
                c.drawLine(0,200,300,200,p);
    
                p.setColor(new Color().rgb(30,230,30));
                for(int n=0;n<3;n++)for(int m=0;m<3;m++)if(tabuleiro[m][n]==2)c.drawCircle(50+(m*100),50+(n*100),50,p);
    
                p.setColor(new Color().rgb(30,30,230));
                for(int n=0;n<3;n++)for(int m=0;m<3;m++)if(tabuleiro[m][n]==1)
                {
                    c.drawLine(m*100,n*100,(m+1)*100,(n+1)*100,p);
                    c.drawLine(m*100,(n+1)*100,(m+1)*100,n*100,p);
                }
            }
        }
    }


    [​IMG]
    fonte:Por favor, Entre ou Cadastre-se para ver os Links
     
    Jefferson hoffmeister curtiu isso.
  2. Jefferson hoffmeister

    Jefferson hoffmeister Administrador
    Administrador

    Julho 10, 2015
    311
    80
    127
    Masculino
    show de bola alef
     
    Heroghast curtiu isso.

Compartilhe esta página