Juego de dados entre dos jugadores.

quad22 · #1 (**permalink**) 02/07/2016, 08:21

Supongamos que tenemos el siguiente archivo que ejecuta el juego de tirar un dado, pero necesito crear un segundo jugador y hacer que primero tire un jugador, después tire el segundo jugador y que salga un mensaje que diga qué jugador ha ganado.

¿Cual sería su código?
Debería mostrar dos imágenes de dos

Código del juego del dado.

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dados Jquery</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                // una vez cargado el archivo, tiramos el primer dado
                tiroDado();
            });
            
            function tiroDado(){
                         
                // obtenemos un numero aleatorio entre el 0 y el 5
                var num = Math.floor(Math.random() * 6) + 0;
                // escondemos todas las imagenes
                $("#tablero img").hide();
                // mostramos la imagen aleatoria
                $("#tablero img").eq(num).fadeIn();
                // mostramos el numero en texto
                $("#ultimoNumero").html(num+1);
            }
        </script>
        <style>
            #tablero img {display:none;width:167px;height:167px;}
        </style>
    </head>
<body>
    <div id="tablero">
        <img src="dado1.png"/>
        <img src="dado2.png"/>
        <img src="dado3.png"/>
        <img src="dado4.png"/>
        <img src="dado5.png"/>
        <img src="dado6.png"/>
    </div>
    <input type="button" onclick="tiroDado();" value="Tirar Dado"/> N&uacute;mero: <span id='ultimoNumero'></span>
    
</body>
</html>

#2 (**permalink**) 02/07/2016, 12:04

a puro js no se puede, ya que la conexión entre jugadores debe pasar por un servidor que conecten dos o más clientes.

te recomiendo usar ajax y php

saludos. :)

quad22 · #3 (**permalink**) 02/07/2016, 13:05

Bueno... sólo quiero una simulación.

Creo que debería duplicar el código y escribir la orden de que al finalizar el jugador 1 empiece el jugador 2 y finalmente que un script indique qué jugador ha sacado el número más alto.

¿Cómo sería el código?

#4 (**permalink**) 02/07/2016, 13:20

Quieras una simulación o no, para conectar 2 clientes -o más- debes tener alguna tecnología que acepte y tome los datos de todo el juego, porque no es solo conocer quien ganó la partida, sino que el estado del juego en general. y eso con js no lo vas a lograr

edito: lo otro es probar con node js

saludos

Alexis88 · #5 (**permalink**) 02/07/2016, 14:55

¿Algo como esto?

Básicamente, tienes que establecer al conjunto de jugadores implicados, el resultado del lanzamiento del dado para cada uno de ellos y el ganador o ganadores (en caso de empate).

En este ejemplo, se permite registrar a N jugadores; luego, se procede a guardarlos en un arreglo que es recorrido con una estructura cíclica para que, en cada iteración, se realice la simulación del lanzamiento del dado que no es otra cosa que la obtención de un número aleatorio entre el 1 y el 6 (no se puede obtener un cero al lanzar un dado, como pretendes). Al obtener el resultado, se le compara con el valor mayor obtenido en los lanzamientos previos; pero como al inicio no se habrá realizado lanzamiento alguno, establezco un valor inicial menor que el mínimo que se puede obtener para que así, luego del primer lanzamiento, el primer jugador, por lógica, lleve la delantera. Conforme se obtienen resultados superiores, se almacena el nombre o nombres correspondientes en una variable que, finalmente, es mostrada, indicando quién o quiénes ganaron.

Debido a que se trata de un ejemplo sencillo, te sugiero adaptarlo a lo que necesitas. No dudes en preguntar por si no entendiste algo.

quad22 · #6 (**permalink**) 02/07/2016, 16:49

Lo que necesito es establecer esto:

Alexis88 · #7 (**permalink**) 02/07/2016, 16:59

Lo único que cambiaría es la muestra del resultado, misma que imprimirías en el elemento que nos muestras. La determinación del ganador o ganadores, no tendría que variar.

quad22 · #8 (**permalink**) 02/07/2016, 17:04

También tiene que estimar el empate. Este ejemplo es más sencillo:

#9 (**permalink**) 02/07/2016, 17:11

Mira yo he persistido con ajax por la simple idea MÍA de que cada jugador INDEPENDIENTE, es decir, no bots como lo muestra Alexiss88, y que además cada jugador este en su ordenador.

