Решил поучить js, хочу написать мини игру

[webxmm]

Заходишь не сайт, у тебя форма регистрации . Заполнил Ее, тебя перекинуло на новую страницу и в таблице отобразились данные которые ты ввёл. Далее, сама игра(о ней позже)... но сейчас такой вопрос. Это все на чистом ja без php можно сделать? Проблема в том, что я не знаю можно ли как-то передать данные с одной страницы на другую при помощи js?

[laimas]

Заходишь не сайт, у тебя форма регистрации
Это все на чистом ja без php можно сделать?

И кто же будет регистрировать клиента, сам клиент? Ну так это не регистрация, а скорее дары в ней.

[webxmm]

И кто же будет регистрировать клиента, сам клиент? Ну так это не регистрация, а скорее дары в ней.


Что такое дары? То есть без
Пхп никак?

[laimas]

Что такое дары?

Это значит, что если регистрация, а значит и доступ определяется на стороне клиента, то это не регистрация, а комедия, толку от нее никакой.

Не обязательно РНР, серверный язык может быть и иным, но регистрацией и входом должен заниматься сервер, клиент только передает данные для регистрации/входа.

[webxmm]

webxmm, а для чего регистрация в игре?

Игра простая на логику, отгадывать слова в общем.. а регистрация, я просто хочу, чтобы человек если закончил игру на втором уровне, чтобы он потом зашел и продолжил со второго, чтобы сохранение было

[laimas]

webxmm,
так это не регистрацией называется.

[webxmm]

Первые степы моей игры ...

1. Форма на сайте (имя пользователя, имя, емейл,) и кнопка Продолжить - страница index.html
2. После регистрации тебя перекинуло на страницу game.html . Также, после регистрации введенный емейл сохраняется в текстовый файл (тут без php никак я так понимаю)
3. На странице game.html отображается
Привет, <username>. Выбери уровень 1 и нажми кнопку Играть

Снизу расположено 10 уровней (10 квадратов). Первый - доступный и на него можно нажать (остальные 9 как бы под замком).
Когда нажал на первый квадрат, то открывается как бы 10 вопросов.
(Далее смысл такой, что ты отвечаешь на первый вопрос, у тебя второй становится активным. Отвечаешь на второй, становится третий активный и так до десятого. Потом, когда закончишь первый уровень из 10 вопросов, можно перейти на второй). Смысл простой, я просто хочу JS научиться, решил на конкретных примерах.

И да, смыста такой, что я ответил на 4 вопроса скажем, в след раз зашел и хочу с этого же места продолжить игру.

Пару вопросов
1) Все ли из этого можно на JS сделать?
2) Поможете? Не в плане кода, а просто куда копать и тд.

... вот я хочу дойти хотя бы до этого степа, а потом уже дальше...

[laimas]

1, 2 - без сервера никак, и не важно РНР ли это или иной язык серверный. Можно конечно и в файл все писать, но это крайне неудобно, для таких целей лучше БД. Кроме того у вас неверное представление о регистрации и ее назначении, если только под регистрацией не подразумевать принимать от клиента все что угодно.

Собственно хранить состояние действий пользователя можно и на сервере, коли есть действительно регистрация, а значит и идентификация пользователя. Но можно и на клиенте.

А вот что касается самого сценария - "квадратики и пока...", то можно конечно все отдать клиенту, но в таком случае можно и "обойти правила". Поэтому, в зависимости от задачи разрешения на каждый этап должен давать сервер. То есть здесь потребуется и клиентский язык, и серверный.

Если же просто ради "учиться", то можно все на JS сделать, эмулируя на нем же и поведение сервера.

[ksa]

Когда нажал на первый квадрат, то открывается как бы 10 вопросов.
(Далее смысл такой, что ты отвечаешь на первый вопрос, у тебя второй становится активным. Отвечаешь на второй, становится третий активный и так до десятого. Потом, когда закончишь первый уровень из 10 вопросов, можно перейти на второй).
Отвечать на вопросы это тест, а не игра... :)

