Cộng đồng Hỏi & Đáp của Inflearn

원래 코드는 클릭을 해야 캐릭터가 생성되지만, 그냥 페이지가 열렸을 때 자동으로 캐릭터가 생성되는 것을 원하시면 아래와 같이 페이지가 열릴 때 new Character()를 한번 호출하면서 xPos에 원하시는 위치를 지정해주시면 됩니다.

    // code..

    resizeHandler();

    // 이렇게 호출 해주세요
    // 브라우저 창 폭의 45%위치 정도로 잡았습니다
    new Character({
        xPos: 45,
        speed: Math.random() * 0.5 + 0.2
    });

})();

index.html에 캐릭터 코드를 살렸구요. 

wall3d.js

(function () {
    const stageElem = document.querySelector('.stage');
    const houseElem = document.querySelector('.house');
    const barElem = document.querySelector('.progress-bar');
    // const selectCharacterElem = document.querySelector('.select-character');
    const mousePos = { x: 0, y: 0 };
    let maxScrollValue;

    function resizeHandler() {
        maxScrollValue = document.body.offsetHeight - window.innerHeight;
    }

    window.addEventListener('scroll', function () {
        const scrollPer = pageYOffset / maxScrollValue;
        const zMove = scrollPer * 980 - 490;
        houseElem.style.transform = 'translateZ(' + zMove + 'vw)';

        // progress bar
        barElem.style.width = scrollPer * 100 + '%';
    });

    window.addEventListener('mousemove', function (e) {
        mousePos.x = -1 + (e.clientX / window.innerWidth) * 2;
        mousePos.y = 1 - (e.clientY / window.innerHeight) * 2;
        stageElem.style.transform = 'rotateX(' + (mousePos.y * 5) + 'deg) rotateY(' + (mousePos.x * 5) + 'deg)';
    });

    window.addEventListener('resize', resizeHandler);

    resizeHandler();

})();


character.js

(function () {
    const mainElem = document.querySelector('.character');

    init();

    function init() {

        let scrollState = false;
        let lastScrollTop = 0;
        let xPos = 0;
        let speed = 0.3;
        let runningState = false;
        let direction;
        let rafId;


        window.addEventListener('scroll', function () {

            clearTimeout(this.scrollState);

            if (!scrollState) {
                mainElem.classList.add('running');
            }

            scrollState = setTimeout(function () {
                scrollState = false;
                mainElem.classList.remove('running');
            }, 200);

            // 이전 스크롤 위치와 현재 스크롤 위치를 비교
            if (this.lastScrollTop > pageYOffset) {
                // 이전 스크롤 위치가 크다면: 스크롤 올림
                mainElem.setAttribute('data-direction', 'backward');
            } else {
                // 현재 스크롤 위치가 크다면: 스크롤 내림
                mainElem.setAttribute('data-direction', 'forward');
            }

            this.lastScrollTop = pageYOffset;
        });

        window.addEventListener('keydown', function (e) {


            if (runningState) return;

            if (e.keyCode == 37) {
                // 왼쪽
                this.direction = 'left';
                mainElem.setAttribute('data-direction', 'left');
                mainElem.classList.add('running');
                run(self);
                this.runningState = true;
            } else if (e.keyCode == 39) {
                // 오른쪽
                this.direction = 'right';
                mainElem.setAttribute('data-direction', 'right');
                mainElem.classList.add('running');
                run(self);
                this.runningState = true;
            }
        });

        window.addEventListener('keyup', function (e) {
            mainElem.classList.remove('running');
            cancelAnimationFrame(this.rafId);
            this.runningState = false;
        });
    }
    function run(self) {
        if (this.direction == 'left') {
            this.xPos -= this.speed;
        } else if (this.direction == 'right') {
            this.xPos += this.speed;
        }

        if (this.xPos < 2) {
            this.xPos = 2;
        }

        if (this.xPos > 88) {
            this.xPos = 88;
        }

        mainElem.style.left = this.xPos + '%';

        this.rafId = requestAnimationFrame(function () {
            run(self);
        });
    }

})();


이런 식으로 작업 해 보고 있는데.. 
제대로 하고 있는 건지 잘 모르겠습니다. ㅜㅜ
 

조금 더 디테일 하게 말씀 드리면 페이지 로드시 아래 가운데에 캐릭터가 있는 상태로 시작 하고 싶습니다. 헌데 생성자 함수로 되어있는 부분을 일반 함수로 변경하는 로직이 어떻게 되는지 잘 모르겠습니다 OTL