Skip to main content
Pergunta fechada como "Muito ampla" por Daniel Omine, Syzoth, MarceloBoni, Largato, Renan Gomes
Incluindo o código
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189

Código-fonte do header.php:

<!DOCTYPE html>
<html>
<head>
    <title>Jogo da velha</title>
</head>
<body>
    <center><h1>Jogo da velha</h1></center>
    <center>
    <div id="box">
        <div id="0" class="area"></div><div id="1" class="area"></div><div id="2" class="area"></div>
        <div id="3" class="area"></div><div id="4" class="area"></div><div id="5" class="area"></div>
        <div id="6" class="area"></div><div id="7" class="area"></div><div id="8" class="area"></div>
    </div>
    </center>
</body>
</html>

Código-fonte do jogo.php:

<!DOCTYPE html>
<html>
<head>
    <title>Jogo da velha</title>
    
    <style type="text/css">
    #box{
        width:276px;
        height: 276px;
        background-color: gray;
    }
    #box div{
        background-color: lightgray;
        width: 90px;
        height: 90px;
        text-align: center;
        float: left;
        margin: 1px;
    }
        
    </style>
</head>
<body>
    
    <?php 
        include 'header.php';
    ?>

    <center><h2 id="vez_alert">Turno de: <?php echo $_GET["j2_input"]?></h2></center>

    <script type="text/javascript">
        //global que seta a vez do jogador
        var turn = true;
        var areasArray = [];

        //array correspondente as casas
        var area = document.getElementsByClassName('area');
        for(var i =0;i<area.length;i++){            
            area[i].onclick = onAreaClick;
        }
        

        //função principal que atua sobre o clique numa determinada area
        function onAreaClick(event) {
            var winner;
            draw(event);
            console.log(turn);
            winner = checkWin();
            if (winner == true) {
                alert("jogador 1 ganhou");
            }else if (winner==false){
                alert("jogador 2 ganhou");
            }
                     
        }

        function checkWin(){

             if (areasArray[0] == true && areasArray[1] == true && areasArray[2] == true||areasArray[3] == true && areasArray[4] == true && areasArray[5] == true||areasArray[6] == true && areasArray[7] == true && areasArray[8] == true||areasArray[0] == true && areasArray[3] == true && areasArray[6] == true||areasArray[1] == true && areasArray[4] == true && areasArray[7] == true||areasArray[2] == true && areasArray[5] == true && areasArray[8] == true||areasArray[0] == true && areasArray[4] == true && areasArray[8] == true) {
                return true;
             }
             if (areasArray[0] == false && areasArray[1] == false && areasArray[2] == false||areasArray[3] == false && areasArray[4] == false && areasArray[5] == false||areasArray[6] == false && areasArray[7] == false && areasArray[8] == false||areasArray[0] == false && areasArray[3] == false && areasArray[6] == false||areasArray[1] == false && areasArray[4] == false && areasArray[7] == false||areasArray[2] == false && areasArray[5] == false && areasArray[8] == false||areasArray[0] == false && areasArray[4] == false && areasArray[8] == false) {
                return false;
             }
             
        }

        function draw(ev){

            var clickedArea = document.getElementById(event.target.id);

            if (checkTurn()) {
                console.log("espaço vazio");
                var elem = document.createElement("img");
                elem.setAttribute("src", "x.png");
                elem.setAttribute("height", "90");
                elem.setAttribute("width", "90");
                clickedArea.appendChild(elem);
                turn= false;
                areasArray[ev.target.id] = false;
                console.log("Esse espaço agora é: "+areasArray[ev.target.id]);
                document.getElementById("vez_alert").innerHTML = "Turno de:"+ <?php echo json_encode($_GET["j1_input"]);?>

            }else{
                console.log("espaço vazio");
                var elem2 = document.createElement("img");
                elem2.setAttribute("src", "c.png");
                elem2.setAttribute("height", "90");
                elem2.setAttribute("width", "90");
                clickedArea.appendChild(elem2);
                turn= true;
                areasArray[ev.target.id] = true;
                console.log("Esse espaço agora é: "+areasArray[ev.target.id]);
                document.getElementById("vez_alert").innerHTML = "Turno de:"+<?php echo json_encode($_GET["j2_input"]);?>
            }
        }

        function checkTurn(){
            if(turn){
                
                return  true;//para x
            }else {
                
                return false;//para o
            }
        }

        

        
        
        

        

    </script>
