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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

а ну да )

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

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

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

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

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

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

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

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

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

Ок, можете что-то дать по моей игре-тесту такое, чтобы это пригодилось для работы потом? Ну скажем может дополнить игру какими-то функциями..

Я поэтому и хотел емейл в файл записывать, а отображать данные просто для красоты.
По localStorage я буду гуглить

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

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>

:-?

Благодарю!

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

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

Ок. Буду делать. Только меня смущает, что я буду на чистом 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,
Добавление и удаление узлов

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

webxmm,
мне сложно понять логику вашего кода.
может просто добавить css

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

  </style>

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

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

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

<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. Я хочу для второго вопроса вывести картинки из второго массива, но как мне сделать это, если цикл внутри функции?