Tres en raya gráfico en Javascript

Revisión del tradicional juego del tres en raya que incorpora una visualización gráfica del tablero y de las aspas y los ceros. Esto permite adaptar la imagen del juego al diseño que más os guste, con solo modificar las imágenes por defecto. Otra opción es cambiar los nombres de las imágenes en el propio script (aunque esto requiere ciertos conocimientos de JavaScript).

Otra curiosidad de este ejemplo es que no implementa un algoritmo de juego, sino que contiene en un array con todas las combinaciones posibles que pueden darse en una partida. De esta forma, es imposible ganar.

El script detecta cuando gana la máquina y cuando se produce empate, mostrando un alert box informando del final de lapartida. Por otra parte, en esta versión siempre comienza jugando la máquina, con las aspas. Su primera jugada es un aspa en el centro del tablero.

Este script debe ir entre las tags <head> y </head> de la página:

<script language="javascript" type="text/javascript">
// TRES EN RAYA GRAFICO
// por Roberto Morales Chaparro, rolet.iespana.es, robertomc_85@hotmail.com
//
//Este script y otros muchos pueden
//descarse on-line de forma gratuita
//en El Código: www.elcodigo.com

// 27 de octubre de 2002,1ª version 8 de oct.
// v2.0 del tres en raya

var tablero = new initArray(0,0,0,0,0,0,0,0,0); //tablero del TTT, de la manera: 812,793,654
var jug = 2 //1 la persona, 2 la maquina
var ultima = 0; //última casilla ocupada por la persona
var tras = 0; //para el algoritmo, nº de posiciones giradas desde el modelo
var sepuede = true //indica si la persona puede poner ficha o no
var O="/ejemplos/javascript/tresraya/o.jpg" //imagen O
var X="/ejemplos/javascript/tresraya/x.jpg" //imagen X
var gan = 0 //si hay ganador y quién es: -1 tablas
var turno = 0 //numero de circulos

//posiciones donde han puesto circulos
var cir = new initArray(undefined,undefined,undefined)

//lista de lineas
var pg = new initArray(8,1,2,7,9,3,6,5,4,8,9,4,6,9,2,8,7,6,1,9,5,2,3,4)

//aqui esta codificado el algoritmo, descodificarlo... lleva su tiempo
var d = new initArray(3,3,3,3,3,3,3,4);
var d8 = new initArray(2,1,5,0,3,7,6,0);
var d81 = new initArray(6,6,6,6,6,3,6,6);
var d82 = new initArray(5,5,5,5,7,5,5,5);
var d825= new initArray(6,6,6,6,6,3,6,6);
var d83 = new initArray(6,1,1,1,1,1,1,1);
var d85 = new initArray(7,7,7,7,7,7,2,7);
var d86 = new initArray(3,3,1,3,3,3,3,3);
var d863= new initArray(5,5,5,5,2,5,5,5);
var d87 = new initArray(5,5,5,5,2,5,5,5);
var d1 = new initArray(7,7,7,7,7,7,4,7);
var d17 = new initArray(2,8,2,2,2,2,2,2);

salto = 0
function ObtenSalto() {

Usuarios que han visto este tema también han visto...

- Rotar Banners con JavaScript
- Texto por defecto que desaparece
- Construye tu propio reloj
- Cambio de Imagen en JavaScript
- Conversor pesetas - euros

- Versión imprimible de este documento

- Enviar por e-mail este documento