[webxmm]

1, 2 - без сервера никак, и не важно РНР ли это или иной язык серверный. Можно конечно и в файл все писать, но это крайне неудобно, для таких целей лучше БД. Кроме того у вас неверное представление о регистрации и ее назначении, если только под регистрацией не подразумевать принимать от клиента все что угодно.

Собственно хранить состояние действий пользователя можно и на сервере, коли есть действительно регистрация, а значит и идентификация пользователя. Но можно и на клиенте.

А вот что касается самого сценария - "квадратики и пока...", то можно конечно все отдать клиенту, но в таком случае можно и "обойти правила". Поэтому, в зависимости от задачи разрешения на каждый этап должен давать сервер. То есть здесь потребуется и клиентский язык, и серверный.

Если же просто ради "учиться", то можно все на JS сделать, эмулируя на нем же и поведение сервера.



Если же просто ради "учиться", то можно все на JS сделать, эмулируя на нем же и поведение сервера.

Ну вот я и не хочу серверный трогать.
Я думал начать так.
Сделать HTML форму. Ввожу данные.
Затем скрываю форму ставя ей display:none, а отображаю другой уже div (в котором отображаю введенные данные, типа ПривЕт username).
Так?
Только у меня вопрос, при перезагрузке странички у меня снова отобразится форма для ввода. Как-то можно сделать, чтобы остался на второй стадии (когда форма скрыта, а отображаются данные).

И второй вопрос, реально ли через JS записать в файл как-то емейл введенный? Ну или если не в файл, а где-то хранить

[webxmm]

Отвечать на вопросы это тест, а не игра... :)
а ну да )

[laimas]

Так?

Это смотря чему вы хотите научится. Если форма ради проформы, можно и так, но если учеба, это и знания как обрабатывается форма на клиенте (проверка ввода данных), то нет.

Хотя это в жизни нынешней и не пригодится, но не используя серверный язык, а только клиентский, можно с одной html страницы передать форму на другую страницу, на которой посредством JS получить данные этой формы, проверить их и сохранить на клиенте. Вот это уже ближе к "научится чему либо".

Другими словами - в качестве хранения используется локальное хранилище браузера (localStorage). Пользователь входит на сайт, на индексную страницу, JS сценарий которой проверяет - если в локальном хранилище зарегистрирован клиент, значит приветствие ему и предлагаем сыграть. При этом "сыграть", это может быть переход на саму страницу с игрой. Если же нет регистрации, то переход на страницу регистрации, где форма и сценарий ее проверки.

Ну и т.д., и т.п.

[webxmm]

Это смотря чему вы хотите научится. Если форма ради проформы, можно и так, но если учеба, это и знания как обрабатывается форма на клиенте (проверка ввода данных), то нет.

Хотя это в жизни нынешней и не пригодится, но не используя серверный язык, а только клиентский, можно с одной html страницы передать форму на другую страницу, на которой посредством JS получить данные этой формы, проверить их и сохранить на клиенте. Вот это уже ближе к "научится чему либо".

Другими словами - в качестве хранения используется локальное хранилище браузера (localStorage). Пользователь входит на сайт, на индексную страницу, JS сценарий которой проверяет - если в локальном хранилище зарегистрирован клиент, значит приветствие ему и предлагаем сыграть. При этом "сыграть", это может быть переход на саму страницу с игрой. Если же нет регистрации, то переход на страницу регистрации, где форма и сценарий ее проверки.

Ну и т.д., и т.п.
Скажу так.
Я реально хочу сделать такую игру-тест, интересно просто. При этом я бы хотел, чтобы во время написания я получил знания, которые желательно можно использовать в дальнейшем (front-end junior, для себя что-то писать). HTML/CSS знаю, но этого недостаточно.

То есть хотелось бы научится тому, что в реальной работе используется.

Попробую передать тогда с index.html на game.html (пока правда не знаю как это сделать) :)

[laimas]

Не цитируйте сообщения полностью, или вообще ничего не цитируйте, если нет необходимости.

