Печать

Напишем шаблон (заготовку) html страницы с использованием языка программирования JavaScript для логических игр c прямоугольным полем в виде таблицы. В качестве клеток на поле будем использовать кнопки (тег input, тип button).

Перечислим игры, для создания которых можно использовать такой шаблон:

  1. Шашки, 
  2. Шахматы,
  3. Го, 
  4. Уголки, 
  5. Крестики нолики,
  6. Линии
  7. Пазлы - головоломки:
    1. Пятнашки, 
    2. Где ест уж
    3. Чайный сервиз,
  8. Flip-Flop, 
  9. Тренировка памяти
  10. Сапёр,
  11. Пег,
  12. Трубопровод...

Создадим шаблон html документа.

<html>
	<head>
		<style>
		</style>
		<script>
		</script>
	</head>
	<body>
		<script>
		</script>
	</body>
</html>

index01.html

В файле index01.html  весь html документ содержится в контейнере html. Контейнер html создан открывающим тегом <html> и закрывающим тегом </html>. 

В языке гопертекстовой разметки html прописные и строчные буквы равноценны. Соответственно, теги <html>, <Html> и <HTML> обозначают одно и тоже. Разделы html документа должны иметь вложенную структуру.

В контейнере html содержится (вложено) 2 дочерних контейнера head и body, которые, в свою очередь, так же, содержат дочерние контейнеры.

Контейнер head содержит контейнеры style и script. В style, в дальнейшем, будем размещать стили html элементов (CSS — каскаднные таблицы стилей), а в script — JavaScript код.

Контейнер body содержит контейнер script. Контейнер script будет находится перед закрывающим тегом body (<body>). В этом контейнере script разместим JavaScript код который будет выполняться после загрузки в браузер большей части html страницы. 

Здесь выражения html элементы, html контейнеры и html теги являются синонимами, но в контексте имеют различную окраску. Так контейнер — это html элемент в котором между открывающим и закрывающим тегом содержатся другие html элементы или контент (содержимое web страницы). Html элемент — это элемент html разметки страницы о котором в данном контексте идёт речь  вне зависимости от того содержит он в себе другие элементы или контент. Html тег это мнемоническое имя html элемента, заключённое в угловые скобки

<html>
	<head>
		<style>
		</style>
		<script>
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
		</script>
	</body>
</html>

index02.html

В файле index02.html html элемент div с идентификатом puzzle.

Обычно, элемент div — это контейнер в который могут быть вложены другие элементы или контент web страницы. 

<html>
	<head>
		<style>
		</style>
		<script>
		</script>
	</head>
	<body>
		<div id=puzzle>
			<input type=button value='0'>
			<input type=button value='1'>
			<input type=button value='2'>
			<input type=button value='3'>
			<input type=button value='4'>
			<input type=button value='5'>
			<input type=button value='6'>
			<input type=button value='7'>
			<input type=button value='8'>
		</div>
		<script>
		</script>
	</body>
</html>

index03.html

В файле index03.html, для примера, мы поместили в контейнер div с идентификатом puzzle html элементы input типа button в количестве 9 штук. В результате, на html странице  при просмотре в браузере мы видим 9 горизонтально расположенных, кнопок с буквами. 

Такое расположение кнопок для нашей цели не подходит. Поэтому, мы должны отредактировать таблицу стилей, расположенную в контейнере style. В ней мы зададим расположение кнопок в контейнере div и их внешний вид. 

<html>
	<head>
		<style>
   			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(3, 1fr);
				padding: 30vw;
				padding-top: 10px;
			}
		</style>
		<script>
		</script>
	</head>
	<body>
		<div id=puzzle>
			<input type=button value='0'>
			<input type=button value='1'>
			<input type=button value='2'>
			<input type=button value='3'>
			<input type=button value='4'>
			<input type=button value='5'>
			<input type=button value='6'>
			<input type=button value='7'>
			<input type=button value='8'>
		</div>
		<script>
		</script>
	</body>
</html>

index04.html

На html странице index04.html в контейнер style мы добавили стиль элемента с идентификатором puzzle. 

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(3, 1fr);
				padding: 30vw;
				padding-top: 10px;
			}
			input {
				width: 10vw;
				height: 10vw;
				margin: 1px;
				text-align: center;
				font-size: 5vw;
			}
		</style>
		<script>
		</script>
	</head>
	<body>
		<div id=puzzle>
			<input type=button value='0'>
			<input type=button value='1'>
			<input type=button value='2'>
			<input type=button value='3'>
			<input type=button value='4'>
			<input type=button value='5'>
			<input type=button value='6'>
			<input type=button value='7'>
			<input type=button value='8'>
		</div>
		<script>
		</script>
	</body>
</html>

snake05.html

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(3, 1fr);
				padding: 30vw;
				padding-top: 10px;
			}
			input {
				width: 10vw;
				height: 10vw;
				margin: 1px;
				text-align: center;
				font-size: 5vw;
			}
		</style>
		<script>
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<9; i++){
				btn = document.createElement("input");
				btn.type = "button";
				btn.value = i;
				document.getElementById('puzzle').appendChild(btn);
			}
		</script>
	</body>
</html>

index06.html

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(3, 1fr);
				padding: 30vw;
				padding-top: 10px;
			}
			input {
				width: 10vw;
				height: 10vw;
				margin: 1px;
				text-align: center;
				font-size: 5vw;
			}
		</style>
		<script>
			letter = Array.from("012345678");
			btn = new Array(9);
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<9; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = letter[i];
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

index07.html

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(3, 1fr);
				padding: 30vw;
				padding-top: 10px;
			}
			input {
				width: 10vw;
				height: 10vw;
				margin: 1px;
				text-align: center;
				font-size: 5vw;
			}
		</style>
		<script>
			letter = Array.from("012345678");
			btn = new Array(9);
			function play(B){
				console.log(B)
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<9; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = letter[i];
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

index08.html

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(3, 1fr);
				padding: 30vw;
				padding-top: 10px;
			}
			input {
				width: 10vw;
				height: 10vw;
				margin: 1px;
				text-align: center;
				font-size: 5vw;
			}
		</style>
		<script>
			letter = Array.from("012345678");
			btn = new Array(9);
			function play(B){
				n = btn.indexOf(B);
				console.log(n)
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<9; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = letter[i];
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

index09.html

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(3, 1fr);
				padding: 30vw;
				padding-top: 10px;
			}
			input {
				width: 10vw;
				height: 10vw;
				margin: 1px;
				text-align: center;
				font-size: 5vw;
			}
		</style>
		<script>
			letter = Array.from("012345678");
			letter.sort(()=>Math.random()-0.5)
			btn = new Array(9);
			function play(B){
				n = btn.indexOf(B);
				console.log(n)
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<9; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = letter[i];
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

index10.html

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(3, 1fr);
				padding: 30vw;
				padding-top: 10px;
			}
			input {
				width: 10vw;
				height: 10vw;
				margin: 1px;
				text-align: center;
				font-size: 5vw;
			}
		</style>
		<script>
			numberOfButtons = 9;
			letter = Array.from("012345678");
			letter.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				console.log(n)
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = letter[i];
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

index11.html

index12.html

Игры на GitHub