반응형
- 실제로 게임을 만들려면 매니저를 관리하는 매니저를 또 만들어야 한다.
- _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");
this.setButton("일시정지_버튼" , "일시정지_버튼_on" , "일시정지_버튼_off");this.setButton("돌아가기_버튼" , "돌아가기_버튼_on" , "돌아가기_버튼_off");this.setButton("게임종료_버튼" , "게임종료_버튼_on" , "게임종료_버튼_off");}
setButton(buttonName, buttonOnImageName, buttonOffImageName) {this.buttonList[buttonName] = new NodeButton(buttonOnImageName, buttonOffImageName);}
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";import { ManagerUI} from "./managerUI.js";
export class ManagerGame {static instance = new ManagerGame();static getInstance() { return ManagerGame.instance; }
start(canavs, ctx) {this.canavs = canavs;this.ctx = ctx;ManagerImage.getInstance().start();ManagerScene.getInstance().start();ManagerButton.getInstance().start();ManagerPlayer.getInstance().start();ManagerText.getInstance().start();ManagerUI.getInstance().start();// ManagerScene.getInstance().changeScene("title");// ManagerScene.getInstance().changeScene("lobby");ManagerScene.getInstance().changeScene("select");//ManagerScene.getInstance().changeScene("stage01");}
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");
this.setImage("스테이지01_파란배경" , 1280, 720 , "../img/스테이지01/스테이지01_파란배경.jpg");this.setImage("스테이지01_왕실배경" , 1280, 720 , "../img/스테이지01/스테이지01_왕실배경.png");this.setImage("스테이지01_구름1" , 250, 110 , "../img/스테이지01/스테이지01_구름1.png");this.setImage("스테이지01_구름2" , 350, 150 , "../img/스테이지01/스테이지01_구름2.png");this.setImage("스테이지01_구름3" , 200, 100 , "../img/스테이지01/스테이지01_구름3.png");this.setImage("스테이지01_구름4" , 380, 200 , "../img/스테이지01/스테이지01_구름4.png");
this.setImage("판" , 662, 380 , "../img/유아이/판.png");this.setImage("일시정지_버튼_on" , 67, 62 , "../img/유아이/일시정지_버튼_on.png");this.setImage("일시정지_버튼_off" , 67, 68 , "../img/유아이/일시정지_버튼_off.png");this.setImage("게임종료_버튼_on" , 259, 97 , "../img/유아이/게임종료_버튼_on.png");this.setImage("게임종료_버튼_off" , 259, 97 , "../img/유아이/게임종료_버튼_off.png");this.setImage("돌아가기_버튼_on" , 259, 97 , "../img/유아이/돌아가기_버튼_on.png");this.setImage("돌아가기_버튼_off" , 259, 97 , "../img/유아이/돌아가기_버튼_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";import { SceneStage01 } from "./sceneStage01.js";export class ManagerScene {static instance = new ManagerScene();static getInstance() { return ManagerScene.instance; }
start() {this.sceneList = {};this.curScene = null;this.curSceneName = "";
this.setSceneList();}
setSceneList() {this.sceneList["title"] = new SceneTitle();this.sceneList["lobby"] = new SceneLobby();this.sceneList["select"] = new SceneSelect();this.sceneList["stage01"] = new SceneStage01();}
changeScene(sceneName) {if(this.curSceneName == sceneName) return;
this.curScene = this.sceneList[sceneName];if(this.curScene != null) {this.curSceneName = sceneName;this.sceneList[sceneName].start();}}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 verdanaif(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);}
}
- managerUI.js
import {ManagerButton} from "./managerButton.js"import {ManagerImage} from "./managerImage.js"import {ManagerText} from "./managerText.js"export class ManagerUI {static instance = new ManagerUI();static getInstance(){return this.instance;}
start(){this.imageBoard = ManagerImage.getInstance().getImage("판");this.buttonList = {"일시정지_버튼" : ManagerButton.getInstance().getButton("일시정지_버튼"),"돌아가기_버튼" : ManagerButton.getInstance().getButton("돌아가기_버튼"),"게임종료_버튼" : ManagerButton.getInstance().getButton("게임종료_버튼"),};this.buttonList["일시정지_버튼"].setButtonPosition(1190, 20);this.buttonList["돌아가기_버튼"].setButtonPosition(330, 500);this.buttonList["게임종료_버튼"].setButtonPosition(670, 500);}
getMouseOver(buttonName){return this.buttonList[buttonName].getMouseOver();}
drawPauseBoard(){this.imageBoard.nodeImageDraw(300, 100);this.buttonList["돌아가기_버튼"].nodeButtonDraw();this.buttonList["게임종료_버튼"].nodeButtonDraw();ManagerText.getInstance().drawText(480, 140, 80 , "brown" , "일시정지" , true);ManagerText.getInstance().drawText(355, 205, 40 , "blue" , "이동 : W A S D" , true);ManagerText.getInstance().drawText(355, 265, 40 , "blue" , "공격 : K" , true);ManagerText.getInstance().drawText(375, 565, 40 , "red" , "돌아가기" , true);ManagerText.getInstance().drawText(720, 565, 40 , "red" , "게임오버" , true);
}drawPauseButton(){this.buttonList["일시정지_버튼"].nodeButtonDraw();
}
}
- 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);
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);
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(this.buttonBack.getMouseOver()) {document.removeEventListener("click", this.mouseClickEvent);e.stopImmediatePropagation(); // 버튼이 한번만 눌리게 하는 역할
ManagerScene.getInstance().changeScene("lobby");}
if(this.buttonSelect01.getMouseOver()) {document.removeEventListener("click", this.mouseClickEvent);e.stopImmediatePropagation(); // 버튼이 한번만 눌리게 하는 역할
ManagerScene.getInstance().changeScene("stage01");}
if(this.buttonSelect02.getMouseOver()) {// 스테이지를 늘리고싶으면 계속 만든다.}
}
}
- sceneStage01.js
import { UnitStage01BG } from "./unitStage01BG.js"import { ManagerUI } from "./managerUI.js";import { ManagerScene } from "./managerScene.js";export class SceneStage01 {start() {document.addEventListener("click", this.mouseClickEvent);this.stage01bg = new UnitStage01BG();this.stage01bg.start();
this.gameStatus = "play"; //play // pause // lose // win}
update() {if(this.gameStatus == "pause"){return;}
this.stage01bg.update();}
draw() {this.stage01bg.draw();ManagerUI.getInstance().drawPauseButton();if(this.gameStatus == "pause"){ManagerUI.getInstance().drawPauseBoard();}}
mouseClickEvent = (event) => {if(ManagerUI.getInstance().getMouseOver("일시정지_버튼")){if(this.gameStatus == "play"){this.gameStatus = "pause";event.stopImmediatePropagation();}}else if(ManagerUI.getInstance().getMouseOver("돌아가기_버튼")){this.gameStatus = "play";event.stopImmediatePropagation();}else if(ManagerUI.getInstance().getMouseOver("게임종료_버튼")){ManagerScene.getInstance().changeScene("title");event.stopImmediatePropagation();}}
}
- 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");}}
}
- unitStage01BG.js
import { ManagerImage } from "./managerImage.js";export class UnitStage01BG{start(){this.imageBg = ManagerImage.getInstance().getImage("스테이지01_파란배경");this.imageCloud = [ManagerImage.getInstance().getImage("스테이지01_구름1"),ManagerImage.getInstance().getImage("스테이지01_구름2"),ManagerImage.getInstance().getImage("스테이지01_구름3"),ManagerImage.getInstance().getImage("스테이지01_구름4"),]this.cloudX = [0, 400, 1100, 1500];this.cloudY = [0, 70, 20, 80];this.cloudSpeed = 0.4;
this.imageHouse =[ManagerImage.getInstance().getImage("스테이지01_왕실배경"),ManagerImage.getInstance().getImage("스테이지01_왕실배경")];this.houseY = [0 , 0];this.houseX = [0 , 1280];this.houseSpeed = 1;}
update(){for(var i = 0; i < this.imageHouse.length; i++){this.houseX[i] -= this.houseSpeed;if(this.houseX[i] <= -1280){this.houseX[i] = 1280;}}
for(var i = 0; i < this.imageCloud.length; i++){this.cloudX[i] -= this.cloudSpeed;if(this.cloudX[i] <= -1280){this.cloudX[i] = 1280;}}}
draw(){
this.imageBg.nodeImageDraw(0,0);
for(var i = 0; i < this.imageCloud.length; i++){this.imageCloud[i].nodeImageDraw(this.cloudX[i], this.cloudY[i]);}
for(var i = 0; i < this.imageHouse.length; i++){this.imageHouse[i].nodeImageDraw(this.houseX[i], this.houseY[i]);}
}}
반응형
'코딩 > 1-JavaScript' 카테고리의 다른 글
| E02_애니메이션 => 12단계_유닛정렬과게임승리 (0) | 2025.06.16 |
|---|---|
| E02_애니메이션 => 05단계_스테이지_배경 (0) | 2025.06.13 |
| E02_애니메이션 => 04단계_셀렉트완성 (1) | 2025.06.13 |
| E02_애니메이션 => 03단계_로비완성 (0) | 2025.06.13 |
| E02_애니메이션 => 02단계_페이지이동 (0) | 2025.06.13 |