[JS 게임만들기] 랜덤배치하기.

https://ssocoit.tistory.com/251

[CSS] 부모 엘리먼트를 기준으로 position: absolute의 offset 주기

부모 엘리먼트가 relative이고, 

해당 요소가 absolute인 경우 부모엘리먼트 안에서 배치가 가능하다.

 

 

 

.playground {
  bottom: 0px;
  width: 100%;
  height: 60%;
  background: transparent;
  border: 3px solid black;
  bottom: 0px;
  position: relative;
}


.bug,
.carrot {
  position: absolute;
}

function gameset() {
    itemSet();

    let COUNT_START = 200; // seconds * hours
    let count = COUNT_START;
    let playing = false;

    playpause = document.querySelector('.start');


    playpause.onclick = function () {
        if (playing) {
            playing = false;
            console.log("Pause!");
            playpause.innerHTML = ` <i class="fa-solid fa-play"></i>`;
        } else if (!playing) {
            playing = true;
            console.log("Play!");
            playpause.innerHTML = `<i class="fa-solid fa-stop"></i>`;
        }

    }



    function countdown() {
        displayTime();
        if (count == 0) {
            playing = false;
            //게임오버
            gameover();
        } else if (playing) {
            setTimeout(countdown, 10);
            count--;
        } else {
            setTimeout(countdown, 10);
        }
    }
    countdown();

    function displayTime() {

        var sec = count;
        var mins = Math.floor(sec / 100);
        sec -= mins * (100);

        document.querySelector('.timer').innerHTML = LeadingZero(mins) + '\'' + LeadingZero(sec) + '\"';

    }

    function LeadingZero(Time) {
        return (Time < 10) ? "0" + Time : + Time;
    }

    const mainPage = document.querySelector('.main');
    function gameover() {
        mainPage.innerHTML = `
        
        <i class="fa-solid fa-rotate-right reset"></i>
        <p class="gameover">GAME OVER</p>
        `

        reset = document.querySelector('.reset');
        reset.onclick = function () {

            console.log("Reset Timer!");
            count = COUNT_START;
            mainPage.innerHTML = `
            <button class="start">
              <i class="fa-solid fa-play"></i>
            </button>
            <div class="timer">READY</div>
            <div class="counter">9</div>
            <section class="playground">
                <img src="/img/carrot.png" alt="carrot" class="carrot" />
                <img src="/img/bug.png" alt="bug" class="bug" />
            </section>
            `
            gameset();
        }

    }


}

gameset();

function itemSet() {
    const initCarrot = 9;
    let carrotId = 0;//uuid
    let bugId = initCarrot + 1;//carrot + 1 uuid

    //random 함수 954 318
    function randomBottom() {
        return Math.floor(Math.random() * 318);
    }
    function randomLeft() {
        return Math.floor(Math.random() * 954);
    }
    const playground = document.querySelector('.playground');


    function addCarrot() {
        for (let i = 0; i < initCarrot; i++) {
            const item = createCarrot();
            playground.appendChild(item);
        }
    }


    function createCarrot() {
        const carrot = document.createElement('img');
        carrot.setAttribute('class', 'carrot');
        carrot.setAttribute('src', '/img/carrot.png');
        carrot.setAttribute('data-id', carrotId);
        const bottom = randomBottom();
        const left = randomLeft(); //백틱 안에 function의 값은 들어갈 수 없음.
        carrot.setAttribute('style', `bottom: ${bottom}px; 
        left: ${left}px;`);

        // carrot.style.bottom = `${randomBottom}px;`;
        // carrot.style.left = `${randomLeft}px;`;

        carrotId++;
        return carrot;
    }

    function addBug() {
        const initBug = 9;
        for (let i = 0; i < initBug; i++) {
            const item = createBug();
            playground.appendChild(item);
        }
    }



    function createBug() {
        const bug = document.createElement('img');
        bug.setAttribute('src', '/img/bug.png');
        bug.setAttribute('class', 'bug');
        bug.setAttribute('data-id', bugId);
        const bottom = randomBottom();
        const left = randomLeft();
        bug.setAttribute('style', `bottom: ${bottom}px; 
        left: ${left}px;`);
        bugId++;
        return bug;
    }


    playground.addEventListener('click', event => {
        const id = event.target.dataset.id;
        if (id <= initCarrot) {
            console.log(`carrot no.${id}is deleted`);
            const toBeDeleted = document.querySelector(`.carrot[data-id="${id}"]`);
            toBeDeleted.remove();
            carrotCount--;
        } else if (id >= initBug) {
            console.log(`bug no.${id}is clicked`);
            gameover();
        }
    })

    addCarrot();
    addBug();

};

백틱 내부에서는 function()의  값을 불러올 수 없다는걸 이번에 알았다. 

function은 백틱 안에서 실행이 불가능하고, 외부에서 값만 넣어주어야 한다.

 

 

이제 각각 클릭하면 당근 카운트 혹은 게임오버가 실행되게 정의하면 끝.