[Resuelto] Piedra, papel, tijeras y algo más... en javascript

[HelThunk]

Buenas ,
Hace nada (ayer) me puse a aprender algo de javascript, me pareció entretenido intentar hacer el siguiente 'piedra, papel o tijeras', básicamente es como el clásico, pero con más opciones;



Sería un placer leer sus aportaciones (si pegáis el code en la consola del navegador podréis probarlo);

Código (javascript) [Seleccionar] Expandir


function randomnumber() //Número aleatorio (Para asignar a la máquina)
{
   var numero = Math.floor( Math.round(Math.random() * 15 ));
   return numero;}
function allgame() //Base juego
{
userOption = prompt("Select a one option; \n Gun = 0 \n Lightning = 1 \n Devil = 2 \n Dragon = 3 \n Water = 4 \n Air = 5 \n Paper = 6 \n Sponge = 7 \n Wolf = 8 \n Tree = 9 \n Human = 10 \n Snake = 11 \n Scissors = 12 \n Fire = 13 \n Rock = 14");
alert("Your select " + options[userOption]);
alert("Machine select " + options[machineOption]);
userOption = parseInt(userOption);
switch(userOption){
case 0:
//Gun
   if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption == "Rock" || machineOption == "Fire" || machineOption == "Scissors" || machineOption == "Snake" || machineOption == "Human" || machineOption == "Tree" || machineOption == "Wolf"){
alert("Yea, you're a winner");
}
else if(machineOption != "Lightning" || machineOption == "Devil" || machineOption == "Dragon" || machineOption == "Water" || machineOption == "Air" || machineOption == "Paper" || machineOption == "Sponge"){
      alert("Oh, damn.. you're a loser");
}
continuos;
 break;
case 1:
//Lightning
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption == "Gun" || machineOption == "Rock" || machineOption == "Fire" || machineOption == "Scissors" || machineOption == "Snake" || machineOption == "Human" || machineOption == "Tree"){
alert("Yea, you're a winner");
}
else if(machineOption == "Devil" || machineOption == "Dragon" || machineOption == "Water" || machineOption == "Air" || machineOption == "Paper" || machineOption == "Sponge" || machineOption == "Wolf"){
      alert("Oh, damn.. you're a loser");
}
break;
case 2:
//Devil
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption != "Lightning" || machineOption == "Gun" || machineOption == "Rock" || machineOption == "Fire" || machineOption == "Scissors" || machineOption == "Snake" || machineOption == "Human"){
alert("Yea, you're a winner");
}
else if(machineOption == "Dragon" || machineOption == "Water" || machineOption == "Air" || machineOption == "Paper" || machineOption == "Sponge" || machineOption == "Wolf" || machineOption == "Tree"){
      alert("Oh, damn.. you're a loser");
}
break;
case 3:
//Dragon
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption != "Devil" || machineOption != "Lightning" || machineOption == "Gun" || machineOption == "Rock" || machineOption == "Fire" || machineOption == "Scissors" || machineOption == "Snake"){
alert("Yea, you're a winner");
}
else if(machineOption == "Water" || machineOption == "Air" || machineOption == "Paper" || machineOption == "Sponge" || machineOption == "Wolf" || machineOption == "Tree"|| machineOption == "Human"){
      alert("Oh, damn.. you're a loser");
}
break;
case 4:
//Water
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption != "Dragon" || machineOption != "Devil" || machineOption != "Lightning" || machineOption == "Gun" || machineOption == "Rock" || machineOption == "Fire" || machineOption == "Scissors"){
alert("Yea, you're a winner");
}
else if(machineOption == "Air" || machineOption == "Paper" || machineOption == "Sponge" || machineOption == "Wolf" || machineOption == "Tree"|| machineOption == "Human"|| machineOption == "Snake"){
      alert("Oh, damn.. you're a loser");
}
break;
case 5:
//Air
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption != "Water" ||machineOption != "Dragon" || machineOption != "Devil" || machineOption != "Lightning" || machineOption == "Gun" || machineOption == "Rock" || machineOption == "Fire"){
alert("Yea, you're a winner");
}
else if(machineOption == "Paper" || machineOption == "Sponge" || machineOption == "Wolf" || machineOption == "Tree"|| machineOption == "Human"|| machineOption == "Snake"|| machineOption == "Scissors"){
      alert("Oh, damn.. you're a loser");
}
break;
case 6:
//Paper
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption != "Air" || machineOption != "Water" ||machineOption != "Dragon" || machineOption != "Devil" || machineOption != "Lightning" || machineOption == "Gun" || machineOption == "Rock"){
alert("Yea, you're a winner");
}
else if(machineOption == "Sponge" || machineOption == "Wolf" || machineOption == "Tree"|| machineOption == "Human"|| machineOption == "Snake"|| machineOption == "Scissors"|| machineOption == "Fire"){
      alert("Oh, damn.. you're a loser");
}
break;
case 7:
//Sponge
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption != "Paper" || machineOption != "Air" || machineOption != "Water" ||machineOption != "Dragon" || machineOption != "Devil" || machineOption != "Lightning" || machineOption == "Gun"){
alert("Yea, you're a winner");
}
else if(machineOption == "Wolf" || machineOption == "Tree"|| machineOption == "Human"|| machineOption == "Snake"|| machineOption == "Scissors"|| machineOption == "Fire"|| machineOption == "Rock"){
      alert("Oh, damn.. you're a loser");
}
break;
case 8:
//Wolf
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption != "Sponge" || machineOption != "Paper" || machineOption != "Air" || machineOption != "Water" ||machineOption != "Dragon" || machineOption != "Devil" || machineOption != "Lightning"){
alert("Yea, you're a winner");
}
else if(machineOption == "Tree"|| machineOption == "Human"|| machineOption == "Snake"|| machineOption == "Scissors"|| machineOption == "Fire"|| machineOption == "Rock"|| machineOption == "Gun"){
      alert("Oh, damn.. you're a loser");
}
break;
case 9:
//Tree
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption != "Wolf" || machineOption != "Sponge" || machineOption != "Paper" || machineOption != "Air" || machineOption != "Water" ||machineOption != "Dragon" || machineOption != "Devil"){
alert("Yea, you're a winner");
}
else if(machineOption == "Human"|| machineOption == "Snake"|| machineOption == "Scissors"|| machineOption == "Fire"|| machineOption == "Rock"|| machineOption == "Gun"|| machineOption != "Lightning"){
      alert("Oh, damn.. you're a loser");
}
break;
case 10:
//human
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption != "Tree" ||machineOption != "Wolf" || machineOption != "Sponge" || machineOption != "Paper" || machineOption != "Air" || machineOption != "Water" ||machineOption != "Dragon"){
alert("Yea, you're a winner");
}
else if(machineOption == "Snake"|| machineOption == "Scissors"|| machineOption == "Fire"|| machineOption == "Rock"|| machineOption == "Gun"|| machineOption != "Lightning"|| machineOption != "Devil"){
      alert("Oh, damn.. you're a loser");
}
break;
case 11:
//Snake
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption == "Snake"||machineOption != "Tree" ||machineOption != "Wolf" || machineOption != "Sponge" || machineOption != "Paper" || machineOption != "Air" || machineOption != "Water"){
alert("Yea, you're a winner");
}
else if(machineOption == "Scissors"|| machineOption == "Fire"|| machineOption == "Rock"|| machineOption == "Gun"|| machineOption != "Lightning"|| machineOption != "Devil"||machineOption != "Dragon"){
      alert("Oh, damn.. you're a loser");
}
break;
case 12:
//Scissors
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption == "Scissors"||machineOption == "Snake"|| machineOption != "Tree" ||machineOption != "Wolf" || machineOption != "Sponge" || machineOption != "Paper" || machineOption != "Air"){
alert("Yea, you're a winner");
}
else if(machineOption == "Fire"|| machineOption == "Rock"|| machineOption == "Gun"|| machineOption != "Lightning"|| machineOption != "Devil"||machineOption != "Dragon"|| machineOption != "Water"){
      alert("Oh, damn.. you're a loser");
}
break;
case 13:
//Fire
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption == "Fire"||machineOption == "Scissors"||machineOption == "Snake"|| machineOption != "Tree" ||machineOption != "Wolf" || machineOption != "Sponge" || machineOption != "Paper"){
alert("Yea, you're a winner");
}
else if(machineOption == "Rock"|| machineOption == "Gun"|| machineOption != "Lightning"|| machineOption != "Devil"||machineOption != "Dragon"|| machineOption != "Water" || machineOption != "Air"){
      alert("Oh, damn.. you're a loser");
}
break;
case 14:
//Rock
if(machineOption == userOption){
alert("tie :O");
}
else if(machineOption == "Rock"|| machineOption == "Fire"||machineOption == "Scissors"||machineOption == "Snake"|| machineOption != "Tree" ||machineOption != "Wolf" || machineOption != "Sponge"){
alert("Yea, you're a winner");
}
else if(machineOption == "Gun"|| machineOption != "Lightning"|| machineOption != "Devil"||machineOption != "Dragon"|| machineOption != "Water" || machineOption != "Air" || machineOption != "Paper"){
      alert("Oh, damn.. you're a loser");
}

