라라리라
2023.09.26 / Step 6 [DOM_숫자슬라이드게임2] - 코딩 60 일차 본문
<!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;
}
#center{
text-align: center;
}
table, tr, td{
border-collapse: collapse;
margin: auto;
}
td{
text-align: center;
border-radius: 15px;
border: 3px solid white;
width: 100px;
height: 100px;
background-color: coral;
color: white;
font-weight: bold;
font-size: 40px;
cursor: pointer;
}
</style>
<body onload="init()">
<div id="header"><h3>스피드게임2</h3></div>
<div id="center"><input type="button" onclick="setcountbtn()" value="startcount">
<input type="button" onclick="stopcountbtn()" value="stop"></div>
<div id="footer"></div>
<script>
let $center = document.querySelector(`#center`);
let $footer = document.querySelector(`#footer`);
let $tabel = document.createElement(`table`);
let $tr = document.createElement(`tr`);
let $td = document.createElement(`td`);
let hintList = [];
let $List = [];
let answer = [0, 0];
let size = 5;
let startcount = null;
function init(){
let num = 1;
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;
if(num == 9){
$td.style.backgroundColor = `white`
}
num++;
$td.addEventListener(`click`, c_event);
$temp.push($td);
$tr.append($td)
}
$List.push($temp);
$tabel.append($tr);
}
$center.append($tabel);
// setcount();
}
function setcount(){
hint();
let r = Math.floor(Math.random() * hintList.length);
let y = 0;
let x = 0;
for(let i = 0; i < size; i++){
for(let j = 0; j < size; j++){
if(hintList[r] == $List[i][j]){
y = i;
x = j;
break;
}
}
}
let temp = $List[y][x].innerText;
$List[y][x].innerText = size * size;
$List[y][x].style.backgroundColor ="white";
$List[answer[0]][answer[1]].innerText = temp;
$List[answer[0]][answer[1]].style.backgroundColor = `coral`;
}
function hint(){
hintList = [];
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) hintList.push($List[i - 1][j]);
if(0 <= i + 1 && i + 1 < size) hintList.push($List[i + 1][j]);
if(0 <= j - 1 && j - 1 < size) hintList.push($List[i][j - 1]);
if(0 <= j + 1 && j + 1 < size) hintList.push($List[i][j + 1]);
break;
}
}
}
let str = ``;
for(let i = 0; i <hintList.length; i++){
str += hintList[i].innerText
}
console.log(str)
}
function setcountbtn(){
if(startcount == null){
startcount = setInterval(setcount, 10);
}
}
function stopcountbtn(){
clearInterval(startcount);
startcount = null;
}
function c_event(){
let y = 0;
let x = 0;
for(let i = 0; i < size; i ++){
for(let j = 0; j < size; j++){
if(this == $List[i][j]){
y = i;
x = j;
break;
}
}
}
hint();
let check = false;
for(let i = 0; i < hintList.length; i++){
if($List[y][x] == hintList[i]){
check = true;
break;
}
}
if(check == true){
let temp = $List[y][x].innerText;
$List[y][x].innerText = size*size;
$List[y][x].style.backgroundColor = `white`
$List[answer[0]][answer[1]].innerText = temp;
$List[answer[0]][answer[1]].style.backgroundColor = `coral`
}
}
</script>
</body>
</html>
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.10.04 / Step 6 [DOM_회원가입] - 코딩 62 일차 (0) | 2023.10.04 |
|---|---|
| 2023.09.27 / Step 6 [DOM_숫자슬라이드게임3] - 코딩 61 일차 (0) | 2023.09.27 |
| 2023.09.22 / Step 6 [DOM_스피드게임3단계] - 코딩 58 일차 (0) | 2023.09.22 |
| 2023.09.21 / Step 6 [DOM_스피드게임2단계] - 코딩 57 일차 (0) | 2023.09.21 |
| 2023.09.20 / Step 6 [DOM_스피드게임1단계] - 코딩 56 일차 (0) | 2023.09.20 |