Nueva pregunta

Pregunta:

Fecha: 09-06-2017 08:54:44 (En Español)

¿Qué medios usar para realizar juegos de azar? Ruleta y Tragamonedas[No resuelta]

Estoy realizando unos pequeños mini juegos sobre la ruleta, estoy por convencerme de que no hay forma de hacerlo de una manera más elegante que no sea con canvas, la cual no manejo y por lo visto estare retrasado con eso, también intente con unas librerías como JQuery Rotate pero no conseguí un resultado tan bueno.

Si alguien podría ayudarme con la info o material para realizar este tipo de trabajo se lo agradecería. El tragamonedas por otra parte me parecio más sencillo de resolver y solo me restaria optimizar el diseño y operatividad. Aquí el código por si a alguien le interese:

Para correrlo se tienen que reemplazar las rutas de las imagenes:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
<style>
    
    body{
        
      background-color:black;   
      
        
    }
    table, th, td {
    border:2px solid black;
 
}
    
    
    .imajack{
        background-color: white;
        width: 150px;
        height:200px; 
        max-width:200px; 
           border-radius: 1px;
        
    }
    
     </style>
    
    
    </head>
    <body >
        <br>
        <br>
        <br>
        <br>
        <br>
        
    <center>
        <table>
            
            <tr>
                <th>  <img id="fruta1" class="imajack" src="../images/FRUTAS/siete.jpg" alt=""/></th>
          
                <th>  <img id="fruta2" class="imajack" src="../images/FRUTAS/siete.jpg" alt=""/> </th>
               
                <th>  <img id="fruta3" class="imajack" src="../images/FRUTAS/siete.jpg" alt=""/>  </th>

            </tr>
            <tr>
                <th></th>
                <th><button class="btn-default col-xs-12" id="play"> Jugar </button></th>
                <th></th>
                
            </tr>
            
            
        </table>
        
        
        
    </center>
        
        <?php
        // put your code here
        ?>
        
    <script>
    
    $(document).ready(function(){
      // var timer;
    //   var control = 0;
 function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

   function onerest(){
       
     for(var x=0; x < 1; x++ ){
         
        var num1 = getRandomInt(1,6);
         var num2 = getRandomInt(1,6);
         var num3 = getRandomInt(1,6);
         
        var  imag =["", "../images/FRUTAS/APLE.png","../images/FRUTAS/CHERRY.png","../images/FRUTAS/LEMON.jpg","../images/FRUTAS/ORANGE.jpg", "../images/FRUTAS/STRAMBERRY.png", "../images/FRUTAS/WATERMELON.png" ] ;
        
        
        var img1= imag[num1];
        var img2= imag[num2];
        var img3= imag[num3];
        
        
      //  document.ElementById.("fruta1").src=img1;
        
        document.getElementById("fruta1").src=img1;
        document.getElementById("fruta2").src=img2;
        document.getElementById("fruta3").src=img3;
          
                
         }
   }
   
timer =  setInterval(function(){onerest();},100);
   
    $('#play').click(function(){
        
      //
       //setInterval(function(){onerest();   },100);
	
	timer=clearInterval(timer);
       
       
       var frut1=document.getElementById("fruta1").src;
       var frut2=document.getElementById("fruta2").src;
       var frut3=document.getElementById("fruta3").src;
       
       if(frut1==frut2 &&  frut1==frut3  ){
           
       
           alert ("ganaste");
           
       }
       else{
           
            alert ("Lo sentimos , tal vez la proxima");
           
       }
       
       
//        $('#fruta'+num1).fadeIn();
//        $('#fruta'+num2).fadeIn();
//        $('#fruta'+num3).fadeIn();
            
            
        })
        
        
        $('#fruta'+num1).fadeOut(200, function() {
                    $('#fruta1').fadeIn(100); ;
				});
        $('#fruta'+num2).fadeOut(400, function() {
				$('#fruta2').fadeIn(100);;
				});
        $('#fruta'+num3).fadeOut(600, function() {
				$('#fruta3').fadeIn(100);
				});
        
    })
        
    </script>    
        
</body>
</html>
Etiquetas: HTML - HTML5 - HTML5 canvas - Idea - Javascript - JQuery - Pregunta Votos: 0 - Respuestas: 1 - Vistas: 17 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión