Игра flip-flop на JavaScript

ghcgfhj

fgjfghj

Для этой игры поле в клетку создадим по шаблону, разработанному в статье Игровое поле на JavaScript. В шаблоне изменим количество колонок и кнопок.

<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>

index1.html

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(4, 1fr);
				padding: 30vw;
				padding-top: 10px;
			}
			input {
				width: 10vw;
				height: 10vw;
				margin: 1px;
				text-align: center;
				font-size: 5vw;
			}
		</style>
		<script>
			numberOfButtons = 16;
			columns = 4;
			playGround = new Array(numberOfButtons);
			for(i=0; i<numberOfButtons; i+=2){
				playGround[i] = 0;
				playGround[i+1] = 1;
			}
			playGround.sort(()=>Math.random()-0.5);
			letter = Array.from(" @");
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				playGround[n] = playGround[n] ? 0 : 1;
				for(i=n%columns; i<numberOfButtons; i+=columns){
					playGround[i] = playGround[i] ? 0 : 1;
					btn[i].value = letter[playGround[i]];
				}
				for(i=n-n%columns; i<n-n%columns+columns; i++){
					playGround[i] = playGround[i] ? 0 : 1;
					btn[i].value = letter[playGround[i]];
				}
			}
		</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[playGround[i]];
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

index2.html

Ggg

Hyvh

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(4, 1fr);
				padding: 30vw;
				padding-top: 10px;
			}
			input {
				width: 6vw;
				height: 6vw;
				margin: 1px;
				text-align: center;
				font-size: 5vw;
				animation-duration: 5s;
				border-radius: 15px;
				border: 2px;
				border-color: grey;
				border-style: outset;
				padding: 1vw;
			}
		</style>
		<script>
			numberOfButtons = 16;
			columns = 4;
			playGround = new Array(numberOfButtons);
			for(i=0; i<numberOfButtons; i+=2){
				playGround[i] = 0;
				playGround[i+1] = 1;
			}
			playGround.sort(()=>Math.random()-0.5);
			letter = Array("steel.png","silver.png");
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				playGround[n] = playGround[n] ? 0 : 1;
				for(i=n%columns; i<numberOfButtons; i+=columns){
					playGround[i] = playGround[i] ? 0 : 1;
					btn[i].src = letter[playGround[i]];
				}
				for(i=n-n%columns; i<n-n%columns+columns; i++){
					playGround[i] = playGround[i] ? 0 : 1;
					btn[i].src = letter[playGround[i]];
				}
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "image";
				btn[i].src = letter[playGround[i]];
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

index3.html

JavaScript