Como programar un tres en raya en jQuery

En este artículo vamos a ver cómo implementar un tres en raya mediante jQuery. En este juego, el usuario jugará contra la máquina. Tampoco es que la inteligencia artificial de la máquina sea una barbaridad, ni mucho menos, de hecho tendrás que ser un manta jugando a las tres en raya para que la máquina te gane. Vamos, que es sencillísimo ganar.

El juego cuenta con unos cuadros seleccionables en un grid de 3x3. Al hacer clic en estos cuadros, se marcará con el icono correspondiente. Es decir, si el usuario selecciona un cuadro, se agregará el icono X, y cuando la maquina marque uno de los cuadros aleatoriamente, agregará el icono O.

Código HTML para el panel del tres en raya

Utilizaremos este código HTML para el panel de nuestro tres en raya. El grid de nuestro panel contendrá 9 cuadros seleccionables. Haciendo clic en dichos cuadros, llamaremos a la función de jQuery que indicará al sistema que ya hemos hecho nuestro movimiento y activará el próximo movimiento de la máquina.

<div class="tile-container">
    <div class="tile" id="tile-1" data-position="1"></div>
    <div class="tile" id="tile-2" data-position="2"></div>
    <div class="tile" id="tile-3" data-position="3"></div>
    <div class="tile" id="tile-4" data-position="4"></div>
    <div class="tile" id="tile-5" data-position="5"></div>
    <div class="tile" id="tile-6" data-position="6"></div>
    <div class="tile" id="tile-7" data-position="7"></div>
    <div class="tile" id="tile-8" data-position="8"></div>
    <div class="tile" id="tile-9" data-position="9"></div>
</div>

Código jQuery para el movimiento del usuario y el próximo movimiento de la máquina

El siguiente código jQuery contiene funciones que utilizaremos para gestionar el evento clic de los usuarios y para activar el siguiente movimiento de la máquina. Cuando el usuario seleccione un cuadro de nuestro panel, se ejecutará el código que marque dicho cuadro con una X. Después, se elegirá un cuadro aleatorio del panel de juego que no esté clicado para el siguiente movimiento de la máquina. Este cuadro se marcará con el icono de un O.

<script>
	function computerTurn() {
		var choose = $(".tile:not(.marked)");
		randChoice = choose[Math.floor(Math.random() * choose.length)];
		$(randChoice).addClass('marked');
		$(randChoice).addClass('o-mark');
		trackTicTac(randChoice, 'o-mark');
	}

	function trackTicTac(obj, mark) {
		var winning_probability = [ [ 1, 2, 3 ], [ 1, 4, 7 ], [ 1, 5, 9 ],
				[ 2, 5, 8 ], [ 3, 5, 7 ], [ 3, 6, 9 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ];

		var markedPosition = $(obj).data("position");
		$.each(winning_probability, function(key, winning_probability_index) {
			if ($.inArray(markedPosition, winning_probability_index) >= 0) {
				markedLength = 0;
				$.each(winning_probability_index, function(index, value) {
					var innerSquareClass = $("#tile-" + value).attr("class");
					if (innerSquareClass.indexOf(mark) > 0) {
						markedLength = markedLength + 1;
						if (markedLength == winning_probability_index.length) {
							finished = true;
							if (mark == "x-mark") {
								status = " You Win!";
							} else {
								status = " You Lost!";
							}
							alert("Game Over." + status);
						}
					}
				});
			}
		});
		return finished;
	}

	$(document).ready(function() {
		finished = false;
		$(".tile").on('click', function() {
			if (!finished) {
				var squareClass = $(this).attr("class");
				if (squareClass.indexOf("marked") < 0) {
					$(this).addClass('marked');
					$(this).addClass('x-mark');
					finished = trackTicTac(this, 'x-mark');
					computerTurn();
				}
			}
		});
	});
</script>

 

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP