Puzzle con Mouse en vez de Teclado
Publicado por Jojo (1 intervención) el 23/06/2017 16:28:37
Hola, mediante un curso realicé un juego de puzzle en javascript para el navegador, pero me gustaría poder jugarlo con el mouse en vez de teclado.
Se trata de un puzzle de 8 imágenes (y 1 adicional vacía donde se mueven las otras) que para ganarlo hay que formar la imagen completa.
El Javascript del juego es el siguiente:
Y el HTML, por si es necesario, es este:
Quiero mejorarlo un poco para subirlo a mi portfolio, soy estudiante pero planeo aprender mucho más.
Desde ya, gracias.
Se trata de un puzzle de 8 imágenes (y 1 adicional vacía donde se mueven las otras) que para ganarlo hay que formar la imagen completa.
El Javascript del juego es el siguiente:
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
var grilla = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];var posicionVacia = {
fila:2,
columna:2};function chequearSiGano(){
return grillaOrdenada();
}function grillaOrdenada(){
var cantidadFilas = grilla.length;
var cantidadColumnas = grilla[0].length;
var ultimoValorVisto = 0; var valorActual = 0;for(var fila=0; fila < cantidadFilas; fila++){
for(var columna=0; columna < cantidadColumnas; columna++){
valorActual = grilla[fila][columna]
if(valorActual < ultimoValorVisto) return false;
ultimoValorVisto = valorActual; } }return true;
}function intercambiarPosiciones(fila1, columna1, fila2, columna2){
var pieza1 = grilla[fila1][columna1];
var pieza2 = grilla[fila2][columna2];
grilla[fila1][columna1] = pieza2;
grilla[fila2][columna2] = pieza1;
var elementoPieza1 = document.getElementById('pieza'+pieza1);
var elementoPieza2 = document.getElementById('pieza'+pieza2);
var padre = elementoPieza1.parentNode;
var clonElemento1 = elementoPieza1.cloneNode(true);
var clonElemento2 = elementoPieza2.cloneNode(true);
padre.replaceChild(clonElemento1, elementoPieza2);
padre.replaceChild(clonElemento2, elementoPieza1);
}function actualizarposicionVacia(nuevaFila,nuevaColumna){
posicionVacia.fila = nuevaFila;
posicionVacia.columna = nuevaColumna;
}function posicionValida(fila, columna){
return (fila >= 0 && fila <= 2) && (columna >= 0 && columna <= 2);
}function moverEnDireccion(direccion){
var nuevaFilaPiezaBlanca;
var nuevaColumnaPiezaBlanca;
if(direccion == 40){
nuevaFilaPiezaBlanca = posicionVacia.fila-1;
nuevaColumnaPiezaBlanca = posicionVacia.columna;
}else if (direccion == 38) {
nuevaFilaPiezaBlanca = posicionVacia.fila+1;
nuevaColumnaPiezaBlanca = posicionVacia.columna;
}else if (direccion == 39) {
nuevaFilaPiezaBlanca = posicionVacia.fila;
nuevaColumnaPiezaBlanca = posicionVacia.columna-1;
}else if (direccion == 37) {
nuevaFilaPiezaBlanca = posicionVacia.fila;
nuevaColumnaPiezaBlanca = posicionVacia.columna+1;
}if (posicionValida(nuevaFilaPiezaBlanca, nuevaColumnaPiezaBlanca)){
intercambiarPosiciones(posicionVacia.fila, posicionVacia.columna,
nuevaFilaPiezaBlanca, nuevaColumnaPiezaBlanca);
actualizarposicionVacia(nuevaFilaPiezaBlanca, nuevaColumnaPiezaBlanca);
}}function mezclarPiezas(veces){
if(veces<=0){return;}
var direcciones = [40, 38, 39, 37];
var direccion = direcciones[Math.floor(Math.random()*direcciones.length)];
moverEnDireccion(direccion);
setTimeout(function(){
mezclarPiezas(veces-1);
},100);
}function capturarTeclas(){
document.body.onkeydown = (function(evento) {
moverEnDireccion(evento.which);
var gano = chequearSiGano();
if(gano) alert('¡Ganaste!');
evento.preventDefault();
})
}function iniciar(){
mezclarPiezas(60);
capturarTeclas();
}iniciar();
Y el HTML, por si es necesario, es este:
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Puzzle</title>
<link rel="stylesheet" href="css/juego.css">
<link href="https://fonts.googleapis.com/css?family=Freckle+Face|Rancho" rel="stylesheet">
</head>
<body>
<div class="col-40">
<div id="titulo">
<h1>Puzzle</h1>
</div>
<div id="instrucciones">
<h2>Instrucciones del juego:</h2>
<ul>
<li>Mover las piezas presionando las flechas del teclado o utilizando el mouse.</li>
<li>Resolvé el puzzle formando la imagen para ganar.</li>
</ul>
</div>
</div>
<div class="col-60">
<div id="juego">
<div class="pieza" id="pieza1"><img src="images/10.jpg"></div>
<div class="pieza" id="pieza2"><img src="images/20.jpg"></div>
<div class="pieza" id="pieza3"><img src="images/30.jpg"></div>
<div class="pieza" id="pieza4"><img src="images/40.jpg"></div>
<div class="pieza" id="pieza5"><img src="images/50.jpg"></div>
<div class="pieza" id="pieza6"><img src="images/60.jpg"></div>
<div class="pieza" id="pieza7"><img src="images/70.jpg"></div>
<div class="pieza" id="pieza8"><img src="images/80.jpg"></div>
<div class="pieza" id="pieza9"></div>
</div>
</div>
<footer>Realizado por <b>Jojolines</b></footer>
<script src="js/juego.js"></script>
</body>
</html>
Quiero mejorarlo un poco para subirlo a mi portfolio, soy estudiante pero planeo aprender mucho más.
Desde ya, gracias.
Valora esta pregunta
0
