카테고리 없음
2023.09.25 / Step 6 [DOM_숫자슬라이드게임1] - 코딩 59 일차
헤실
2023. 9. 25. 17:36
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#header{
text-align: center;
}
table, tr, td{
border-collapse: collapse;
margin: auto;
}
td{
border: 1px solid black;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
}
</style>
<body onload="init()">
<div id="header"><h3>숫자슬라이드복습</h3></div>
<div id="center"></div>
<div id="footer"></div>
<script>
let $center = document.querySelector(`#center`);
let $table = document.createElement(`table`)
let $tr = document.createElement(`tr`);
let $td = document.createElement(`td`);
let $List = [];
let answer = [0, 0];
let size = 3;
let $hint = [];
function init(){
let num = 1;
$table = document.createElement(`table`)
for(let i = 0; i < size; i++){
let $temp = [];
$tr = document.createElement(`tr`)
for(let j = 0; j < size; j++){
$td = document.createElement(`td`)
$td.innerText = num;
num++
$td.addEventListener(`click`, fn_click)
$temp.push($td);
$tr.append($td)
}
$List.push($temp);
$table.append($tr)
}
$center.append($table)
}
function fn_click(){
hint();
let x = 0;
let y = 0;
}
function hint(){
$hint = [];
for(let i = 0; i < size; i++){
for(let j = 0; j < size; j++){
if($List[i][j].innerText == size*size){
answer[0] = i;
answer[1] = j;
if(0 <= i - 1 && i - 1 < size) $hint.push($List[i - 1][j])
if(0 <= i + 1 && i + 1 < size) $hint.push($List[i + 1][j])
if(0 <= j - 1 && j - 1 < size) $hint.push($List[i][j - 1])
if(0 <= j + 1 && j + 1 < size) $hint.push($List[i][j + 1])
break;
}
}
}
}
</script>
</body>
</html>