• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

JavaScript papier kamień nożyce. Moglibyście mi pomóc w naprawieniu programu? Nie działa funkcja wygrana().

+2 głosów
104 wizyt
pytanie zadane 21 lutego w JavaScript przez Kalindoreks Użytkownik (620 p.)
<form>
Stone<input type="radio" name="game" value="stone">
Shear<input type="radio" name="game" value="shear">
Paper<input type="radio" name="game" value="paper">
<input type="button" value="twoj" onClick="funkcja()">
<input type="button" value="inteligencja" onClick="inteligencja()">
<input type="button" value="wynik" onClick="wygrana()">
</form>
<p id="wynik"></p>
<p id="wynik2"></p>
<p id="wynik3"></p>

<script>

function funkcja()
{
	let stones=document.getElementsByName("game");
	
	for(let i=0;i<stones.length;i++)
	{
		if(stones[i].checked)
		{
			var los=stones[i].value;
			document.getElementById("wynik").innerHTML=los;
			console.log(stones[i].value);
		}
	}
}

function inteligencja()
{
	var losd=parseInt(Math.random()*3+1);
	var losg="";
	
	if(losd==1)
	{
		var losg="stone";
		document.getElementById("wynik2").innerHTML="stone";
		console.log(losg);
	}
	else
	if(losd==2)
	{
		var losg="shear";
		document.getElementById("wynik2").innerHTML="shear";
		console.log(losg);
	}
	else
	if(losd==3)
	{
		var losg="paper";
		document.getElementById("wynik2").innerHTML="paper";
		console.log(losg);
	}
	
}

function wygrana(los,losg)
{
	if(los=="stone" && losg=="stone" || los=="shear" && losg=="shear" || los=="paper" && losg=="paper")
	{
		document.getElementById("wynik3").innerHTML="REMIS";
	}
	else
	if(los=="paper" && losg=="stone")
	{
		document.getElementById("wynik3").innerHTML="WYGRYWASZ";
	}
	else
	if(los=="stone" && losg=="shear")
	{
		document.getElementById("wynik3").innerHTML="WYGRYWASZ";
	}
	else
	if(los=="shear" && losg=="paper")
	{
		document.getElementById("wynik3").innerHTML="WYGRYWASZ";
	}
	else
	if(los=="stone" && losg=="paper")
	{
		document.getElementById("wynik3").innerHTML="PRZEGRYWASZ";
	}
	else
	if(los=="shear" && losg=="stone")
	{
		document.getElementById("wynik3").innerHTML="PRZEGRYWASZ";
	}
	else
	if(los=="paper" && losg=="shear")
	{
		document.getElementById("wynik3").innerHTML="PRZEGRYWASZ";
	}
}


</script>

 

1
komentarz 21 lutego przez Paweł Nąckiewicz Nałogowiec (48,870 p.)
Pierwsza uwaga - nie porównuj tego za pomocą == (2x) tylko używaj === (3x).

Nie wiem czy to poprawna forma zapisu else if (nie wiem czy możesz rozbić to na 2 linie)

Jaki jest błąd w przeglądarce?
komentarz 21 lutego przez Kalindoreks Użytkownik (620 p.)
W zasadzie to nie ma błędu wypisuje się, ale za każdym razem wypisuje się REMIS. Dzięki zaraz sprawdzę z tym ===.

2 odpowiedzi

+1 głos
odpowiedź 21 lutego przez VBService VIP (127,550 p.)
edycja 21 lutego przez VBService
 
Najlepsza

Musisz doczytać jak używać const, let czy var, z analizy Twojego kodu wygląda, że tu masz "braki" w tym zakresie. wink

const i let w javascript (ES6) – kiedy ich używać?

funkcję inteligencja() można zapisać "krócej"  smiley

function inteligencja()
{
    // szczególnie w Anglii bardziej używane jest: scissors vs. shears
    const losd = parseInt(Math.random()*3+1);
    let losg = "";
  
    switch (losd)
    {
      case 1: losg="stone"; break;
      case 2: losg="shear"; break; 
      case 3: losg="paper"; break;         
    }

    document.getElementById("wynik2").textContent = losg;
    console.log(losg);     
}
function inteligencja()
{
    // szczególnie w Anglii bardziej używane jest: scissors vs. shears
    const game_arr = [ null, 'stone', 'paper', 'scissors' ];
    const losd = parseInt(Math.random()*3+1);
    const losg = game_arr[losd];

    document.getElementById("wynik2").textContent = losg;
    console.log(`computer: ${losg}`);     
}