Я реально хочу сделать такую игру-тест

Если цель front-end junior, то регистрация и "Привет, Вася", это не ваша забота, пишите только сам тест. Если же целью учебы является умение писать полностью веб приложение, то без знаний серверного языка не получится.

[webxmm]

Если цель front-end junior, то регистрация и "Привет, Вася", это не ваша забота, пишите только сам тест. Если же целью учебы является умение писать полностью веб приложение, то без знаний серверного языка не получится.
Ок, можете что-то дать по моей игре-тесту такое, чтобы это пригодилось для работы потом? Ну скажем может дополнить игру какими-то функциями..

[webxmm]

Зачем всё это? Можно конечно всю биографию пользователя сохранять ради сохранения) но обычно личные данные требуются не для самого пользователя, он ведь их итак знает) а для самого приложения (идентификация, рассылки, уведомления, ...) и других пользователей (информация, общение, переписка, ...). Как ты пишешь тебе нужно только сохранять состояние игры, это идентификация, localStorage дает идентификацию браузера, в таком случае достаточно "Продолжить" и "Начать заново" без всяких имен и тд, если нет нужды разделять пользователей одного браузера, если такие вообще могут быть.
Я поэтому и хотел емейл в файл записывать, а отображать данные просто для красоты.
По localStorage я буду гуглить

[webxmm]

Но пока я встрял вот на чем... я создал массив с картинками, пытаюсь распечатать его в див, но мне печатается только одна каринка... код..


var imageArray = new Array("img/x5.jpg", "img/site.jpg");
var i;
var text = "";
function getImgArr()
{

for(i = 0; i < imageArray.length; i++){

document.getElementById("container").innerHTML = "<img src='"+imageArray[i]+ "'>" + "<br/>";
}



}


<div id="container">
<input type="button" value="START" OnClick="getImgArr();"/>
</div>

[рони]

innerHTML += "<img src=
:-?

[webxmm]

:-?

Благодарю!

[webxmm]

webxmm, давай значит так, чтобы твоя красота не пропадала) добавляешь время, таблицу рейтинга имя-результат-время и уведомление на почту при опускании в рейтинге с предложением наказать негодяев)) вот это красиво, а не просто показывать пользователю его мыло на экране)

Ок. Только это на JS нельзя же реализовать :)
Таблица рейтинга - тут нужна база, чтоб сохранять и выводить (иначе где хранить). localStorage этот?

отправка на почту - тоже без серверного языка никак

[webxmm]

webxmm, да без сервера никак, но ты же хочешь научиться чему-то настоящему, ведь сайтов без сервера не бывает, и клиент-серверное взаимодействие основа основ.

Ок. Буду делать. Только меня смущает, что я буду на чистом php писать ( а сейчас актуальны фреймворки), хотя фреймворки и чистый php как небо и земля ...


for(i = 0; i < imageArray.length; i++){


document.getElementById("container").innerHTML += "<img src='"+imageArray[i] + "'>" + "<br/>";
document.getElementById("container").style.width = "200px";
document.getElementById("container").style.height = "200px";

}


Не получается выставить ширину и высоту картинок :(

[рони]

webxmm,
Добавление и удаление узлов (https://learn.javascript.ru/modifying-document)

[webxmm]

webxmm,
Добавление и удаление узлов (https://learn.javascript.ru/modifying-document)

Вы намекаете, что надо динамически создать узел IMAGE? Тогда почему у меня картинки распечатывалиь до этого? Я ведь сейчас хочу просто поменять размер им

[рони]

webxmm,
мне сложно понять логику вашего кода.
может просто добавить css
<style type="text/css"> #container img {
height: 200px;
width: 200px;
}

</style>

[laimas]

я буду на чистом php писать ( а сейчас актуальны фреймворки), хотя фреймворки и чистый php как небо и земля ...


Нет грязных фреймворков и чистых языков на которых и написаны их фреймворки.

[webxmm]

webxmm,
мне сложно понять логику вашего кода.
может просто добавить css
<style type="text/css"> #container img {
height: 200px;
width: 200px;
}

</style>

Спасибо, но я хотел путём яваскрипта сделать, в не цсс

[webxmm]

В общем я встрял, помогайте пожалуйста

<html>
<head>
<style type="text/css">
#container img {
height: 200px;
width: 200px;
}