</body>
</html>

Fiz essa demo de um TicTacToe e gostaria de saber como otimizar ele para implementação de AJAX para poder rodar num servidor com dois hosts jogando ao mesmo tempo. O Jogo estajogo está 100% Local e utiliza arrays de javascript para armazenar os locais utilizados.

Sinto que esse é um jeito errado de se fazer isso ateaté mesmo para single-play.

Fiz essa demo de um TicTacToe e gostaria de saber como otimizar ele para implementação de AJAX para poder rodar num servidor com dois hosts jogando ao mesmo tempo. O Jogo esta 100% Local e utiliza arrays de javascript para armazenar os locais utilizados.

Sinto que esse é um jeito errado de se fazer isso ate mesmo para single-play.

Código-fonte do header.php:

<!DOCTYPE html>
<html>
<head>
    <title>Jogo da velha</title>
</head>
<body>
    <center><h1>Jogo da velha</h1></center>
    <center>
    <div id="box">
        <div id="0" class="area"></div><div id="1" class="area"></div><div id="2" class="area"></div>
        <div id="3" class="area"></div><div id="4" class="area"></div><div id="5" class="area"></div>
        <div id="6" class="area"></div><div id="7" class="area"></div><div id="8" class="area"></div>
    </div>
    </center>
</body>
</html>

Código-fonte do jogo.php:

<!DOCTYPE html>
<html>
<head>
    <title>Jogo da velha</title>
    
    <style type="text/css">
    #box{
        width:276px;
        height: 276px;
        background-color: gray;
    }
    #box div{
        background-color: lightgray;
        width: 90px;
        height: 90px;
        text-align: center;
        float: left;
        margin: 1px;
    }
        
    </style>
</head>
<body>
    
    <?php 
        include 'header.php';
    ?>

    <center><h2 id="vez_alert">Turno de: <?php echo $_GET["j2_input"]?></h2></center>

    <script type="text/javascript">
        //global que seta a vez do jogador
        var turn = true;
        var areasArray = [];

        //array correspondente as casas
        var area = document.getElementsByClassName('area');
        for(var i =0;i<area.length;i++){            
            area[i].onclick = onAreaClick;
        }
        

        //função principal que atua sobre o clique numa determinada area
        function onAreaClick(event) {
            var winner;
            draw(event);
            console.log(turn);
            winner = checkWin();
            if (winner == true) {
                alert("jogador 1 ganhou");
            }else if (winner==false){
                alert("jogador 2 ganhou");
            }
                     
        }

        function checkWin(){

             if (areasArray[0] == true && areasArray[1] == true && areasArray[2] == true||areasArray[3] == true && areasArray[4] == true && areasArray[5] == true||areasArray[6] == true && areasArray[7] == true && areasArray[8] == true||areasArray[0] == true && areasArray[3] == true && areasArray[6] == true||areasArray[1] == true && areasArray[4] == true && areasArray[7] == true||areasArray[2] == true && areasArray[5] == true && areasArray[8] == true||areasArray[0] == true && areasArray[4] == true && areasArray[8] == true) {
                return true;
             }
             if (areasArray[0] == false && areasArray[1] == false && areasArray[2] == false||areasArray[3] == false && areasArray[4] == false && areasArray[5] == false||areasArray[6] == false && areasArray[7] == false && areasArray[8] == false||areasArray[0] == false && areasArray[3] == false && areasArray[6] == false||areasArray[1] == false && areasArray[4] == false && areasArray[7] == false||areasArray[2] == false && areasArray[5] == false && areasArray[8] == false||areasArray[0] == false && areasArray[4] == false && areasArray[8] == false) {
                return false;
             }
             
        }

        function draw(ev){

            var clickedArea = document.getElementById(event.target.id);

            if (checkTurn()) {
                console.log("espaço vazio");
                var elem = document.createElement("img");
                elem.setAttribute("src", "x.png");
                elem.setAttribute("height", "90");
                elem.setAttribute("width", "90");
                clickedArea.appendChild(elem);
                turn= false;
                areasArray[ev.target.id] = false;
                console.log("Esse espaço agora é: "+areasArray[ev.target.id]);
                document.getElementById("vez_alert").innerHTML = "Turno de:"+ <?php echo json_encode($_GET["j1_input"]);?>

            }else{
                console.log("espaço vazio");
                var elem2 = document.createElement("img");
                elem2.setAttribute("src", "c.png");
                elem2.setAttribute("height", "90");
                elem2.setAttribute("width", "90");
                clickedArea.appendChild(elem2);
                turn= true;
                areasArray[ev.target.id] = true;
                console.log("Esse espaço agora é: "+areasArray[ev.target.id]);
                document.getElementById("vez_alert").innerHTML = "Turno de:"+<?php echo json_encode($_GET["j2_input"]);?>
            }
        }

        function checkTurn(){
            if(turn){
                
                return  true;//para x
            }else {
                
                return false;//para o
            }
        }

        

        
        
        

        

    </script>