funkcja()  wink

function funkcja()
{
    const stones=document.getElementsByName("game");
     
    stones.forEach(stone => {
      if(stone.checked) {
        const los = stone.value;
        document.getElementById("wynik").textContent = los;
        console.info(`user: ${los}`);
      }
    });
}
function funkcja()
{
    const stones=document.getElementsByName("game");
     
    for (const i in stones) {
      if(stones[i].checked) {
        document.getElementById("wynik").textContent = stones[i].value;
        console.info(`user: ${stones[i].value}`);
      }
    }
}

[ innerHTML ]  [ innerText ]  [ textContent ]
How to create an array in JavaScript whose indexing starts at 1? ]

komentarz 21 lutego przez Kalindoreks Użytkownik (620 p.)
Dziękuje bardzo za pomoc faktycznie skróciło to kod. A mógłbyś/mogłabyś pomóc mi jeszcze w punktowaniu?? Dodałem to ale kompletnie się rozsypało. Jak mogę naliczyć punkty po tym jak ja wygram i po tym jak wygra bot. Pozdrawiam
komentarz 21 lutego przez Kalindoreks Użytkownik (620 p.)

@VBService, dobra jednak sam ogarnąłem i działa :). Zatem ostatnie pytanie przepraszam że męczę Cię. Wiesz może co zrobić aby zmienna zachowała swoją wartość po odświeżeniu strony?

1
komentarz 21 lutego przez VBService VIP (127,550 p.)
edycja 22 lutego przez VBService
A jak jest gra inicjowana? Tylko html i javascript (lokalnie)? Czy ze strony (np. z serwera z php)?
1
komentarz 22 lutego przez VBService VIP (127,550 p.)
edycja 22 lutego przez VBService

Moja propozycja gry, gdy użytkownik dokona wyboru radio button-a  wink

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
  <div>
    <label>
      <span class="fas fa-user"></span>
      <span class="points"></span>
      <input type="radio" name="game" value="1">
      <input type="radio" name="game" value="2">
      <input type="radio" name="game" value="3">
    </label>
    <label>
      <span class="fas fa-robot"></span>
      <span class="points"></span>
      <span class="robot-chose"></span>
    </label>
    <label>
      <!-- fa-smile fa-meh fa-frown -->
      <span class="far start"></span>
      <span class="who-is-winner start"></span>
    </label>
  </div>
</body>
* {
  box-sizing: border-box;
}
label {
  display: block;
  margin: 1em;
  user-select: none;
}
label input[type="radio"] {
  cursor: pointer;
}
label span {
  padding-right: 0.5em;
}
label span.fa-user {
  padding-left: 0.3em;
}
label span.points {
  font: 1em/1.05em monospace;
  width: 3em;
  text-align: center;
}
label span.far {
  font-size: 3em;
}
label span.who-is-winner {
  font: 3em monospace;
  font-variant: small-caps;
}
.start {
  color: transparent;
}
.won {
  color: green;
}
.draw {
  color: black;
}
.lost {
  color: red;
}