</style>

</head>
<body>
<script type="text/javascript">

var answer1 = "ASDASD";

var imageArray = new Array("img/1.png", "img/2.png");
var imageArray2 = new Array("img/tmp.png", "img/tmp2.png");
var i;
var text = "";
var second=100;

// display images from array
function getImgArr()
{

for(i = 0; i < imageArray.length; i++){

document.getElementById("imgArr").innerHTML += "<img src='"+imageArray[i]+ "'>" + " ";

}


for(i = 0; i < imageArray2.length; i++){

//document.getElementById("container").innerHTML += "<img src='"+imageArray2[i]+ "'>" + " ";

}

document.getElementById("answer").style.display = "block";
document.getElementById("btnAnsw").style.display = "block";
document.getElementById("btnStart").disabled = true;
document.getElementById("gameinfo").innerHTML ="Game is starting...";


}

// timer
function tiktak()
{
if(second<=9){second="0" + second;}
if(document.getElementById){timer.innerHTML=second ;}
if(second==00){
alert("You are looser");
document.getElementById("btnStart").disabled = false;
document.getElementById("timer").innerHTML = " ";
document.getElementById("gameinfo").innerHTML ="Game over";
document.getElementById("container").innerHTML = " ";
second = 5;
return false;
}



second--;
setTimeout("tiktak()", 1000);

}
window.intervalID = setInterval(timer, 1000);


// get answer value from textbox
function getAnswerValue(){
var avalue = document.getElementById('answer').value;
var avalue2 = document.getElementById('answer2').value;
var avalue3 = document.getElementById('answer3').value;

if(avalue === "ASDASD"){
//alert(avalue);
document.getElementById("sucok1").style.display = "block";
document.getElementById("answer2").style.display = "block";
document.getElementById("imgArr").innerHTML = "";
document.getElementById("imgArr").innerHTML += "<img src='"+imageArray2[i]+ "'>" + " ";

if(avalue2 === "123"){
//alert(avalue2);
document.getElementById("sucok2").style.display = "block";
document.getElementById("answer3").style.display = "block";

if(avalue3 === "12345"){
document.getElementById("sucok3").style.display = "block";
document.getElementById("answer4").style.display = "block";
}
else {alert ("answer TWO wrong");}


}
else {alert ("answer TWO wrong");}


}else {alert ("answer ONE wrong");}


}




</script>



<html>
<head>
<style type="text/css">
#container img {
height: 200px;
width: 200px;
}

</style>

</head>
<body>

<input id="btnStart" type="button" value="START" OnClick="getImgArr(); tiktak();"/>
<br/>

<div id="gameinfo">

</div>

<span id="timer"></span>

<div id="container">
<div id="imgArr"></div>
<input type="text" id="answer" style="display:none;"><span style="display:none;" id="sucok1">Answ 1 is OK</span>
<input type="text" id="answer2" style="display:none;"><span style="display:none;" id="sucok2">Answ 2 is OK</span>
<input type="text" id="answer3" style="display:none;"><span style="display:none;" id="sucok3">Answ 3 is OK</span>
<input type="text" id="answer4" style="display:none;"><span style="display:none;" id="sucok4">Answ 4 is OK</span>
<input type="text" id="answer5" style="display:none;"><span style="display:none;" id="sucok5">Answ 5 is OK</span>

<input type="button" id="btnAnsw" style="display:none;" value="Answer" OnClick="getAnswerValue()" >
</div>

<div id="gameform">

</div>

</body>
</html>


1. Почему у меня направильно срабатывают else?
2. Я хочу для второго вопроса вывести картинки из второго массива, но как мне сделать это, если цикл внутри функции?