Проблема:
- Не могу реализовать при нажатии на клавишу "Угадать" обработку значений, введенных игроками в поля ввода .
1.2. JS-скрипт обрабатывает только первое поле ввода, единственный раз выдает ответ и далее скрипт замирает.
Что я хочу сделать (новичок, не знаю - как дальше):
- Нажатие на клавишу "Угадать" должно передать сразу два ответа в функцию на обработку.
- JS-скрпит должен обработать эти два ответа
- По каждому игроку ожидается ответ (возможно через .innerHTML) о результате попытки игрока (типа "не верно", "Игрок № ... угадал")
- Общее кол-во попыток угадать = 4
Суть: Игра на 2 персоны, надо одному из игроков угадать загаданную компьютером рандомную цифру.
Внешнее оформление: Html+CSS. 2 поля ввода (input) для каждого игрока и одна кнопка "Угадать" (onClick = "...")
var vopros = parseInt(Math.random() * 10);
var igrok1 = '№1';
var igrok2 = '№2';
let otvet1, otvet2;
//забираю ответ из полей ввода
//вызов ф-ции от нажатия клавиши "Угадать"
function game(otvet, gamer) {
for (let i = 1; i <= 1; i++) {
function zaborOtveta(otvet) {
if (igrok1) {
otvet1 = +document.getElementById("otvet1").value;
return otvet1;
} else if (igrok2) {
otvet2 = +document.getElementById("otvet2").value;
return otvet2;
}
}
//otvet = prompt("Выход клавиша q. Угадай число от 0 до 10. Ход игрока : " + gamer);
otvet = zaborOtveta(otvet);
if (otvet == "q" || otvet == 'esc' || otvet == null) {
return false;
}
otvet = +otvet;
if (otvet == vopros) {
alert("Число угадал игрок " + gamer);
return false;
} else if (otvet > vopros) {
alert("Чет-то много");
} else if (otvet < vopros) {
alert("Слишком мало");
}
} //for():end
return true;
} //function (): end
let n = 0;
while (n < 4) {
//искусственно ограничил кол-во попыток, чтоб не было бесконечного цикла
n++
if (!game(otvet1, igrok1))
break;
n++
if (!game(otvet2, igrok2))
break;
} //while ( ): end
alert("Было загадано:" + vopros);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
* {
margin: 0;
padding: 0;
}
body {
background-color: #DA3725;
font-family: 'Roboto', sans-serif;
}
.header {
min-width: 1300px;
border-bottom: 1px solid #b5b7ba;
background-color: #F8F000;
margin: 0 auto;
height: 50px;
text-align: center;
padding-top: 18px;
}
.header .selected {
color: #000;
}
.center {
width: 1300px;
margin: 0 auto;
}
.header a {
color: #F90505;
font-size: 25px;
font-weight: 300;
text-align: left;
text-decoration: none;
height: 30px;
line-height: 30px;
display: inline-block;
padding-right: 40px;
}
.header span {
padding: 0 38px;
}
.content {
min-width: 1300px;
margin: 0 auto;
min-height: calc(100vh - 140px);
}
.content h1 {
width: 100%;
float: left;
text-align: center;
color: #2e353d;
font-size: 40px;
font-weight: 300;
margin-top: 63px;
margin-bottom: 75px;
}
.content h3 {
color: #242424;
font-size: 35px;
font-weight: 300;
text-align: left;
margin-left: 41px;
margin-bottom: 52px;
}
.content h5 {
color: #242424;
font-size: 24px;
text-align: left;
}
.content img {
margin-left: 17px;
width: 389px;
border-radius: 50%;
}
.content .box_text {
width: 671px;
background-color: #ffffff;
float: right;
padding: 49px 48px 51px 76px;
margin-bottom: 100px;
border-radius: 25px;
}
.content .box_text p {
color: #242424;
font-size: 24px;
font-weight: 100;
text-align: left;
margin-bottom: 31px;
}
.content .box_text a {
color: #40678a;
font-size: 24px;
font-weight: 100;
text-align: center;
text-decoration: none;
padding-right: 30px;
}
.content .media {
margin-right: 0;
}
.content .box {
background-color: #A4A9A0;
width: 800px;
min-height: 500px;
margin: 50px auto 50px auto;
padding-top: 37px;
padding-left: 38px;
padding-bottom: 100px;
border-radius: 25px;
}
.content .box p {
color: #242424;
font-size: 24px;
font-weight: 100;
text-align: left;
margin-top: 37px;
margin-bottom: 30px;
}
.content .box input {
border: 1px solid #a0a0a0;
background-color: #f5f5f5;
width: 457px;
height: 34px;
padding: 0 20px;
font-size: 20px;
font-weight: 100;
margin-bottom: 12px;
}
.content .box a {
display: block;
float: left;
background-color: #8cbbd3;
color: #ffffff;
font-size: 24px;
font-weight: 300;
text-align: center;
text-decoration: none;
margin-top: 30px;
padding: 11px 51px;
}
.content .box a:hover {
background-color: #5ba1d3;
}
.footer {
/* # == id */
background-color: #434445;
min-width: 1300px;
/*float: left;*/
height: 140px;
text-align: center;
color: #a4a4a4;
font-size: 20px;
font-weight: 100;
line-height: 140px;
}
.footer a {
color: inherit;
}
#a,
#b {
font-weight: 400;
}
#otvet1,
#otvet2 {
border: 1px solid;
border-radius: 8px;
}
/*для Угадай-ка 2*/
.box_grid {
display: grid;
grid-template-columns: 300px 500px;
grid-template-rows: 100px 100px 85px;
align-content: center;
}
.box_grid #otvet1,
.box_grid #otvet2 {
grid-column-start: 2;
width: 150px;
margin-left: 25px;
}
.box_grid #a,
.box_grid #b {
font-weight: 400;
margin-top: 0px;
}
.box_grid .btn {
grid-column-start: 1;
grid-row-start: 3;
}
<div class="content">
<div class="header">
<a href="index.html">Главная</a>
<a href="puzzle.html">Загадки</a>
<a href="guess.html">Угадайка</a>
<a href="minmax_HidenText_v1.html">MinMax</a>
<a href="Ugadka2gamer_v1.html">УгадайКа-2</a>
</div>
<div class="contentWrap">
<div class="content">
<div class="center">
<h1>Игра "Угадай-ка (2 игрока)"</h1>
<div class="box box_grid">
<p id="a">Игрок №1 вводит число :</p>
<input type="text" id="otvet1">
<p id="b">Игрок №2 вводит число :</p>
<input type="text" id="otvet2">
<br>
<a href="#" onClick="game();" class="btn">Угадать</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
Copyright © #SamboRulit
</div>