default:{
alert("Stupid boy, select a one valid option...");
}
}}

var userOption;
var options = ["Gun", "Lightning", "Devil", "Dragon", "Water", "Air", "Paper", "Sponge", "Wolf", "Tree", "Human", "Snake", "Scissors", "Fire", "Rock"];
alert("Hello, I'm the creation, the first creation on javascript, please, select a one  option,.. you know rock, paper scrissors?, it's similar");
allgame();
finishgame =false;//condicion para salir/entrar en el do-while
do{
allgame();
alert("You like play again?")
var machineOption = randomnumber();
var answerAgain;
answerAgain = prompt("Please, write 'Yes' or 'No'", "Yes")
if(answerAgain == "Yes" || answerAgain == "YEs"|| answerAgain == "YES"|| answerAgain == "yES"|| answerAgain == "yeS"|| answerAgain == "yEs"|| answerAgain == "yes"){
alert("Reload game..");
finishgame = true;
}
else if(answerAgain == "No" || answerAgain == "no" || answerAgain == "NO" || answerAgain == "nO"){
alert("Leaving game...");
finishgame = false;
}
else{
("Leaving game.. ");
finishgame = false;
}
}while(finishgame)




[gathosdeath]

MM.. Bueno si estas aprendiendo bien, pero fijate que cuando la "machine" le toca elegir devuelve undefined. Para empezar esta bien. Aca te dejo la funcion de random

