Напишем шаблон (заготовку) html страницы с использованием языка программирования JavaScript для логических игр c прямоугольным полем в виде таблицы. В качестве клеток на поле будем использовать кнопки (тег input, тип button).
Перечислим игры, для создания которых можно использовать такой шаблон:
- Шашки,
- Шахматы,
- Го,
- Уголки,
- Крестики нолики,
- Линии
- Пазлы - головоломки:
- Пятнашки,
- Где ест уж,
- Чайный сервиз,
- Flip-Flop,
- Тренировка памяти,
- Сапёр,
- Пег,
- Трубопровод...
Создадим шаблон 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
