«Где ест уж» — логическая игра-головоломка на поле 3 х 3 клетки. В начале игры на поле, в клетках размещены буквы, составляющие текст, ГДЕ ЕСТ ЖУ. Цель игры: переставить местами буквы Ж и У. Напишем программу игры Где ест уж на JavaScript.
Создадим шаблон html документа.
<html>
<head>
<style>
</style>
<script>
</script>
</head>
<body>
<script>
</script>
</body>
</html>snake01.html
<html>
<head>
<style>
</style>
<script>
</script>
</head>
<body>
<div id=puzzle>
</div>
<script>
</script>
</body>
</html>snake02.html
<html>
<head>
<style>
</style>
<script>
</script>
</head>
<body>
<div id=puzzle>
<input type=button value='Г'>
<input type=button value='Д'>
<input type=button value='Е'>
<input type=button value='Е'>
<input type=button value='С'>
<input type=button value='Т'>
<input type=button value='Ж'>
<input type=button value='У'>
<input type=button value=' '>
</div>
<script>
</script>
</body>
</html>snake03.html
<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='Г'>
<input type=button value='Д'>
<input type=button value='Е'>
<input type=button value='Е'>
<input type=button value='С'>
<input type=button value='Т'>
<input type=button value='Ж'>
<input type=button value='У'>
<input type=button value=' '>
</div>
<script>
</script>
</body>
</html>snake04.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>
<input type=button value='Г'>
<input type=button value='Д'>
<input type=button value='Е'>
<input type=button value='Е'>
<input type=button value='С'>
<input type=button value='Т'>
<input type=button value='Ж'>
<input type=button value='У'>
<input type=button value=' '>
</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 = "Ж";
document.getElementById('puzzle').appendChild(btn);
}
</script>
</body>
</html>snake06.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 = ["Г", "Д", "Е", "Е", "С", "Т", "Ж", "У", " "];
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>snake07.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 = ["Г", "Д", "Е", "Е", "С", "Т", "Ж", "У", " "];
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>snake08.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 = ["Г", "Д", "Е", "Е", "С", "Т", "Ж", "У", " "];
btn = new Array(9);
function play(B){
n = btn.indexOf(B);
m = letter.indexOf(' ');
console.log(n, m)
}
</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>snake09.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 = ["Г", "Д", "Е", "Е", "С", "Т", "Ж", "У", " "];
btn = new Array(9);
function play(B){
n = btn.indexOf(B);
m = letter.indexOf(' ');
if (true){
btn[n].value = " ";
btn[m].value = letter[n];
letter[m] = letter[n];
letter[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>snake10.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 = ["Г", "Д", "Е", "Е", "С", "Т", "Ж", "У", " "];
btn = new Array(9);
function play(B){
n = btn.indexOf(B);
m = letter.indexOf(' ');
if ((n-m)**2 == 9 || ((m-n)**2 == 1 && (n-n%3)/3 == (m-m%3)/3)){
btn[n].value = " ";
btn[m].value = letter[n];
letter[m] = letter[n];
letter[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>snake11.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 = ["Г", "Д", "Е", "Е", "С", "Т", "Ж", "У", " "];
btn = new Array(9);
function play(B){
n = btn.indexOf(B);
m = letter.indexOf(' ');
if ((n-m)**2 == 9 || ((m-n)**2 == 1 && (n-n%3)/3 == (m-m%3)/3)){
btn[n].value = " ";
btn[m].value = letter[n];
letter[m] = letter[n];
letter[n] = " ";
if(letter.join("") == "ГДЕЕСТУЖ "){
setTimeout(() => {alert("ПОБЕДА!");}, 100);
}}
}
</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>snake12.html