Código [Seleccionar] Expandir

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

[xustyx]

Podrías haber solucionado el juego con una Lista circular.

Si la opción elegida esta 7 posiciones por delante de la seleccionada por el contrincante ganas tú, sino gana el otro.

[HelThunk]

MM.. Bueno si estas aprendiendo bien, pero fijate que cuando la "machine" le toca elegir devuelve undefined. Para empezar esta bien. Aca te dejo la funcion de random

Código [Seleccionar] Expandir

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Muchas gracias

Podrías haber solucionado el juego con una Lista circular.

Si la opción elegida esta 7 posiciones por delante de la seleccionada por el contrincante ganas tú, sino gana el otro.

¿Cómo se puede hacer eso? :O

[MinusFour]

Lo más sencillo es construir un mapa e.g.:

Código (javascript) [Seleccionar] Expandir


var map = {
"Rock": ["Fire", "Scissors", "Snake", "Human", "Tree", "Wolf", "Sponge"],
"Fire": ["Scissors", "Snake", "Human", "Tree", "Wolf", "Sponge", "Paper"],
"Scissors": ["Snake", "Human", "Tree", "Wolf", "Sponge", "Paper", "Air"],
"Snake": ["Human", "Tree", "Wolf", "Sponge", "Paper", "Air", "Water"],
"Human": ["Tree", "Wolf", "Sponge", "Paper", "Air", "Water", "Dragon"],
"Tree": ["Wolf", "Sponge", "Paper", "Air", "Water", "Dragon", "Devil"],
"Wolf": ["Sponge", "Paper", "Air", "Water", "Dragon", "Devil", "Lightning"],
"Sponge": ["Paper", "Air", "Water", "Dragon", "Devil", "Lightning", "Gun"],
"Paper": ["Air", "Water", "Dragon", "Devil", "Lightning", "Gun", "Rock"],
"Air": ["Water", "Dragon", "Devil", "Lightning", "Gun", "Rock", "Fire"],
"Water": ["Dragon", "Devil", "Lightning", "Gun", "Rock", "Fire", "Scissors"],
"Dragon": ["Devil", "Lightning", "Gun", "Rock", "Fire", "Scissors", "Snake"],
"Devil": ["Lightning", "Gun", "Rock", "Fire", "Scissors", "Snake", "Human"],
"Lightning": ["Gun", "Rock", "Fire", "Scissors", "Snake", "Human", "Tree"],
"Gun": ["Rock", "Fire", "Scissors", "Snake", "Human", "Tree", "Wolf"]
}

