JavaScript - puzzlemari JScript

   
Vista:

puzzlemari JScript

Publicado por Luis Angel (4 intervenciones) el 26/04/2010 15:22:03
<script language="javascript" type="text/javascript">
//PUZZLE DE PIEZAS DESLIZANTES
//
//Autor: Iván Nieto Pérez
//Este script y otros muchos pueden
//descarse on-line de forma gratuita
//en El Código: www.elcodigo.com

var altura = 4 //numero de piezas eje y
var anchura = 4 //numero de piezas eje x
var blanco = 1 //posicion del blanco al comienzo
var ruta = '/images/puzzles/' //carpeta en la que estan ubicadas las imagenes del puzzle
var prefijo = 'mari' //prefijo del nombre de las imagenes (mari1, mari2, ..., mariN)
var extension = '.jpg' //extension de las imagenes (tipo de imagen)
var ancho_pieza = '125' //anchura en pixels de cada pieza del puzzle
var alto_pieza = '100' //altura en pixels de cada pieza del puzzle
var pieza_blanca = '/images/puzzles/blanco.jpg' //imagen pieza blanca

var salto
var offset_imagen

function MostrarImagen() {
var imagen = 1
var salida = '<table cellspacing="0" cellpadding="0" border="1">\n';
for (var y = 0; y < altura; y++) {
salida += '<tr>\n';
for (var x = 0; x < anchura; x++, imagen++) {
if (imagen != blanco) {
salida += '<td><a href="javascript:MoverImagen(' + imagen + ')"><img src="' + ruta + prefijo + imagen + extension + '" width="' + ancho_pieza + '" height="' + alto_pieza + '" border="no"></a></td>\n'
} else {
salida += '<td><a href="javascript:MoverImagen(' + imagen + ')"><img src="' + pieza_blanca + '" width="' + ancho_pieza + '" height="' + alto_pieza + '" border="no"></a></td>\n'
}
}
salida += '</tr>\n'
}
salida += '</table>'
document.write( salida )
}

function MoverImagen(imagen) {
if ( (Math.floor((imagen - 1)/anchura) != 0) && (blanco == imagen - anchura) ) {
Mueve(imagen)
document.datos.cambios.value++
} else if ( ((imagen - 1) % anchura != anchura - 1) && (blanco == imagen + 1) ) {
Mueve(imagen)
document.datos.cambios.value++
} else if ( (Math.floor((imagen - 1)/anchura) != altura - 1) && (blanco == imagen + anchura) ) {
Mueve(imagen)
document.datos.cambios.value++
} else if ( ((imagen - 1) % anchura != 0) && (blanco == imagen - 1) ) {
Mueve(imagen)
document.datos.cambios.value++
} else
alert('Esta pieza no puede moverse. Pulsa sobre\nuna pieza colindante con el espacio en blanco.')
}

function Mueve(imagen) {
document.images[offset_imagen + blanco - 1].src = document.images[offset_imagen + imagen - 1].src
blanco = imagen
document.images[offset_imagen + imagen - 1].src = pieza_blanca
}

function Cambios() {
this.puzzle = new Array( 4 )
this.puzzle[0] = 1
this.puzzle[1] = anchura
this.puzzle[2] = -1
this.puzzle[3] = -anchura
}

function DesordenaImagen() {

ObtenSalto() //tiene en cuenta el resto de imagenes del documento

var cambios = new Cambios
for (var x = 0; x < 200; x++) { //hace 200 cambios
var salto = Math.round ( Math.random() * 3 ) //entre 0 y 3
if ( (blanco + cambios.puzzle[salto] < 1) || (blanco + cambios.puzzle[salto] > anchura * altura) )
continue
else if ( ((blanco - 1) % anchura == 0) && salto == 2 )
salto = 0
else if ( (blanco % anchura == 0) && salto == 0 )
salto = 2

Mueve( blanco + cambios.puzzle[salto] )
}
}

function ObtenSalto() {
//si hay otras imagenes en la pagina las tiene en cuenta con esta variable
offset_imagen = 0
while ( document.images[offset_imagen].src.indexOf( ruta ) == -1)
offset_imagen++
}

window.onload = DesordenaImagen
if (document.captureEvents) { //N4 requiere invocar la funcion captureEvents
document.captureEvents(Event.LOAD)
}


</script>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:puzzlemari JScript

Publicado por Luis Angel (4 intervenciones) el 26/04/2010 15:23:07
<!-- Para visualizar el puzzle -->
<script type="text/javascript" language="javascript">
MostrarImagen();
</script>

<!-- Para visualizar el display que cuenta el número de movimientos -->
<form name="datos">
<table cellspacing="6" cellpadding="6" border="0"><tr>
<td><img src="/images/puzzles/mari.jpg" width="150" height="120" border="0"></td>
<td>Número de cambios <br><input type="text" name="cambios" size="10" value="0"></td>
</tr></table>
</form>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar