Juego de sapos y ranas javascript

-
En este ejemplo de programación mostrare el juego de sapos y ranas hecho en javascript, describiendo es un juego en el cual se dispone de seis fichas sobre la mesa en una hilera. Se agrupan tres de un color a la izquierda y tres del otro color a la derecha, y se deja un espacio entre ambos grupos, en el que cabría una ficha. Ver el diagrama:


Objetivo
El objetivo de este rompecabezas es intercambiar las posiciones entre ambos grupos de fichas. Se pide realizar la tarea con el menor número posible de movimientos, y calcular de cuantos se trata.

Movimientos permitidos
Existen dos tipos de movimientos validos:
a) Desplazamiento: una ficha pasa a ocupar una casilla vacía, vecina a donde se encuentra.



b) Salto: una ficha salta sobre otra en una casilla vecina, para caer en la posición siguiente, que debe estar vacía. Fichas de igual color no pueden saltarse.



Nota: Puedes mover las fichas asía cualquier lado siempre y cuando haya espacio.

Se ocuparía definir 7 imágenes con un id para intercambiar sus colores cada vez que demos click, además de definir los movimientos permitidos como ser el desplazamiento y salto que se nos describen.

Aquí el código:

#include

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<style type="text/css">
body{margin:0px;
background-size: cover;}
.caja {
position: absolute;
     }
img{
 border: solid #666;
}
</style>
<script type="text/javascript">
var cont="",CONTT=0;
var posiciones = { i1: 'negro.png',
                   i2: 'negro.png',
       i3: 'negro.png',
       i4: 'blanco.png',
       i5: 'rojo.png',
       i6: 'rojo.png',
       i7: 'rojo.png'  };
var z="";
</script>
</head>
<body>
  <h4>Sapos y ranas</h4>

  <div class="caja">
  <img src="negro.png" id="i1"/>
  <img src="negro.png" id="i2"/>
  <img src="negro.png" id="i3"/>
  <img src="blanco.png" id="i4"/>
  <img src="rojo.png" id="i5"/>
  <img src="rojo.png" id="i6"/>
  <img src="rojo.png" id="i7"/>
  
  </div>
  
  <script type="text/javascript">
           var echo12=false,echo34=false,echo56=false,echo78=false,echo910=false,echo1112=false;
 //opteniendo id de las img
 var i=document.getElementById('i1');
 var i2=document.getElementById('i2');
        var i3=document.getElementById('i3');
 var i4=document.getElementById('i4');
        var i5=document.getElementById('i5');
 var i6=document.getElementById('i6');
        var i7=document.getElementById('i7');
 
 //comienzo onclick y function i
i.onclick    = function(){    /*alert(posiciones[z])   ;*/                        
(cont==""?cont="i1":cambiando(cont,"i1"));
};//fin onclick y funtion i

//comienzo onclick y function i2
i2.onclick    = function(){                         
(cont==""?cont="i2":cambiando(cont,"i2"));
};//fin onclick y funtion i2

//comienzo onclick y function i3
i3.onclick    = function(){                         
(cont==""?cont="i3":cambiando(cont,"i3"));
};//fin onclick y funtion i3

//comienzo onclick y function i4
i4.onclick    = function(){                         
(cont==""?cont="i4":cambiando(cont,"i4"));
};//fin onclick y funtion i4

//comienzo onclick y function i5
i5.onclick    = function(){                         
(cont==""?cont="i5":cambiando(cont,"i5"));
};//fin onclick y funtion i5 

//comienzo onclick y function i6
i6.onclick    = function(){                         
(cont==""?cont="i6":cambiando(cont,"i6"));
};//fin onclick y funtion i6

//comienzo onclick y function i7
i7.onclick    = function(){                         
(cont==""?cont="i7":cambiando(cont,"i7"));
};//fin onclick y funtion i7 
 
 //la funcion cambiando servira para poder mover cada imagen
 function cambiando(con,im)
 {
  CONTT=CONTT+1;
 //comprobando si es un movimiendo correcto
   $comp=comprobando(con,im);
 
   if(posiciones[con]=='blanco.png' || posiciones[im]=='blanco.png')
   {
   if($comp==true){
  
      document.getElementById(con).src=posiciones[im];
      document.getElementById(im).src=posiciones[con];
    
      z=posiciones[im];
      posiciones[im]=posiciones[con];
      posiciones[con]=z;
      z="";
      cont="";
      triunfo(); 
          
    }
    
   }
   
   
 
 cont="";
 };
 //la funcion triunfo es para ver si ya as ganado
 function triunfo()
 {
    if(posiciones.i1=='rojo.png' && posiciones.i1==posiciones.i2
    &&posiciones.i2==posiciones.i3 && posiciones.i5=='negro.png'  
    &&posiciones.i5==posiciones.i6&&posiciones.i6==posiciones.i7)
    {
     alert('Felicidades as ganado!');//CONTT
alert('Total de movimientos: '+CONTT+' sabias que en tan solo 15 movimientos lo podrias haber terminado')
    }
 };
//la funcion comprobando es para comprobar que el movimiento se acorrecto
function comprobando(e1,e2)
{
  $vecino="";
  $comprobante=false;
     
if(e1=="i1" && e2=="i3" || e1=="i3" && e2=="i1"){$vecino="i2";}
if(e1=="i2" && e2=="i4" || e1=="i4" && e2=="i2"){$vecino="i3";}
if(e1=="i3" && e2=="i5" || e1=="i5" && e2=="i3"){$vecino="i4";}
if(e1=="i4" && e2=="i6" || e1=="i6" && e2=="i4"){$vecino="i5";}
if(e1=="i5" && e2=="i7" || e1=="i7" && e2=="i5"){$vecino="i6";}
 if(posiciones[e1]=='blanco.png')
   {
  
  
  if($vecino!=""){
  if(posiciones[e2]!=posiciones[$vecino])
  {
   $comprobante=true;
  }
  }
   //comparacion  a
if(e1=="i1"&&e2=="i2"||e1=="i2"&&e2=="i1"||e1=="i2"&&e2=="i3"||e1=="i3"&&e2=="i2"||e1=="i3"&&e2=="i4"||e1=="i4"&&e2=="i3"||e1=="i4"&&e2=="i5"||e1=="i5"&&e2=="i4"||e1=="i5"&&e2=="i6"||e1=="i6"&&e2=="i5"||e1=="i6"&&e2=="i7"||e1=="i7"&&e2=="i6")
   {
     if($comprobante==false)
     {
     $comprobante=true;
     }
   }//fin if
    
   }///-----fin comprobacion e1
   else if(posiciones[e2]=='blanco.png')
   {
    ///-----comprobacion e2
  
   if($vecino!=""){
  if(posiciones[e1]!=posiciones[$vecino])
  {
   $comprobante=true;
  }
  }
   //comparacion movimiwntos a
if(e1=="i1"&&e2=="i2"||e1=="i2"&&e2=="i1"||e1=="i2"&&e2=="i3"||e1=="i3"&&e2=="i2"||e1=="i3"&&e2=="i4"||e1=="i4"&&e2=="i3"||e1=="i4"&&e2=="i5"||e1=="i5"&&e2=="i4"||e1=="i5"&&e2=="i6"||e1=="i6"&&e2=="i5"||e1=="i6"&&e2=="i7"||e1=="i7"&&e2=="i6")
   {
     if($comprobante==false)
     {
     $comprobante=true;
     }
   }//fin if
   
   ///-----fin comprobacion e2
   }
   return $comprobante;
 };//fin funcion comprobando
 
 </script>
  
  
  </body>
  </html>

Un juego muy divertido encontrar la manera más rápida de hacerla es un reto.



Descargar ejemplo:
Sapos y ranas javascript



Javascript


Comentarios

Publicar un comentario

Entradas más populares de este blog

Sacando aceleracion de un vehiculo en c++

-
Imagen
La palabra aceleración está presente en muchas situaciones de nuestra vida diaria, tanto es así que incluso uno de los pedales en el automóvil se llama “acelerador”. Siempre se utiliza asociada a un movimiento . Sin embargo, el significado que se le da habitualmente no corresponde exactamente al significado que se le da en Física. La aceleración mide directamente la rapidez con que cambia la velocidad. Si un vehículo se desplaza por una carretera, su velocidad varía  muchas veces durante el viaje; estos cambios en la velocidad se deben porque es imposible mantener una velocidad constante durante un trayecto  ya que pueden ocurrir situaciones que obliguen al conductor a aumentar la misma o a disminuirla. Por ejemplo, puede que el conductor deba frenar bruscamente en una situación de emergencia o bien puede que necesite aumentar la velocidad para adelantar a otro vehículo. En cualquiera de las dos situaciones, hay un cam...
Read more »

Ejemplo de suma Pascal

-
Imagen
Aquí muestro un ejemplo simple de suma en pascal en el cual pide introducir dos números para luego sumarlos y mostrar el resultado : Program P3AE4 (input,output); uses crt; Var num1, num2, total: Integer; Begin writeln('Suma'); writeln('Ingrese el primer numero:'); readln(num1); writeln('Ingrese el segundo numero:'); readln(num2); total:= num1+num2; writeln('El total de la suma es: ',total); readkey; End. Si quiere restar, multiplicar o dividir solo deberían cambiar el símbolo "+" por el deseado. Descargar código: link Turbo Pascal
Read more »

Gráfica de Seno y Coseno en C++ | Código C++

-
Imagen
para graficar por ejemplo la función seno, hacen falta 3 pasos: 1. Hacer un ciclo de 0 a 360º (con aumentos de 5 queda muy bien) con for, algo muy normal. 2. Calcular, obviamente, el seno de cada valor. Para esto la librería math.h nos regala la función sin(). Su uso es el obvio, pero el asunto es que todas las funciones trigonométricas que usa c++ trabajan en radianes. Es decir que primero tendremos que convertir nuestro ángulo en radianes y luego ya sacar el seno. Si la variable ‘i’ contiene el ángulo y tenemos ya definida la constante PI, la función quedaría así: sin(i/180*PI) 3. Luego viene la parte más rara, convertir ese valor en un entero que pueda meter como coordenada en un gotoxy. Si tenemos una variable int y y la igualamos a nuestra función anterior podría quedar bien si multiplicamos por 10: int x, y; y = sin(i/180*PI)*10; gotoxy(x,y); Nos quedaría nuestra gráfica en una escala 1:10, pero al correr el programa veremos que hay muchos valores de seno que ...
Read more »