Juego De Rompecabezas En Javascript(HTML)

APLICACIÓN DE JUEGO DE ROMPECABEZA

El objetivo consiste en mover las fichas para colocarlas en un determinado orden.En las figuras se ven un posible estado.

Estrategia: Se tiene un cuadro vacío, cuando el usuario de click en la ficha, este se intercambia con el cuadro vacío. Ver figuras.

Código fuente:

Primero se declaran dos variables globales:

//Cuadro en vacío con la imagen

Var cuadroespacio="img/espacio.jpg";

//Posición del cuadro en vacío, inicia en 1.

Var posicionespacio=1;

Intercambio entre el cuadro actual el cuadro vacío

//Cuadro actual será el cuadro vacío

//Este se coloca en una variable temporal

Var temp=document.getElementById("c"+parte).src;

//La ficha actual queda en blanco

document.getElementById("c"+parte).src=cuadroespacio;

//La ficha ocupa la posición del anterior cuadro vacío

document.getElementById("c"+posicionespacio).src=temp;

//Nuevo cuadro vacío

posicionespacio=parte;

Así se programa para indicar que se dio click en la imagen1.cuadro1

Evento en la imagen

<img src="img\espacio.jpg" id="c1"onclick=”pasar (frm,this,1);">

frm//Formulario

this//Es la imagen

1//Posición de la imagen

Función que recibe los parámetros

Function pasar(formulario,imagen,parte){……}

Parte//Refiere a la ficha, cada uno tiene un numero

Referencia un elemento del formulario

Var temp=document.getElementById("c"+parte).src;

+parte//Donde se da click en la ficha o parte

“c”//Parte del nombre de la imagen

Validaciones:

Se resta la posición del cuadro en blanco con la posición de la ficha que desea mover.

resta>=4 No es válido, saltar posiciones

resta==2 No es válido, movimiento en diagonal

Login:

Menu:

Código principal:

APLICACIÓN DE JUEGO DE ROMPECABEZA

El objetivo consiste en mover las fichas para colocarlas en un determinado orden.En las figuras se ven un posible estado.

Estrategia: Se tiene un cuadro vacío, cuando el usuario de click en la ficha, este se intercambia con el cuadro vacío. Ver figuras.

Código fuente:

Primero se declaran dos variables globales:

//Cuadro en vacío con la imagen

Var cuadroespacio="img/espacio.jpg";

//Posición del cuadro en vacío, inicia en 1.

Var posicionespacio=1;

Intercambio entre el cuadro actual el cuadro vacío

//Cuadro actual será el cuadro vacío

//Este se coloca en una variable temporal

Var temp=document.getElementById("c"+parte).src;

//La ficha actual queda en blanco

document.getElementById("c"+parte).src=cuadroespacio;

//La ficha ocupa la posición del anterior cuadro vacío

document.getElementById("c"+posicionespacio).src=temp;

//Nuevo cuadro vacío

posicionespacio=parte;

Así se programa para indicar que se dio click en la imagen1.cuadro1

Evento en la imagen

<img src="img\espacio.jpg" id="c1"onclick=”pasar (frm,this,1);">

frm//Formulario

this//Es la imagen

1//Posición de la imagen

Función que recibe los parámetros

Function pasar(formulario,imagen,parte){……}

...