De ahí nada mas teniendo las opciones de los dos jugadores (p1 es player 1 y p2 es player 2) haces:

Código (javascript) [Seleccionar] Expandir


if(p1 === p2) {
   //nadie gana
} else if(map[p1].includes(p2)){
   //gana p1
} else {
   //gana p2
}

Obviamente es bastante tedioso escribir ese diccionario o mapa, así que lo puedes construir con javascript:

Código (javascript) [Seleccionar] Expandir


var options = ['Rock', 'Fire', 'Scissors', 'Snake','Human',
'Tree', 'Wolf', 'Sponge', 'Paper','Air',
'Water', 'Dragon', 'Devil', 'Lightning','Gun']; //15 opciones

var map = options.reduce(function(o, v, i, a){
var nPos, arr = [];
for(var x = 1; x < 8; x++){
nPos = i + x;
nPos = nPos >= a.length ? (nPos - a.length) : nPos;
arr.push(a[nPos]);
}
o[v] = arr;
return o;
}, {});

Puedes usar una lista ligada circular también:

Código (javascript) [Seleccionar] Expandir


var list = { head : { }, prev : null };
list.current = list.head;

var options = ['Rock', 'Fire', 'Scissors', 'Snake','Human',
'Tree', 'Wolf', 'Sponge', 'Paper','Air',
'Water', 'Dragon', 'Devil', 'Lightning','Gun', null];

var linkedList = options.reduce(function(list, v){
if(v !== null){
list.current.v = v;
list.current.n = { };
//move forward
list.prev = list.current;
list.current = list.current.n;
} else {
//end of list
list.prev.n = list.head;
}
return list;
}, list).head;

Necesitas otras funciones para encontrar las opciones de los jugadores:

Código (javascript) [Seleccionar] Expandir


function find(list, v){
var pointer = list;
while (pointer.v !== v){
pointer = pointer.n;
}
return pointer;
}

function lookAhead(init, num, v){
var pointer = init.n;
for(var i = 0; i < num; i++){
if(pointer.v === v) return true;
pointer = pointer.n;
}
return false;
}

var win = (p1, p2, list) => lookAhead(find(list, p1), 7, p2);

Y ahora simplemente para verificar si ganas o pierdes:

Código (javascript) [Seleccionar] Expandir


if(p1 === p2) {
   //nadie gana
} else if(win(p1, p2, linkedList)){
   //gana p1
} else {
   //gana p2
}

[HelThunk]

Mis disculpas, pero recién estoy iniciando y me cuesta bastante entender el funcionamiento de tu código. He entendido como funciona .map (gracias a la explicación de tu pág), pero me gustaría aclarar varias cosas;

Cuando creas la variable map;

Código (javascript) [Seleccionar] Expandir


var map = {
"Rock": ["Fire", "Scissors", "Snake", "Human", "Tree", "Wolf", "Sponge"],
"Fire": ["Scissors", "Snake", "Human", "Tree", "Wolf", "Sponge", "Paper"],
"Scissors": ["Snake", "Human", "Tree", "Wolf", "Sponge", "Paper", "Air"],
"Snake": ["Human", "Tree", "Wolf", "Sponge", "Paper", "Air", "Water"],
"Human": ["Tree", "Wolf", "Sponge", "Paper", "Air", "Water", "Dragon"],
"Tree": ["Wolf", "Sponge", "Paper", "Air", "Water", "Dragon", "Devil"],
"Wolf": ["Sponge", "Paper", "Air", "Water", "Dragon", "Devil", "Lightning"],
"Sponge": ["Paper", "Air", "Water", "Dragon", "Devil", "Lightning", "Gun"],
"Paper": ["Air", "Water", "Dragon", "Devil", "Lightning", "Gun", "Rock"],
"Air": ["Water", "Dragon", "Devil", "Lightning", "Gun", "Rock", "Fire"],
"Water": ["Dragon", "Devil", "Lightning", "Gun", "Rock", "Fire", "Scissors"],
"Dragon": ["Devil", "Lightning", "Gun", "Rock", "Fire", "Scissors", "Snake"],
"Devil": ["Lightning", "Gun", "Rock", "Fire", "Scissors", "Snake", "Human"],
"Lightning": ["Gun", "Rock", "Fire", "Scissors", "Snake", "Human", "Tree"],
"Gun": ["Rock", "Fire", "Scissors", "Snake", "Human", "Tree", "Wolf"]
}
y le asignas los datos, ¿realmente funcionara como un case no?, es decir, tu pedirás los datos de p1, digamos 'Air', y en ese momento, solo se centra en el array interno de Air no?, es decir, para el programa en ese momento map es igual a

