728x90
반응형
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 미로 길을 배열로 만들기 var map = [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 2], [1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 1], [1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1], [1, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0, 1, 0, 1], [1, 0, 1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 1, 0, 1], [1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1], [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1], [1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1], [1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1], [1, 0, 0, 0, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1], [1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 0, 1], [1, 0, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1], [1, 3, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] ]; var tableX = map[0].length; var tableY = map.length; //테이블 만들기 function madeTable() { var str = ""; str += "<table border=1>"; // 1. table을 연다 for (var y = 0; y < tableY; y++) { //4. 만들 tr의 갯수만큼 for문을 작성한다 str += "<tr>"; // 2. tr을 연다 for (var x = 0; x < tableX; x++) { //3. 만들 td의 갯수만큼 for문을 작성한다 str += "<td width=40 height=40 id=y" + y + "x" + x + "></td>"; // 테이블 id 만들기 } str += "</tr>"; //5. tr를 닫는다 } str += "</table>"; // 6.table을 닫는다 return str; } //테이블 색칠하기 function changeColor(id, color) { document.getElementById(id).style.backgroundColor = color; } function copyArray() { for (var y = 0; y < tableY; y++) { for (var x = 0; x < tableX; x++) { switch (map[y][x]) { case 0: changeColor("y" + y + "x" + x, "white") break; case 1: changeColor("y" + y + "x" + x, "red") break; case 2: changeColor("y" + y + "x" + x, "yellow") break; case 3: document.getElementById("y" + y + "x" + x).innerHTML = "<img src='Kkobuk.jpg' width=35 height=35>"; break; } } } } //테이블 출력하기 window.onload = function () { document.getElementById("console").innerHTML = madeTable(); copyArray(); } var nowX = 1; // 현재 꼬부기가 위치한 좌표 var nowY = 13; //컨트롤 키 설정하기 (오른쪽 숫자패드로 움직이도록) function inputFunction(e) { switch (e) { case 56: //위쪽 switch (map[nowY - 1][nowX]) { //y축에서 -1을 한 위치가 벽인지 아닌지를 확인해야 한다. case 0: break; case 1: return; // 함수 종료 case 2: alert("축하합니다! 탈출에 성공했어요!") break; } document.getElementById("y" + nowY + "x" + nowX).innerHTML = ""; //지나친곳에서는 꼬부기를 지워야 함 nowY--; //앞으로 꼬부기가 이동할 곳. document.getElementById("y" + nowY + "x" + nowX).innerHTML = "<img src='Kkobuk.jpg' width=30 height=30>"; break; case 52: //왼쪽 switch (map[nowY][nowX - 1]) { case 0: break; case 1: return; case 2: alert("축하합니다! 탈출에 성공했어요!") break; } document.getElementById("y" + nowY + "x" + nowX).innerHTML = ""; nowX--; document.getElementById("y" + nowY + "x" + nowX).innerHTML = "<img src='Kkobuk.jpg' width=30 height=30>"; break; case 54: //오른쪽 switch (map[nowY][nowX + 1]) { case 0: break; case 1: return; case 2: alert("축하합니다! 탈출에 성공했어요!") break; } document.getElementById("y" + nowY + "x" + nowX).innerHTML = ""; nowX++; document.getElementById("y" + nowY + "x" + nowX).innerHTML = "<img src='Kkobuk.jpg' width=30 height=30>"; break; case 50: //아래쪽 switch (map[nowY + 1][nowX]) { case 0: break; case 1: return; case 2: alert("축하합니다! 탈출에 성공했어요!") break; } document.getElementById("y" + nowY + "x" + nowX).innerHTML = ""; nowY++; document.getElementById("y" + nowY + "x" + nowX).innerHTML = "<img src='Kkobuk.jpg' width=30 height=30>"; break; } } </script> </head> <body onkeypress="inputFunction(event.keyCode)"> <!--컨트롤 키 설정하는 이벤트--> <!--event는 내장객체 .을 붙이면 사용자가 누른 키값이 event의 매개변수로 실행된다--> <div id="console"></div> </body> </html> | cs |
728x90
반응형
