«Где ест уж» — логическая игра-головоломка на поле 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

Игра на GitHub