Ahora, si ambos jugadores están en el mismo PC, se me ocurrió una solución un poco fea:

Código HTML:

Ver original<html>
    <head>
        <title>Dice Game</title>
        <script type="text/javascript">
        start = false;
        
        function startGame(){
            if(!start){
            var name1 = document.getElementById("player1_start").value;
            var name2 = document.getElementById("player2_start").value;
            
            var aux = true;
            
                if(name1 == "" || name2 == ""){
                alert("Uno de los jugadores no ingreso su nombre");
                aux = false;
                }
                
                if(name1 == name2){
                alert("Los nombres de los jugadores coinciden");
                aux = false
                }
                
                if(aux){ 
                start=true;
                document.getElementById("start_form").style.display = "none";
                document.getElementById("game_main").style.display = "inline";
                
                document.getElementById("player1").innerHTML=name1;
                document.getElementById("player2").innerHTML=name2;
                
                alert("Juego iniciado!! suerte ;)");
                }
            }
            else{
            alert("Juego ya iniciado"); 
            }
        }
        
        function jugar(num){
            if(start){
            var jugador = document.getElementById("player"+num+"_result");
                if(jugador.innerHTML == "0"){
                var dado = Math.floor(Math.random()*6)+1;
                jugador.innerHTML = dado;
                }
                else{
                alert("usted ya lanzo...");
                }
            }
            else{
            alert("El juego aun no ha iniciado");
            }       
        }
        
        function winner(){
        var r1 = parseInt(document.getElementById("player1_result").innerHTML);
        var r2 = parseInt(document.getElementById("player2_result").innerHTML); 
            if(r1 != 0 && r2 != 0){
            var playerName1 = document.getElementById("player1").innerHTML;
            var playerName2 = document.getElementById("player2").innerHTML;
            
                if(r1 > r2){
                alert(playerName1+" gano!!");
                var playerScore1 = document.getElementById("score_1");
                playerScore1.innerHTML = parseInt(playerScore1.innerHTML)+1;
                }
                else if(r1 < r2){
                alert(playerName2+" gano!!");
                var playerScore2 = document.getElementById("score_2");
                playerScore2.innerHTML = parseInt(playerScore2.innerHTML)+1;
 
                }
                else{
                alert("empate");
                }
            document.getElementById("player1_result").innerHTML = "0";
            document.getElementById("player2_result").innerHTML = "0";
            }
            else{
            alert("Espere al otro jugador");
            }
        }
        
        </script>
    </head>
    <body>
        <div id="start_form">
        Jugador 1: <input type="text" id="player1_start"><br/>
        Jugador 2: <input type="text" id="player2_start"><br/>
        <input type="button" value="Start" onclick="startGame();" />
        </div>
        
        <div id="game_main" style="display:none;">
        <span id="player1"></span> <input type="button" value="Tire el dado!!" onclick="jugar(1); setTimeout('winner()', 100);"/> Su numero es <span id="player1_result" >0</span> &nbsp; Puntaje: <span id="score_1">0</span><br/>
        <span id="player2"></span> <input type="button" value="Tire el dado!!" onclick="jugar(2); setTimeout('winner()', 100);"/> Su numero es <span id="player2_result" >0</span> &nbsp; Puntaje: <span id="score_2">0</span><br/>
        </div>
    </body>
</html>

está muy fea la hice a la rápida y sin pensar en MUCHAS cosas, simplemente resolví el problema a lo bruto...

Saludos

quad22 · #10 (**permalink**) 02/07/2016, 18:05

Buena aportación.

Y cómo implementarías las imágenes de los dados, esto es, ¿como adaptarías el código:

<div id="tablero">
<img src="dado1.png"/>
<img src="dado2.png"/>
<img src="dado3.png"/>
<img src="dado4.png"/>
<img src="dado5.png"/>
<img src="dado6.png"/>
</div>
<input type="button" onclick="tiroDado();" value="Tirar Dado"/> Número: <span id='ultimoNumero'></span>

a tu solución?.

(cada jugador deberá mostrar su propio dado).

Alexis88 · #11 (**permalink**) 02/07/2016, 18:09

Ten un arreglo con las rutas de las imágenes y selecciona a la que corresponda con el valor aleatorio obtenido, recordando que, en un arreglo, las posiciones se cuentan desde el cero.

Por cierto, en el ejemplo que te pasé, también se toma en cuenta un eventual empate entre N jugadores.