코딩/1-JavaScript

E02_애니메이션 => 04단계_셀렉트완성

tree0505 2025. 6. 13. 11:41
반응형

04단계_셀렉트완성


  • _index.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>_index.html</title>
        <script src="_main.js" type="module"></script>
    </head>
    <body>
        <canvas id="myCanvas" width="1280" height="720"></canvas>
    </body>
    </html>

  • _main.js
    import { ManagerGame } from "./managerGame.js";

    function draw() {
        ctx.clearRect(0, 0, $canvas.width, $canvas.height);

        ManagerGame.getInstance().update();
        ManagerGame.getInstance().draw();
    }

    //--------------------------------------------------------
    let $canvas = document.querySelector("#myCanvas");
    $canvas.style.border = "1px solid black";
    let ctx = $canvas.getContext("2d");

    ManagerGame.getInstance().start($canvas, ctx);

    setInterval(draw, 20);

  • managerButton.js
  • import { NodeButton } from "./nodeButton.js";

    export class ManagerButton {

        static instance = new ManagerButton();
        static getInstance() { return ManagerButton.instance; }

        start() {
            this.buttonList = {};
            this.setButtonList();
        }

        setButtonList() {
            this.setButton("타이틀_버튼_게임시작", "타이틀_버튼_게임시작_on", "타이틀_버튼_게임시작_off");

            this.setButton("로비_버튼_게임시작", "로비_버튼_게임시작_on", "로비_버튼_게임시작_off");
            this.setButton("로비_버튼_뒤로가기", "로비_버튼_뒤로가기_on", "로비_버튼_뒤로가기_off");
            this.setButton("로비_버튼_공격증가", "로비_버튼_공격증가_on", "로비_버튼_공격증가_off");
            this.setButton("로비_버튼_체력증가", "로비_버튼_체력증가_on", "로비_버튼_체력증가_off");
            this.setButton("로비_버튼_이속증가", "로비_버튼_이속증가_on", "로비_버튼_이속증가_off");

            this.setButton("셀렉트_버튼_뒤로가기", "셀렉트_버튼_뒤로가기_on", "셀렉트_버튼_뒤로가기_off");
            this.setButton("셀렉트_버튼_01", "셀렉트_버튼_01_on" , "셀렉트_버튼_01_off");
            this.setButton("셀렉트_버튼_02", "셀렉트_버튼_02_on" , "셀렉트_버튼_02_off");
            this.setButton("셀렉트_버튼_03", "셀렉트_버튼_03_on" , "셀렉트_버튼_03_off");
            this.setButton("셀렉트_버튼_04", "셀렉트_버튼_04_on" , "셀렉트_버튼_04_off");
            this.setButton("셀렉트_버튼_05", "셀렉트_버튼_05_on" , "셀렉트_버튼_05_off");
            this.setButton("셀렉트_버튼_06", "셀렉트_버튼_06_on" , "셀렉트_버튼_06_off");
            this.setButton("셀렉트_버튼_07", "셀렉트_버튼_07_on" , "셀렉트_버튼_07_off");
            this.setButton("셀렉트_버튼_08", "셀렉트_버튼_08_on" , "셀렉트_버튼_08_off");
            this.setButton("셀렉트_버튼_09", "셀렉트_버튼_09_on" , "셀렉트_버튼_09_off");
            this.setButton("셀렉트_버튼_10", "셀렉트_버튼_10_on" , "셀렉트_버튼_10_off");

        }

        setButton(buttonName, buttonOnImageName, buttonOffImageName) { //버튼세팅
            this.buttonList[buttonName] = new NodeButton(buttonOnImageName, buttonOffImageName);
            //NodeButton =>를 new를 한다.
        }

        getButton(buttonName) {
            return this.buttonList[buttonName];
        }

    }

  • managerGame.js
  • import { ManagerButton } from "./managerButton.js";
    import { ManagerImage } from "./managerImage.js";
    import { ManagerPlayer } from "./managerPlayer.js";
    import { ManagerScene } from "./managerScene.js";
    import { ManagerText } from "./managerText.js";

    export class ManagerGame {
       
        static instance = new ManagerGame();
        static getInstance() { return ManagerGame.instance; }

        start(canavs, ctx) {
            this.canavs = canavs;
            this.ctx = ctx;
            //위의 2개 저장
           
            ManagerImage.getInstance().start(); //이미지 매니저 세팅
            ManagerScene.getInstance().start(); //매니저 씬
            ManagerButton.getInstance().start(); //버튼
            ManagerPlayer.getInstance().start(); //메니저 플레이어
            ManagerText.getInstance().start(); //매니저 텍스트

            //--------------------------------------------------
            //여기서는 어디서부터 시작할껀지. 정하는것
            // ManagerScene.getInstance().changeScene("title");
            // ManagerScene.getInstance().changeScene("lobby");
            ManagerScene.getInstance().changeScene("select");
        }

        update() {
            ManagerScene.getInstance().update();
        }

        draw() {
            ManagerScene.getInstance().draw();
        }

        getCtx() {
            return this.ctx;
        }

    }

  • managerImage.js
  • import { NodeImage } from "./nodeImage.js";

    export class ManagerImage {
       
        static instance = new ManagerImage();
        static getInstance() { return ManagerImage.instance; }

        start() {
            this.imageList = {};
            this.setImageList();
        }

        setImageList() { //필요한 이미지 싹다 로딩
            this.setImage("타이틀_배경화면", 1280, 720, "../img/타이틀/타이틀_배경화면.png");
            this.setImage("타이틀_제목", 530, 240, "../img/타이틀/타이틀_제목.png");
            this.setImage("타이틀_버튼_게임시작_on", 200, 70, "../img/타이틀/타이틀_버튼_게임시작_on.png");
            this.setImage("타이틀_버튼_게임시작_off", 200, 70, "../img/타이틀/타이틀_버튼_게임시작_off.png");

            this.setImage("로비_배경화면", 1280, 720 , "../img/로비/로비_배경화면.jpg");
            this.setImage("로비_버튼_게임시작_on", 400, 140, "../img/로비/로비_버튼_게임시작_on.png");
            this.setImage("로비_버튼_게임시작_off", 400, 140, "../img/로비/로비_버튼_게임시작_off.png");
            this.setImage("로비_버튼_뒤로가기_on" , 40, 40, "../img/로비/로비_버튼_뒤로가기_on.png");
            this.setImage("로비_버튼_뒤로가기_off" , 40, 40, "../img/로비/로비_버튼_뒤로가기_off.png");
            this.setImage("로비_버튼_공격증가_on", 130, 130, "../img/로비/로비_버튼_공격증가_on.png");
            this.setImage("로비_버튼_공격증가_off", 130, 130, "../img/로비/로비_버튼_공격증가_off.png");
            this.setImage("로비_버튼_체력증가_on", 130, 130, "../img/로비/로비_버튼_체력증가_on.png");
            this.setImage("로비_버튼_체력증가_off", 130, 130, "../img/로비/로비_버튼_체력증가_off.png");
            this.setImage("로비_버튼_이속증가_on", 130, 130, "../img/로비/로비_버튼_이속증가_on.png");
            this.setImage("로비_버튼_이속증가_off", 130, 130, "../img/로비/로비_버튼_이속증가_off.png");        

            this.setImage("셀렉트_배경화면", 1280, 720, "../img/셀렉트/셀렉트_배경화면.png");
            this.setImage("셀렉트_버튼_뒤로가기_on", 40, 40, "../img/셀렉트/셀렉트_버튼_뒤로가기_on.png");
            this.setImage("셀렉트_버튼_뒤로가기_off", 40, 40, "../img/셀렉트/셀렉트_버튼_뒤로가기_off.png");

            this.setImage("셀렉트_버튼_01_on" , 100, 100 , "../img/셀렉트/셀렉트_버튼_01_on.png");
            this.setImage("셀렉트_버튼_01_off" , 100, 100 , "../img/셀렉트/셀렉트_버튼_01_off.png");
            this.setImage("셀렉트_버튼_02_on" , 100, 100 , "../img/셀렉트/셀렉트_버튼_02_on.png");
            this.setImage("셀렉트_버튼_02_off" , 100, 100 , "../img/셀렉트/셀렉트_버튼_02_off.png");
            this.setImage("셀렉트_버튼_03_on" , 100, 100 , "../img/셀렉트/셀렉트_버튼_03_on.png");
            this.setImage("셀렉트_버튼_03_off" , 100, 100 , "../img/셀렉트/셀렉트_버튼_03_off.png");
            this.setImage("셀렉트_버튼_04_on" , 100, 100 , "../img/셀렉트/셀렉트_버튼_04_on.png");
            this.setImage("셀렉트_버튼_04_off" , 100, 100 , "../img/셀렉트/셀렉트_버튼_04_off.png");
            this.setImage("셀렉트_버튼_05_on" , 100, 100 , "../img/셀렉트/셀렉트_버튼_05_on.png");
            this.setImage("셀렉트_버튼_05_off" , 100, 100 , "../img/셀렉트/셀렉트_버튼_05_off.png");
            this.setImage("셀렉트_버튼_06_on" , 100, 100 , "../img/셀렉트/셀렉트_버튼_06_on.png");
            this.setImage("셀렉트_버튼_06_off" , 100, 100 , "../img/셀렉트/셀렉트_버튼_06_off.png");
            this.setImage("셀렉트_버튼_07_on" , 100, 100 , "../img/셀렉트/셀렉트_버튼_07_on.png");
            this.setImage("셀렉트_버튼_07_off" , 100, 100 , "../img/셀렉트/셀렉트_버튼_07_off.png");
            this.setImage("셀렉트_버튼_08_on" , 100, 100 , "../img/셀렉트/셀렉트_버튼_08_on.png");
            this.setImage("셀렉트_버튼_08_off" , 100, 100 , "../img/셀렉트/셀렉트_버튼_08_off.png");
            this.setImage("셀렉트_버튼_09_on" , 100, 100 , "../img/셀렉트/셀렉트_버튼_09_on.png");
            this.setImage("셀렉트_버튼_09_off" , 100, 100 , "../img/셀렉트/셀렉트_버튼_09_off.png");      
            this.setImage("셀렉트_버튼_10_on" , 100, 100 , "../img/셀렉트/셀렉트_버튼_10_on.png");
            this.setImage("셀렉트_버튼_10_off" , 100, 100 , "../img/셀렉트/셀렉트_버튼_10_off.png");



        }

        setImage(imageName, width, height, imagePath) {
           this.imageList[imageName] = new NodeImage(width, height, imagePath);
        }

        getImage(imageName) { //가져올때.
            return this.imageList[imageName];
        }

    }

  • managerPlayer.js
  • export class ManagerPlayer {

        static instance = new ManagerPlayer();
        static getInstance() { return ManagerPlayer.instance; }

        start() {
            this.money = 10000;
            this.power = 10;
            this.hpMax = 100;
            this.speed = 1.0;
            this.player = null;
        }

        setMoney(money) { this.money = money; }
        setPower(power) { this.power = power; }
        setHpMax(hpMax) { this.hpMax = hpMax; }
        setSpeed(speed) { this.speed = speed; }

        getMoney() { return this.money; }
        getPower() { return this.power; }
        getHpMax() { return this.hpMax; }
        getSpeed() { return this.speed; }

    }

  • managerScene.js
  • import { SceneLobby } from "./sceneLobby.js";
    import { SceneSelect } from "./sceneSelect.js";
    import { SceneTitle } from "./sceneTitle.js";

    export class ManagerScene {
     
        static instance = new ManagerScene();
        static getInstance() { return ManagerScene.instance; }

        start() {
            this.sceneList = {};
            this.curScene = null;
            this.curSceneName = "";

            this.setSceneList();
        }

        setSceneList() { //현재 화면은 3개밖에 없다.
            //this.sceneList = {}; => 여기다가 3개 저장
            this.sceneList["title"] = new SceneTitle();
            this.sceneList["lobby"] = new SceneLobby();
            this.sceneList["select"] = new SceneSelect();
        }

        changeScene(sceneName) {
           
            if(this.curSceneName == sceneName) return;
            //씬이 똑같으면 취소. return

            this.curScene = this.sceneList[sceneName];
            //씬이 바뀌었으면 바꾸어 준다.
            if(this.curScene != null) {
                this.curSceneName = sceneName;
                this.sceneList[sceneName].start();
                //바꾼다음에 strat를 해준다.
            }
        }
     //-------------------------------------------------
     //업데이트와 드오루에서 씬을 계속 돌리는거다.
        update() {
            if(this.curScene != null) {
                this.curScene.update();
            }
        }

        draw() {
            if(this.curScene != null) {
                this.curScene.draw();
            }        
        }

    }

  • managerText.js
  • import { ManagerGame } from "./managerGame.js";

    export class ManagerText { //글자 쓸 수 있게 해놓은거

        static instance = new ManagerText();
        static getInstance() { return ManagerText.instance; }

        start() {
            // 색상조합 참고사이트
            this.sampleColor = {
                "black" :["#000000" , "#282A3A"] ,
                "white" : ["#FFFBF5" , "#F7EFE5"] ,
                "red" : ["#CD0404" , "#F2CD5C" ] ,
                "blue" : ["#0081C9" , "#5BC0F8"] ,
                "yellow" : ["#FFEA20" , "#8DCBE6"] ,
                "brown" : ["#562B08" , "#F2CD5C"] ,
                "green" : ["#1F8A70" , "#BFDB38"]  ,
                "pupple" : ["#A31ACB" , "#F2921D"] ,
                "gray" : ["#7B8FA1" , "#567189"]
            };
        }

        /*
            nodeText 를 만들어서 그려야하지만,
            사용하는 빈도가 낮아서 그냥 메니저에서 직접 그린다.

            만약 옵션을 추가로 사용하고 싶으면,
            구조를 변형해 작성하면 된다.
        */
        drawText(posX, posY, pixel, color, text, bold) {
            //이 함수를 쓰면 글자를 쓸 수 있게 하는것

            let colorArr = this.sampleColor[color];
            let font = pixel + "px verdana";    // 예) 15px verdana
           
            if(bold) {
                font = "bold " + font;          // 예) bold 15px verdana
            }

            let ctx = ManagerGame.getInstance().getCtx();
            ctx.font = font;
            ctx.lineWidth = 7;  // 글자 굵기

            ctx.strokeStyle = colorArr[0];
            ctx.strokeText(text, posX, posY);       // 글자 외과선 표시

            ctx.fillStyle = colorArr[1];
            ctx.fillText(text, posX, posY);
        }

    }

  • nodeButton.js
  • import { ManagerGame } from "./managerGame.js";
    import { ManagerImage } from "./managerImage.js"

    export class NodeButton {

        constructor(buttonOnImageName, buttonOffImageName) {
            //버튼 하나하나의 내용이다.
           
            this.buttonOnImage = ManagerImage.getInstance().getImage(buttonOnImageName);
            //노드버튼에서 이비지 가져오고 //이미지매니저에서 버튼이미지 가져오기
            this.buttonWidth = this.buttonOnImage.image.width;
            this.buttonHeight = this.buttonOnImage.image.height;
            //가로세로 세팅


            this.buttonOffImage = ManagerImage.getInstance().getImage(buttonOffImageName);
            //buttonOffImage =>이미지 가져오기

            this.mouseOver = false; //마우스 클릭. 올라왔는지 안올라왔는지

            document.addEventListener("mousemove", this.mouseOverEvent);
        }

        setButtonPosition(x, y) {
            this.xPos = x;
            this.yPos = y;
        }

        nodeButtonDraw() {
            if(this.mouseOver) {
                this.buttonOffImage.nodeImageDraw(this.xPos, this.yPos);
            } else {
                this.buttonOnImage.nodeImageDraw(this.xPos, this.yPos);
            }
            this.drawBox();
        }

        isPointInRect(pX, pY) {
            if(this.xPos < pX && pX < this.xPos + this.buttonWidth
                && this.yPos < pY && pY < this.yPos + this.buttonHeight) {
                    return true;
            }
            return false;
        }

        getMouseOver() {
            return this.mouseOver;
        }

        mouseOverEvent = (e) => { //마우스가 다았는지 안 다았느지
            let ctx = ManagerGame.getInstance().getCtx();
            let mX = e.clientX - ctx.canvas.offsetLeft;
            let mY = e.clientY - ctx.canvas.offsetTop;

            this.mouseOver = this.isPointInRect(mX, mY);
        }

        drawBox(){ //외각선
            let ctx = ManagerGame.getInstance().getCtx();
            ctx.beginPath () ;
            ctx.rect(this.xPos , this.yPos , this.buttonWidth , this.buttonHeight);
            ctx.fillStyle = "black";
            ctx.lineWidth = 1;
            ctx.strokeStyle =  "black";
            ctx.stroke();
            ctx.closePath () ;
        }

    }

  • nodeImage.js
  • import { ManagerGame } from "./managerGame.js";

    export class NodeImage {
       
        constructor(width, height, imagePath) {
            this.image = new Image();
            this.image.width = width;
            this.image.height = height;
            this.image.src = imagePath;
        }

        nodeImageDraw(x, y) {
            let ctx = ManagerGame.getInstance().getCtx();
            ctx.drawImage(this.image, x, y, this.image.width, this.image.height);
        }

    }

  • sceneLobby.js
  • import { ManagerButton } from "./managerButton.js";
    import { ManagerImage } from "./managerImage.js";
    import { ManagerScene } from "./managerScene.js";
    import { ManagerText } from "./managerText.js";
    import { ManagerPlayer } from "./managerPlayer.js";

    export class SceneLobby {
       
        start() {
            this.shopPower = 400;
            this.shopHp = 500;
            this.shopSpeed = 600;
            this.shopPowerPlus = 10;
            this.shopHpPlus = 30;
            this.shopSpeedPlus = 0.1;
           
            this.imageBackground = ManagerImage.getInstance().getImage("로비_배경화면");

            this.buttonStart = ManagerButton.getInstance().getButton("로비_버튼_게임시작");
            this.buttonStart.setButtonPosition(820, 480);

            this.buttonBack = ManagerButton.getInstance().getButton("로비_버튼_뒤로가기");
            this.buttonBack.setButtonPosition(1180, 30);

            this.buttonPower = ManagerButton.getInstance().getButton("로비_버튼_공격증가");
            this.buttonPower.setButtonPosition(548, 178);

            this.buttonHealth = ManagerButton.getInstance().getButton("로비_버튼_체력증가");
            this.buttonHealth.setButtonPosition(548, 350);

            this.buttonSpeed = ManagerButton.getInstance().getButton("로비_버튼_이속증가");
            this.buttonSpeed.setButtonPosition(548, 522);

            document.addEventListener("click", this.mouseClickEvent);
        }
       
        update() {}

        draw() {
            this.imageBackground.nodeImageDraw(0, 0);  

            this.buttonStart.nodeButtonDraw();
            this.buttonBack.nodeButtonDraw();
            this.buttonPower.nodeButtonDraw();
            this.buttonHealth.nodeButtonDraw();
            this.buttonSpeed.nodeButtonDraw();

            ManagerText.getInstance().drawText(690, 62, 40, "brown",  ManagerPlayer.getInstance().getMoney(), true);
            ManagerText.getInstance().drawText(170, 218, 30, "green",  this.shopPower, true);
            ManagerText.getInstance().drawText(170, 390, 30, "green",  this.shopHp, true);
            ManagerText.getInstance().drawText(170, 560, 30, "green",  this.shopSpeed, true);

            ManagerText.getInstance().drawText(340, 218, 27, "brown", "향상된 공격력", true);
            ManagerText.getInstance().drawText(560, 210, 23, "green", "+" + this.shopPowerPlus, true);
            ManagerText.getInstance().drawText(250, 288, 27, "red", "최대 공격력 " + ManagerPlayer.getInstance().getPower(), true);

            ManagerText.getInstance().drawText(340, 390, 27, "brown", "향상된 체력", true);
            ManagerText.getInstance().drawText(560, 382, 23, "green", "+" + this.shopHpPlus, true);
            ManagerText.getInstance().drawText(250, 460, 27, "red", "최대 체력 " + ManagerPlayer.getInstance().getHpMax(), true);

            ManagerText.getInstance().drawText(340, 560, 27, "brown", "향상된 속도", true);
            ManagerText.getInstance().drawText(560, 552, 23, "green", "+" + this.shopSpeedPlus, true);
            ManagerText.getInstance().drawText(250, 630, 27, "red", "최대 속도 " + ManagerPlayer.getInstance().getSpeed().toFixed(1), true);

        }

        mouseClickEvent = (e) => {
           
            if(this.buttonStart.getMouseOver()) {
                document.removeEventListener("click", this.mouseClickEvent);
                e.stopImmediatePropagation();
                ManagerScene.getInstance().changeScene("select");

            } else if(this.buttonBack.getMouseOver()) {
                document.removeEventListener("click", this.mouseClickEvent);
                e.stopImmediatePropagation();  
                ManagerScene.getInstance().changeScene("title");

            }  else if(this.buttonPower.getMouseOver()){
                if(ManagerPlayer.getInstance().getMoney() >= this.shopPower){
                    let money = ManagerPlayer.getInstance().getMoney() - this.shopPower;
                    ManagerPlayer.getInstance().setMoney(money);
                    let power = ManagerPlayer.getInstance().getPower() + this.shopPowerPlus;
                    ManagerPlayer.getInstance().setPower(power);
                    e.stopImmediatePropagation();  
                }

            }else if(this.buttonHealth.getMouseOver()){
                if(ManagerPlayer.getInstance().getMoney() >= this.shopHp){
                    let money = ManagerPlayer.getInstance().getMoney() - this.shopHp;
                    ManagerPlayer.getInstance().setMoney(money);
                    let hp = ManagerPlayer.getInstance().getHpMax() + this.shopHpPlus;
                    ManagerPlayer.getInstance().setHpMax(hp);
                    e.stopImmediatePropagation();  
                }

            }else if(this.buttonSpeed.getMouseOver()){
                if(ManagerPlayer.getInstance().getMoney() >= this.shopSpeed){
                    let money = ManagerPlayer.getInstance().getMoney() - this.shopSpeed;
                    ManagerPlayer.getInstance().setMoney(money);
                    let speed = ManagerPlayer.getInstance().getSpeed() + this.shopSpeedPlus;
                    ManagerPlayer.getInstance().setSpeed(speed);
                    e.stopImmediatePropagation();  
                }
            }
        }
    }

  • sceneSelect.js
  • import { ManagerButton } from "./managerButton.js";
    import { ManagerImage } from "./managerImage.js";
    import { ManagerScene } from "./managerScene.js";

    export class SceneSelect {
       
        start() {
            this.imageBackground = ManagerImage.getInstance().getImage("셀렉트_배경화면");
            //배경화면

            this.buttonBack = ManagerButton.getInstance().getButton("셀렉트_버튼_뒤로가기");
            this.buttonBack.setButtonPosition(1180, 30);
            //버튼뒤로가기 화면

            //버튼 10개. 가져와서 다 저장한것
            //이건 버튼매니저에서 등록을 한것
            this.buttonSelect01 = ManagerButton.getInstance().getButton("셀렉트_버튼_01");      
            this.buttonSelect02 = ManagerButton.getInstance().getButton("셀렉트_버튼_02");
            this.buttonSelect03 = ManagerButton.getInstance().getButton("셀렉트_버튼_03");
            this.buttonSelect04 = ManagerButton.getInstance().getButton("셀렉트_버튼_04");
            this.buttonSelect05 = ManagerButton.getInstance().getButton("셀렉트_버튼_05");
            this.buttonSelect06 = ManagerButton.getInstance().getButton("셀렉트_버튼_06");
            this.buttonSelect07 = ManagerButton.getInstance().getButton("셀렉트_버튼_07");
            this.buttonSelect08 = ManagerButton.getInstance().getButton("셀렉트_버튼_08");
            this.buttonSelect09 = ManagerButton.getInstance().getButton("셀렉트_버튼_09");
            this.buttonSelect10 = ManagerButton.getInstance().getButton("셀렉트_버튼_10");    

            //버튼 위치 세팅
            this.buttonSelect01.setButtonPosition(300, 300);
            this.buttonSelect02.setButtonPosition(450, 300);
            this.buttonSelect03.setButtonPosition(600, 300);
            this.buttonSelect04.setButtonPosition(750, 300);
            this.buttonSelect05.setButtonPosition(900, 300);
            this.buttonSelect06.setButtonPosition(300, 500);
            this.buttonSelect07.setButtonPosition(450, 500);
            this.buttonSelect08.setButtonPosition(600, 500);
            this.buttonSelect09.setButtonPosition(750, 500);
            this.buttonSelect10.setButtonPosition(900, 500);


            document.addEventListener("click", this.mouseClickEvent);
            //클릭이벤트
        }
       
        update() {

        }

        draw() { //그린것
            this.imageBackground.nodeImageDraw(0, 0);

            this.buttonBack.nodeButtonDraw();
            this.buttonSelect01.nodeButtonDraw();
            this.buttonSelect02.nodeButtonDraw();
            this.buttonSelect03.nodeButtonDraw();
            this.buttonSelect04.nodeButtonDraw();
            this.buttonSelect05.nodeButtonDraw();
            this.buttonSelect06.nodeButtonDraw();
            this.buttonSelect07.nodeButtonDraw();
            this.buttonSelect08.nodeButtonDraw();
            this.buttonSelect09.nodeButtonDraw();
            this.buttonSelect10.nodeButtonDraw();


        }

        mouseClickEvent = (e) => {
            //if => 뒤로가기 버튼
            if(this.buttonBack.getMouseOver()) {
                document.removeEventListener("click", this.mouseClickEvent);
                e.stopImmediatePropagation();   // 버튼이 한번만 눌리게 하는 역할

                ManagerScene.getInstance().changeScene("lobby");
            }

            //if => 스테이지 버튼
            if(this.buttonSelect01.getMouseOver()) {
                document.removeEventListener("click", this.mouseClickEvent);
                e.stopImmediatePropagation();   // 버튼이 한번만 눌리게 하는 역할

                ManagerScene.getInstance().changeScene("stage01");
                //스테이지를 누르면 스테이지로 감
                //지금은 스테이지 1만 되어 있음
            }

            if(this.buttonSelect02.getMouseOver()) {
               
                // 스테이지를 늘리고싶으면 계속 만든다.
            }


        }

    }

  • sceneTitle.js
  • import { ManagerButton } from "./managerButton.js";
    import { ManagerImage } from "./managerImage.js";
    import { ManagerScene } from "./managerScene.js";

    export class SceneTitle {
       
        start() {
            this.imageBackground = ManagerImage.getInstance().getImage("타이틀_배경화면");
            this.imageTitle = ManagerImage.getInstance().getImage("타이틀_제목");
            this.buttonStart = ManagerButton.getInstance().getButton("타이틀_버튼_게임시작");
            this.buttonStart.setButtonPosition(540, 630);

            document.addEventListener("click", this.mouseClickEvent);
        }

        update() {}

        draw() {
            this.imageBackground.nodeImageDraw(0, 0);
            this.imageTitle.nodeImageDraw(400, 30);

            this.buttonStart.nodeButtonDraw();
        }

        mouseClickEvent = (e) => {
           
            if(this.buttonStart.getMouseOver()) {
                document.removeEventListener("click", this.mouseClickEvent);
                e.stopImmediatePropagation();   // 버튼이 한번만 눌리게 하는 역할

                ManagerScene.getInstance().changeScene("lobby");
            }
           
           
        }

    }

 

반응형