• 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().

VPS Starter Arubacloud
+2 głosów
415 wizyt
pytanie zadane 21 lutego 2021 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 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 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 2021 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 2021 przez VBService Ekspert (251,210 p.)
edycja 21 lutego 2021 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 2021 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 2021 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 2021 przez VBService Ekspert (251,210 p.)
edycja 22 lutego 2021 przez VBService
A jak jest gra inicjowana? Tylko html i javascript (lokalnie)? Czy ze strony (np. z serwera z php)?
1
komentarz 22 lutego 2021 przez VBService Ekspert (251,210 p.)
edycja 22 lutego 2021 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 2021 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 2021 przez overcq Pasjonat (21,540 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 2021 przez Kalindoreks Użytkownik (620 p.)
Jak mogę zdefiniować zmienną globalną?
2
komentarz 21 lutego 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
zdefiniować ja na samym początku zaraz za tagiem <script>
1
komentarz 21 lutego 2021 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

+1 głos
1 odpowiedź 708 wizyt
0 głosów
1 odpowiedź 278 wizyt
pytanie zadane 1 maja 2020 w C i C++ przez tymek112 Obywatel (1,530 p.)
0 głosów
2 odpowiedzi 126 wizyt

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...