15puzzle이란?

  • 빈칸의 상하좌우에 있는 타일을 클릭하면 그 타일이 이동하여 퍼즐을 푸는 게임 입니다.
  • 1~15까지의 순서로 배열하는 게임 입니다.

제작 결과

(환경에따라 다르게 표시될 가능성이 있습니다.)

소스코드

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>15puzzle</title>
	<style type="text/css" media="screen">
		.tile {
			width: 70px;
			height: 70px;
			border: 1px solid blue;
			border-radius: 10px;
			text-align: center;
			font-size: 36px;
			background-color: white;
			box-shadow: rgb(128, 128, 128) 5px 5px;
		}	
	</style>
	<script>
		"use strict";

		//광역변수
		var tiles = [];

		//초기화 함수
		function init () {
			var table = document.getElementById("table")

			for (var i=0; i < 4; i++) {
				var tr = document.createElement("tr")

				for (var j = 0; j< 4; j ++) {
					var td = document.createElement("td")

					var index = i*4 + j;
					td.className = "tile";
					td.index = index;
					td.value = index;
					td.textContent = index == 0? "":index;
					td.onclick = click;
					tr.appendChild(td);
					tiles.push(td);
				}
				table.appendChild(tr);
			}

			for(var i=0; i<1000; i++) {
				click({
					srcElement: {
						index: Math.floor(Math.random()*16)
					}
				})
			}

			function click(e) {
				var i = e.srcElement.index;

				if (i-4 >= 0 &amp;&amp; tiles[i-4].value == 0) {
					swap(i, i-4);
				} else if (i+4 < 16 &amp;&amp; tiles[i+4].value == 0) {
					swap(i, i+4)
				} else if (i%4 != 0 &amp;&amp; tiles[i-1].value == 0) {
					swap(i, i-1)
				} else if (i%4 != 3 &amp;&amp; tiles[i+1].value == 0) {
					swap(i, i+1)
				}
			}

			function swap(i,j) {
				var tmp = tiles[i].value;

				tiles[i].textContent = tiles[j].textContent;
				tiles[i].value = tiles[j].value;
				tiles[j].textContent = tmp;
				tiles[j].value = tmp;
			}
		}
	</script>
</head>
<body onload="init()">
	<table id="table"></table>
</body>
</html>

소스코드 해설

  • 19열 – “use strict”를 기술해 두면 보다 엄밀하게 에러체크가 가능합니다. 잠재적인 버그를 경감하기 위해서라도 써두는것을 추천드립니다.
  • 25열-init()에서는 초기화를 행합니다
  • 26열-table요소에 대한 참조를 취득합니다.
  • 28열~29열- for문을 4번 반복함으로서 4행의 테이블을 작성할수 있습니다.
  • 31열~32열- for문을 4번 반족함으로서 열을 4개 작성할수 있습니다.
  • 40열- (31열~32열)에서 작성한 열을 (28열~29열)에서 작성한 행에 삽입합니다. 말하자면 4X4의 바둑판을 JavaScript로 부터 작성할 뿐 입니다.

value=0의 타일은 아무것도 그리지 않는 빈 타일입니다. 이번 강좌의 포인트는 index와 value프로퍼티의 추가방법 입니다.

index는 타일을 나열하는 순서이며、value는 타일에 그리는 수치입니다. 이 두개를 혼동하지 않도록 주의합시다.

이하는 테이블의 예 입니다.

index=0
value=3
표시 수치=3
index=1
value=10
표시 수치=10
index=2
value=7
표시 수치=7
index=3
value=1
표시 수치=1
index=4
value=6
표시 수치=6
index=5
value=11
표시 수치=11
index=6
value=2
표시 수치=2
index=7
value=0
표시 수치=빈공간
index=8
value=8
표시 수치=8
index=9
value=9
표시 수치=9
index=10
value=14
표시 수치=14
index=11
value=13
표시 수치=13
index=12
value=12
표시 수치=12
index=13
value=4
표시 수치=4
index=14
value=15
표시 수치=15
index=15
value=5
표시 수치=5
  • 54열- 타일을 클릭하면 click(e)이 호출됩니다. 그 타일의 상하좌우의 어느쪽이라도 빈공간(value프로 퍼티가 0인 타일)이 있을 경우, 그 타일의 value값을 바꿔치기 해야합니다. 그러기 위해서는, 클릭한 타일의 상하좌우의 타일에 빈공간이 있는지를 확인할 필요가 있습니다.
  • 55열-클릭한 타일의 index를 취득합니다. 따라서 위의 타일은 index-4, 아래의 타일은 index+4, 왼쪽의 타일은 index-1, 오른쪽 타일은 index+1로 구할수 있습니다.

단, 값을 비교할 때에는 약간 주의할 필요가 있습니다. 예를들어 최상단을 클릭할 경우, 그 위의 행과는 비교할수 없습니다. 반대로 최하단을 클릭할 경우, 그 아래의 행과는 비교할수 없습니다.

  • 57열~65열-이에대한 처리를 click(e) 안에서 행하고 있습니다.

예를들어, 위의 타일과 비교할때에는 아래와 같은 처리를 행합니다.

if(i-4 >= 0 &amp;&amp; tiles[i-4].value == 0) {
swap(i, i-4)
}

index-4가 0이하인지를 제일먼저 체크하고, 결과값이 true일 경우, 즉, 위의 타일이 존재하는 경우에 한하여「tiles[i-4].value」의 값이 0인지를 비교를 먼저 합니다.

4개의 if문은 상하좌우를 비교하고 있으므로 번갈아보며 비교해보면 의도를 쉽게 알수 있을것이라 생각합니다. 조건식이 성립한 경우에는 「swap(i,j)」을 불러내어 타일의 번호를 서로 교체합니다.

textContent(화면 표시용)과value(내부관리용)의 프로퍼티를 서로 혼동하여 바꾸지 않도록 주의하시기 바랍니다.

  • 46열~52열 -참고로, 이 열에서는 타일이 1000번 클릭 되는 상황을 재현한것입니다.

Web게임 개발

프로그래밍 메인