</body>
</html>

Fiz essa demo de um TicTacToe e gostaria de saber como otimizar ele para implementação de AJAX para poder rodar num servidor com dois hosts jogando ao mesmo tempo. O jogo está 100% Local e utiliza arrays de javascript para armazenar os locais utilizados.

Sinto que esse é um jeito errado de se fazer isso até mesmo para single-play.

function checkWin(){

             if (areasArray[0] == true && areasArray[1] == true && areasArray[2] == true||areasArray[3] == true && areasArray[4] == true && areasArray[5] == true||areasArray[6] == true && areasArray[7] == true && areasArray[8] == true||areasArray[0] == true && areasArray[3] == true && areasArray[6] == true||areasArray[1] == true && areasArray[4] == true && areasArray[7] == true||areasArray[2] == true && areasArray[5] == true && areasArray[8] == true||areasArray[0] == true && areasArray[4] == true && areasArray[8] == true) {
                return true;
             }
             if (areasArray[0] == false && areasArray[1] == false && areasArray[2] == false||areasArray[3] == false && areasArray[4] == false && areasArray[5] == false||areasArray[6] == false && areasArray[7] == false && areasArray[8] == false||areasArray[0] == false && areasArray[3] == false && areasArray[6] == false||areasArray[1] == false && areasArray[4] == false && areasArray[7] == false||areasArray[2] == false && areasArray[5] == false && areasArray[8] == false||areasArray[0] == false && areasArray[4] == false && areasArray[8] == false) {
                return false;
             }
             
        }

function checkWin(){

             if (areasArray[0] == true && areasArray[1] == true && areasArray[2] == true||areasArray[3] == true && areasArray[4] == true && areasArray[5] == true||areasArray[6] == true && areasArray[7] == true && areasArray[8] == true||areasArray[0] == true && areasArray[3] == true && areasArray[6] == true||areasArray[1] == true && areasArray[4] == true && areasArray[7] == true||areasArray[2] == true && areasArray[5] == true && areasArray[8] == true||areasArray[0] == true && areasArray[4] == true && areasArray[8] == true) {
                return true;
             }
             if (areasArray[0] == false && areasArray[1] == false && areasArray[2] == false||areasArray[3] == false && areasArray[4] == false && areasArray[5] == false||areasArray[6] == false && areasArray[7] == false && areasArray[8] == false||areasArray[0] == false && areasArray[3] == false && areasArray[6] == false||areasArray[1] == false && areasArray[4] == false && areasArray[7] == false||areasArray[2] == false && areasArray[5] == false && areasArray[8] == false||areasArray[0] == false && areasArray[4] == false && areasArray[8] == false) {
                return false;
             }
             
        }

