반응형
- _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);}
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;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");//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");
}
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);}
}
- 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"
export class SceneStage01 {start() {document.addEventListener("click", this.mouseClickEvent);//클릭이벤트 넣어놓고this.stage01bg = new UnitStage01BG();//배경하나를 new를 하고this.stage01bg.start();//스타트를 했다.}//그다음 업데이트하고 드로우 하고update() {this.stage01bg.update();}
draw() {this.stage01bg.draw();}
mouseClickEvent = (e) => {}
}
- 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
- 배경화면을 2개를 이어 붙인거다.
- 배경이 1번이 다 가면 다시 뒤로 붙이는거다.
import { ManagerImage } from "./managerImage.js";
export class UnitStage01BG{
start(){
this.imageBg = ManagerImage.getInstance().getImage("스테이지01_파란배경");
//파란배경 가져오기
this.imageCloud = [
//구름 4개 가져오기
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_애니메이션 => 06단계_스테이지_UI (1) | 2025.06.13 |
| E02_애니메이션 => 04단계_셀렉트완성 (1) | 2025.06.13 |
| E02_애니메이션 => 03단계_로비완성 (0) | 2025.06.13 |
| E02_애니메이션 => 02단계_페이지이동 (0) | 2025.06.13 |