PHP-Prolog-HTML5-Checkers-Game/index.php at master · codermapuche/PHP-Prolog-HTML5-Checkers-Game · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<?php
    session_start();

    if(isset($_GET["ia_turn"]) && $_GET["ia_turn"] == 1)
    {
        // Esto se debe hacer desde prolog, es solo un parche.
        $bak = $_SESSION["tablero"];

        // Procesar jugada del usuario y de la IA.
        $cmd = "playPHP(board(".implode(",", array_map(function($val){ return implode(",", $val); }, $_SESSION["tablero"]))."), ".($_POST["source"][0]+1).",".($_POST["source"][1]+1).",".($_POST["target"][0]+1).",".($_POST["target"][1]+1).").";
        $output = `swipl -s damas.pl -g "$cmd" -t halt.`;
        if($output)
        {
            $board = explode(",", substr($output, 6, -1));

            // Esto se debe aser desde prolog, es solo un parche.
            $changes = [];
            foreach($bak as $pRow => $row)
            {
                foreach($row as $pCol => $col)
                {
                    $_SESSION["tablero"][$pRow][$pCol] = array_shift($board);
                    if($col != $_SESSION["tablero"][$pRow][$pCol])
                    {
                        $changes[] = $pRow.$pCol."-".$_SESSION["tablero"][$pRow][$pCol];
                    }
                }
            }
            echo(implode("|", array_filter($changes)));
        }
        else
        {
            echo($cmd);
        }
        exit();
    }
?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<title>Another experiment with Prolog, HTML5 and PHP</title>
		<link rel="stylesheet" media="screen" href="style.css" />
		<script src="damas.js"></script>
	</head>
	<body>
        <aside>
            <header>
                <h1><span contenteditable>Jugador 1</span> vs IA Prolog</h1>
                <h2>another experiment</h2>
            </header>
            <hr>
            <div>
                <button id="confirm">Realizar Movimiento</button>
            </div>
            <hr>
            <p>
                Este es un pequeño experimento donde te enfrentaras en un juego de damas a una IA programada en Prolog.
            </p>
            <p>
                La IA juega en simultaneo contra todos los usuarios conectados a la web revisando en cada turno el estado actual del tablero y decidiendo en base a eso, su proxima jugada.
            </p>
            <p>
                CSS3, HTML5 y Javascript manejan la interface visual comunicándose asíncronamente con que PHP, quien controla la información de la sesión y trackea en una base de datos MySQL los movimientos de la partida para luego llamar a Prolog pidiendole que desida la proxima jugada de la IA en el tablero.
            </p>
            <p>
                <b>Buena Suerte!</b>
            </p>
            <hr>
            <a href="nuevo-juego" id="decline">Me rindo! Reiniciar juego</a>
        </aside>
		<section id="main">
			<table id="chess_board">
            <?php
                if(isset($_GET["new_game"]) && $_GET["new_game"] == 1)
                {
                    /*/
                     * El tablero se representa mediante una matriz con la siguiente simbologia:
                     * x  => Ficha negra de la IA.
                     * xx => Dama negra de la IA.
                     * o  => Ficha blanca del jugador.
                     * oo => Dama blanca del jugador.
                     * e  => Espacio del tablero libre.
                     * n  => Posicion blanca del tablero.
                    /*/
                    $_SESSION["tablero"] = [
                        ["n", "x", "n", "x", "n", "x", "n", "x"],
                        ["x", "n", "x", "n", "x", "n", "x", "n"],
                        ["n", "x", "n", "x", "n", "x", "n", "x"],
                        ["e", "n", "e", "n", "e", "n", "e", "n"],
                        ["n", "e", "n", "e", "n", "e", "n", "e"],
                        ["o", "n", "o", "n", "o", "n", "o", "n"],
                        ["n", "o", "n", "o", "n", "o", "n", "o"],
                        ["o", "n", "o", "n", "o", "n", "o", "n"]
                    ];
                }

                foreach($_SESSION["tablero"] as $nRow => $row)
                {
                    echo("<tr>");
                    foreach($row as $nCol => $col)
                    {
                        echo("<td id=\"c_$nRow$nCol\">");
                        switch($col)
                        {
                            case "x"  :
                                echo ("<label data-tipo=\"peon\" for=\"o_$nRow$nCol\">&#9823</label>");
                            break;
                            case "xx" :
                                echo ("<label data-tipo=\"dama\" for=\"o_$nRow$nCol\">&#9818</label>");
                            break;
                            case "o"  :
                                echo (" <input data-tipo=\"peon\" type=\"radio\" name=\"white\" value=\"$nRow$nCol\" id=\"o_$nRow$nCol\">
                                        <label for=\"o_$nRow$nCol\">&#9817</label>");
                            break;
                            case "oo" :
                                echo (" <input data-tipo=\"dama\" type=\"radio\" name=\"white\" value=\"$nRow$nCol\" id=\"o_$nRow$nCol\">
                                        <label for=\"o_$nRow$nCol\">&#9812;</label>");
                            break;
                            case "e"  :
                                echo (" <input type=\"radio\" name=\"empty\" value=\"$nRow$nCol\" id=\"o_$nRow$nCol\">
                                        <label for=\"o_$nRow$nCol\"></label>");
                            break;
                        }
                    }
                    echo("</tr>");
                }
            ?>
			</table>
		</section>
	</body>
</html>