라라리라

2023.09.22 / Step 6 [DOM_스피드게임3단계] - 코딩 58 일차 본문

코딩/2023 JavaScript DOM

2023.09.22 / Step 6 [DOM_스피드게임3단계] - 코딩 58 일차

헤실 2023. 9. 22. 17:35
<!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;
        margin: auto;
    }
    table, tr, td{
        text-align: center;
        margin: auto;
    }
    td{
        width: 50px;
        height: 50px;
        text-align: center;
        margin: auto;
        color: white;
        font-weight: bold;
        font-size: 20px;
        cursor: pointer;
        border-radius: 8px;
    }
    .Front{
        background-color: coral;
    }
    .Back{
        background-color: antiquewhite;
        color: black;
    }
    .Hint{
        background-color: lightgreen;
    }
</style>
<body>
    <div id="header"><h2>Speed Game</h2><span id="timeTd">0&nbsp;&nbsp;&nbsp;&nbsp;</span><input type="button" value="힌트" onclick="fn_hint()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="nextnum">1</span></div>
    <div id="center"></div>
    <div id="footer"></div>
</body>
<script>
    let $center = document.querySelector(`#center`);
    let $table = document.createElement(`table`);
    let $tr = document.createElement(`tr`);
    let $td = document.createElement(`td`);
    let $data = [];
    let front = [];
    let back = [];
    let count = 1;
    let time = 1;
    let size = 5;
    let next = 1;
    let myInterval = null;
    function init(){
        $timeTd = document.querySelector(`#timeTd`)
        $center = document.querySelector(`#center`);
        $table = document.createElement(`table`);
        $table.id = `speed`
        $nextnum = document.querySelector(`#nextnum`);
        $nextnum.innerHTML = next;
        $timeTd.innerHTML = `&nbsp;&nbsp;&nbsp;&nbsp;`
        for(let i = 0; i < size; i++){
            $tr = document.createElement(`tr`);
           
            let fronttemp = [];
            let backtemp = [];
            for(let j = 0; j < size; j++){
                $td = document.createElement(`td`);
                $td.setAttribute(`class`, `Front`);
                $td.addEventListener(`click`, check)
                fronttemp.push(count);
                backtemp.push(count + size*size);
                $tr.append($td);
                count++
            }
            front.push(fronttemp);
            back.push(backtemp);
            $table.append($tr);
        }
        $center.append($table);

        //셔플 구현 생각해보기
       /* for(let i = 0; i < 100; i++){
            let r1 = Math.floor(Math.random() * size);
            let r2 = Math.floor(Math.random() * size);
            let temp = front[2][2];
            front[2][2] = front[r1][r2];
            front[r1][r2] = temp;
            r1 = Math.floor(Math.random() * size);
            r2 = Math.floor(Math.random() * size);
            temp = back[2][2];
            back[2][2] = back[r1][r2];
            back[r1][r2] = temp;
        }*/

        for(let i = 0; i < size; i++){ //데이터배열에 프론트값 입력
            let $temp = [];
            for(let j = 0; j < size; j++){
                $temp.push(front[i][j])
            }
            $data.push($temp);
        }
        $table = document.querySelector(`#speed`)
        for(let i = 0; i < size; i++){ //테이블에 입힘
            for(let j = 0; j < size; j++){
            $table.children[i].children[j].innerText = $data[i][j]
            }
        }
    }
   
    function check(){
        $nextnum = document.querySelector(`#nextnum`);
       
        $table = document.querySelector(`#speed`)
        for(let i = 0; i < size; i++){
            for(let j = 0; j < size; j++){
                if(this.innerText == $data[i][j] && $data[i][j] == next){
                    if(next <= 25){
                        if(next == 1){myInterval = setInterval(fn_count, 1000)}
                        $data[i][j] = back[i][j];
                        $table.children[i].children[j].setAttribute(`class`, `Back`);
                        $table.children[i].children[j].innerText = back[i][j];                        
                    } else {
                        $data[i][j] = 0;
                        $table.children[i].children[j].removeAttribute(`class`, `Back`);
                        $table.children[i].children[j].innerText = "";
                        this.style.cursor = `default`
                    }
                    next++;
                    $nextnum.innerHTML = next;
                    fn_gameover();
                }
            }
        }
    }
    function fn_count(){
    timeTd = document.querySelector(`#timeTd`);
    timeTd.innerHTML = `${time}&nbsp;&nbsp;&nbsp;&nbsp;`
    time++;
    }
    function fn_hint(){
        $table = document.querySelector(`#speed`)
        for(let i = 0; i < size; i++){
            for(let j = 0; j < size; j++){
                if(next == $data[i][j]){
                $table.children[i].children[j].setAttribute(`class`, `Hint`)
                }
            }
        }
    }
    function fn_gameover(){
        if(next == 51){
            clearInterval(myInterval);
            alert(`게임클리어! 3초뒤 게임이 재시작됩니다.`)
            setTimeout(restart, 3000);
        }
    }
    function restart(){
        $center = document.querySelector(`#center`)
        $table = document.querySelector(`#speed`);
    $data = [];
    front = [];
    back = [];
    count = 1;
    time = 1;
    size = 5;
    next = 1;
    myInterval = null;    
    $table.remove();
    init();
    }
init();

</script>
</html>
저작자표시

'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글

2023.09.27 / Step 6 [DOM_숫자슬라이드게임3] - 코딩 61 일차  (0) 2023.09.27
2023.09.26 / Step 6 [DOM_숫자슬라이드게임2] - 코딩 60 일차  (0) 2023.09.26
2023.09.21 / Step 6 [DOM_스피드게임2단계] - 코딩 57 일차  (0) 2023.09.21
2023.09.20 / Step 6 [DOM_스피드게임1단계] - 코딩 56 일차  (0) 2023.09.20
2023.09.19 / Step 6 [DOM_틱택토2단계] - 코딩 55 일차  (0) 2023.09.19
'코딩/2023 JavaScript DOM' Related Articles more