function checkWin(){

             if (areasArray[0] == true && areasArray[1] == true && areasArray[2] == true||areasArray[3] == true && areasArray[4] == true && areasArray[5] == true||areasArray[6] == true && areasArray[7] == true && areasArray[8] == true||areasArray[0] == true && areasArray[3] == true && areasArray[6] == true||areasArray[1] == true && areasArray[4] == true && areasArray[7] == true||areasArray[2] == true && areasArray[5] == true && areasArray[8] == true||areasArray[0] == true && areasArray[4] == true && areasArray[8] == true) {
                return true;
             }
             if (areasArray[0] == false && areasArray[1] == false && areasArray[2] == false||areasArray[3] == false && areasArray[4] == false && areasArray[5] == false||areasArray[6] == false && areasArray[7] == false && areasArray[8] == false||areasArray[0] == false && areasArray[3] == false && areasArray[6] == false||areasArray[1] == false && areasArray[4] == false && areasArray[7] == false||areasArray[2] == false && areasArray[5] == false && areasArray[8] == false||areasArray[0] == false && areasArray[4] == false && areasArray[8] == false) {
                return false;
             }
             
        }

function checkWin(){

             if (areasArray[0] == true && areasArray[1] == true && areasArray[2] == true||areasArray[3] == true && areasArray[4] == true && areasArray[5] == true||areasArray[6] == true && areasArray[7] == true && areasArray[8] == true||areasArray[0] == true && areasArray[3] == true && areasArray[6] == true||areasArray[1] == true && areasArray[4] == true && areasArray[7] == true||areasArray[2] == true && areasArray[5] == true && areasArray[8] == true||areasArray[0] == true && areasArray[4] == true && areasArray[8] == true) {
                return true;
             }
             if (areasArray[0] == false && areasArray[1] == false && areasArray[2] == false||areasArray[3] == false && areasArray[4] == false && areasArray[5] == false||areasArray[6] == false && areasArray[7] == false && areasArray[8] == false||areasArray[0] == false && areasArray[3] == false && areasArray[6] == false||areasArray[1] == false && areasArray[4] == false && areasArray[7] == false||areasArray[2] == false && areasArray[5] == false && areasArray[8] == false||areasArray[0] == false && areasArray[4] == false && areasArray[8] == false) {
                return false;
             }
             
        }
Fonte Link

Como otimizar TicTacToe em HTML5

Projeto: https://github.com/jvpessoa10/TicTacToe

Fiz essa demo de um TicTacToe e gostaria de saber como otimizar ele para implementação de AJAX para poder rodar num servidor com dois hosts jogando ao mesmo tempo. O Jogo esta 100% Local e utiliza arrays de javascript para armazenar os locais utilizados.

Segue função que checa a vitória em cada turno:

function checkWin(){

             if (areasArray[0] == true && areasArray[1] == true && areasArray[2] == true||areasArray[3] == true && areasArray[4] == true && areasArray[5] == true||areasArray[6] == true && areasArray[7] == true && areasArray[8] == true||areasArray[0] == true && areasArray[3] == true && areasArray[6] == true||areasArray[1] == true && areasArray[4] == true && areasArray[7] == true||areasArray[2] == true && areasArray[5] == true && areasArray[8] == true||areasArray[0] == true && areasArray[4] == true && areasArray[8] == true) {
                return true;
             }
             if (areasArray[0] == false && areasArray[1] == false && areasArray[2] == false||areasArray[3] == false && areasArray[4] == false && areasArray[5] == false||areasArray[6] == false && areasArray[7] == false && areasArray[8] == false||areasArray[0] == false && areasArray[3] == false && areasArray[6] == false||areasArray[1] == false && areasArray[4] == false && areasArray[7] == false||areasArray[2] == false && areasArray[5] == false && areasArray[8] == false||areasArray[0] == false && areasArray[4] == false && areasArray[8] == false) {
                return false;
             }
             
        }

Sinto que esse é um jeito errado de se fazer isso ate mesmo para single-play.