Código (javascript) [Seleccionar] Expandir


Map == "Air": ["Water", "Dragon", "Devil", "Lightning", "Gun", "Rock", "Fire"]
y a continuación busca si p2(lo que ha seleccionado el segundo jugador) esta dentro de 'Air', para decidir quién gana no?

Otra duda, tanto en tu página como en el código anterior, veo que para comparar dos valores iguales utilizas '===', en vez de '==', ¿hay algún motivo en particular?

Código (javascript) [Seleccionar] Expandir


   if(p1 === p2) {

En cuento al resto del código.. se sale de mis limitaciones, aún me falta mucho por aprender.. disculpa las molestiasy gracias por la gran aportación

[MinusFour]

Si, el uso que le doy es algo similar a lo que harías con un case:

Código (javascript) [Seleccionar] Expandir


...
case 'Air':
    return ["Water", "Dragon", "Devil", "Lightning", "Gun", "Rock", "Fire"].includes(p2);
...

map es map a menos que yo haga algún cambio. Cuando tu haces:

Código (javascript) [Seleccionar] Expandir


map[p1] //donde p1 es una de las 15 opciones

El resultado de esa expresión es el arreglo que contiene las posibilidades para la cual la entrada p1 es ganadora. Es decir si p2 eligió cualquiera de esas entradas entonces p1 gana y p2 pierde. De lo contrario p2 pierde. Lo único que haces es buscar si la opción que p2 eligió está dentro de este arreglo.

El triple signo de igualdad ( === ) es usado para hacer una comparación estricta entre dos expresiones. Cuando tu utilizas el doble signo de igualdad ( == ) y los valores a los que resuelve cada una de las expresiones son de diferente tipo, javascript intenta convertir los valores al punto que pueda hacer la comparación. Yo quiero comparar exactamente el mismo valor y no valores similares, quiero evitar esta coerción de datos. De todos modos, si utilizas valores del mismo tipo con doble signo de igualdad realiza los mismos pasos que si usarás el triple signo de igualdad.

Mi página todavía no está terminada , de momento solo tengo algunas entradas acerca de código asíncrono en javascript.

[HelThunk]

Si, el uso que le doy es algo similar a lo que harías con un case:

Código (javascript) [Seleccionar] Expandir


...
case 'Air':
    return ["Water", "Dragon", "Devil", "Lightning", "Gun", "Rock", "Fire"].includes(p2);
...

map es map a menos que yo haga algún cambio. Cuando tu haces:

Código (javascript) [Seleccionar] Expandir


map[p1] //donde p1 es una de las 15 opciones

El resultado de esa expresión es el arreglo que contiene las posibilidades para la cual la entrada p1 es ganadora. Es decir si p2 eligió cualquiera de esas entradas entonces p1 gana y p2 pierde. De lo contrario p2 pierde. Lo único que haces es buscar si la opción que p2 eligió está dentro de este arreglo.

El triple signo de igualdad ( === ) es usado para hacer una comparación estricta entre dos expresiones. Cuando tu utilizas el doble signo de igualdad ( == ) y los valores a los que resuelve cada una de las expresiones son de diferente tipo, javascript intenta convertir los valores al punto que pueda hacer la comparación. Yo quiero comparar exactamente el mismo valor y no valores similares, quiero evitar esta coerción de datos. De todos modos, si utilizas valores del mismo tipo con doble signo de igualdad realiza los mismos pasos que si usarás el triple signo de igualdad.

Mi página todavía no está terminada , de momento solo tengo algunas entradas acerca de código asíncrono en javascript.

Perfecto , muchas gracias por la explicación, aunque una duda.. dices que == intenta convertir los valores a un símil, ¿al finalizar la comparación devuelve el dato a su estado anterior?,¿ o si ha convertido un num en text se queda como text?

[MinusFour]

Perfecto , muchas gracias por la explicación, aunque una duda.. dices que == intenta convertir los valores a un símil, ¿al finalizar la comparación devuelve el dato a su estado anterior?,¿ o si ha convertido un num en text se queda como text?

Las referencias se quedan como tal, los valores convertidos se usan para comparar y luego se descartan.