/* 
  loader 
  https://codepen.io/a-guerrero/pen/XbyPEj
*/
.loader {
  height: 0;
  width: 0;
  border: 0 solid gray;
  border-radius: 20%;
  -webkit-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@-webkit-keyframes loader-figure {
  0% {
    height: 0;
    width: 0;
    background-color: gray;
  }
  29% {
    background-color: gray;
  }
  30% {
    height: 1em;
    width: 2em;
    background-color: transparent;
    border-width: 0.2em;
    opacity: 1;
  }
  100% {
    height: 1em;
    width: 3em;
    border-width: 0;
    opacity: 0;
    background-color: transparent;
  }
}
@-moz-keyframes loader-figure {
  0% {
    height: 0;
    width: 0;
    background-color: gray;
  }
  29% {
    background-color: gray;
  }
  30% {
    height: 1em;
    width: 2em;
    background-color: transparent;
    border-width: 0.2em;
    opacity: 1;
  }
  100% {
    height: 1em;
    width: 3em;
    border-width: 0;
    opacity: 0;
    background-color: transparent;
  }
}
@keyframes loader-figure {
  0% {
    height: 0;
    width: 0;
    background-color: gray;
  }
  29% {
    background-color: gray;
  }
  30% {
    height: 1em;
    width: 2em;
    background-color: transparent;
    border-width: 0.2em;
    opacity: 1;
  }
  100% {
    height: 1em;
    width: 3em;
    border-width: 0;
    opacity: 0;
    background-color: transparent;
  }
}
const        array_game = [ null, 'kamień', 'papier', 'nożyczki' ];
const array_msg_verdict = [ null, 'Wygrałeś', 'Remis', 'Przegrałeś' ];
const array_css_verdict = [ null, 'won', 'draw', 'lost' ];
const array_winner_icon = [ null, 'fa-smile', 'fa-meh', 'fa-frown' ];

const radios_user_game = document.querySelectorAll('input[type="radio"]');
const span_robot_chose = document.querySelector('.robot-chose');
const      span_points = document.querySelectorAll('span.points');
const span_icon_winner = document.querySelector('.far');
const  span_msg_winner = document.querySelector('.who-is-winner');

window.onload = () => {  
  setPoints(0,0); setPoints(1,0); // user; robot

  radios_user_game.forEach((radio, index) => {
    radio.insertAdjacentHTML('beforeBegin', array_game[index+1]);

    radio.addEventListener('click', () => {
      if (radio.checked) {
        showResult(null); // clear
        const  user_chose = radio.value;
        const robot_chose = parseInt(Math.random()*3+1);

        // symulacja ze robot mysli ;-)
        span_robot_chose.innerHTML = '<span class="loader"></span>';        
        setTimeout(() => {
          span_robot_chose.textContent = array_game[robot_chose];        

          if (user_chose == robot_chose) {
            showResult(2); setPoints(0,1); setPoints(1,1);
          } else {
            if ((user_chose == 1 && robot_chose == 3) ||
                (user_chose == 2 && robot_chose == 1) ||
                (user_chose == 3 && robot_chose == 2)) {
              showResult(1); setPoints(0,1); // user wygrał  ;-)
            } else {
              showResult(3); setPoints(1,1); // robot wygrał :-(
            }
          }
          
        }, 1115) // 1.15s css load animation
        
      } // if (radio.checked)
    });
  });
}

function setPoints(i, p) {
  span_points[i].textContent = ((span_points[i].textContent * 1) + p);
}

function showResult(cmd) {
  switch (cmd) {
    case 1:
    case 2:
    case 3:  
      span_icon_winner.classList.add(array_winner_icon[cmd], array_css_verdict[cmd]);
       span_msg_winner.classList.add(array_css_verdict[cmd]);
       span_msg_winner.textContent = array_msg_verdict[cmd];      
      break;
    default: // clean
      span_icon_winner.classList.remove(array_winner_icon[1], array_winner_icon[2], array_winner_icon[3]);
      span_icon_winner.classList.remove(array_css_verdict[1], array_css_verdict[2], array_css_verdict[3]);
      
       span_msg_winner.classList.remove(array_css_verdict[1], array_css_verdict[2], array_css_verdict[3]);
       span_msg_winner.textContent = '';
  }
}

komentarz 22 lutego przez Kalindoreks Użytkownik (620 p.)

@VBService, zgadza się Tylko html i javascript któe umiejscowione są lokalnie bez żadnych serwerów php. Dziękuje pięknie za alternatywę :)

 

0 głosów
odpowiedź 21 lutego przez overcq Stary wyjadacz (13,350 p.)

Funkcję wygrana podpinasz jako obsługę zdarzenia onclick, więc jako argument otrzymuje obiekt zdarzenia, a nie los i losg. Potrzebujesz w funkcji wygrana odczytać los i losg z dokumentu odwrotnie do tego, jak to robisz zapisując w powyższych funkcjach. Albo możesz zdefiniować zmienne globalne los i losg zamiast lokalnych i czytać z nich odrazu.

komentarz 21 lutego przez Kalindoreks Użytkownik (620 p.)
Jak mogę zdefiniować zmienną globalną?
1
komentarz 21 lutego przez Paweł Nąckiewicz Nałogowiec (48,870 p.)
zdefiniować ja na samym początku zaraz za tagiem <script>
komentarz 21 lutego przez Kalindoreks Użytkownik (620 p.)
Dzięki bardzo za pomoc. Jakoś sobie poradziłem. Po prostu zamiast

var los=stones[i].value; napisałem los=stones[i].value; i tak samo w innych przypadkach. Teraz działa

Podobne pytania

0 głosów
1 odpowiedź 92 wizyt
pytanie zadane 1 maja 2020 w C i C++ przez tymek112 Użytkownik (910 p.)
0 głosów
2 odpowiedzi 84 wizyt
0 głosów
1 odpowiedź 97 wizyt
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

85,145 zapytań

133,948 odpowiedzi

296,959 komentarzy

56,261 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...