코딩/1-JavaScript
E02_애니메이션 => 12단계_유닛정렬과게임승리
tree0505
2025. 6. 16. 10:38
반응형
- _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);
- managerAnimation.js
import { NodeAnimation} from "./nodeAnimation.js";export class ManagerAnimation {static instance = new ManagerAnimation();static getInstance(){return this.instance;}
start(){
// 애니메이션이름 : 딜레이타임,이미지1,이미지2,이미지3,이미지4...//사용할 애니메이션 다 넣어놓은것this.animationList = {"애니_영웅_걷기" : "10,영웅_걷기_r_01,영웅_걷기_r_02,영웅_걷기_r_03,영웅_걷기_r_04","애니_영웅_맞기" : "10,영웅_죽음_r_01,영웅_죽음_r_02", // 맞기는 따로 이미지없이 죽음의 1, 2를 사용."애니_영웅_죽음" : "15,영웅_죽음_r_01,영웅_죽음_r_02,영웅_죽음_r_03,영웅_죽음_r_04,영웅_죽음_r_05,영웅_죽음_r_05,영웅_죽음_r_05,영웅_죽음_r_05,영웅_죽음_r_05,영웅_죽음_r_05,영웅_죽음_r_05,영웅_죽음_r_05","애니_스킬_파이어" : "7,스킬_파이어_r_01,스킬_파이어_r_02,스킬_파이어_r_03,스킬_파이어_r_04,스킬_파이어_r_05","애니_사이클롭스_걷기": "10,사이클롭스_이동_l_01,사이클롭스_이동_l_02,사이클롭스_이동_l_03,사이클롭스_이동_l_04,사이클롭스_이동_l_05","애니_사이클롭스_맞기" : "10,사이클롭스_죽음_l_01","애니_사이클롭스_죽음" : "10,사이클롭스_죽음_l_01,사이클롭스_죽음_l_02,사이클롭스_죽음_l_03,사이클롭스_죽음_l_04,사이클롭스_죽음_l_04,사이클롭스_죽음_l_04,사이클롭스_죽음_l_04","애니_오크_걷기": "10,오크_이동_l_01,오크_이동_l_02,오크_이동_l_03,오크_이동_l_04,오크_이동_l_05,오크_이동_l_06,오크_이동_l_07,오크_이동_l_08,오크_이동_l_09,오크_이동_l_10,오크_이동_l_11","애니_오크_맞기" : "10,오크_죽음_l_01,오크_죽음_l_02","애니_오크_죽음" : "10,오크_죽음_l_01,오크_죽음_l_02,오크_죽음_l_03,오크_죽음_l_04,오크_죽음_l_05","애니_스킬_검" : "10,스킬_검_l_01,스킬_검_l_02,스킬_검_l_03",};}getNodeAnimation(animationName){let str = this.animationList[animationName];str = str.split(",");let nameList = [];for(let i = 1; i < str.length; i++){nameList.push(str[i]);}let delay = Number(str[0]);let nodeAnimation = new NodeAnimation(nameList , delay);//각각의 애니메이션은 NodeAnimation이거다.return nodeAnimation;}
}
- 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");this.setButton("게임승리_버튼" , "게임승리_버튼_on" , "게임승리_버튼_off");}
setButton(buttonName, buttonOnImageName, buttonOffImageName) {this.buttonList[buttonName] = new NodeButton(buttonOnImageName, buttonOffImageName);}
getButton(buttonName) {return this.buttonList[buttonName];}
}
- managerDamage.js
//한대 맞으면 임팩트 나오게export class ManagerDamage {static instance = new ManagerDamage();static getInstance(){return this.instance;}
start(){this.textDamageList = [];}update(){for(let i = 0; i < this.textDamageList.length; i++){if(this.textDamageList[i].dead == true){this.textDamageList.splice(i, 1);break;}
this.textDamageList[i].update();}}draw(){for(let i = 0; i < this.textDamageList.length; i++){if(this.textDamageList[i].dead == true){this.textDamageList.splice(i, 1);break;}
this.textDamageList[i].draw();}}addTextDamage(textDamage){this.textDamageList.push(textDamage);}}
- managerEnemy.js
import { UnitCyclops } from "./unitCyclops.js";import { ManagerPlayer } from "./managerPlayer.js";import { UnitOrc } from "./unitOrc.js";
export class ManagerEnemy {static instance = new ManagerEnemy();static getInstance(){return this.instance;}
start(){}
setEnemyInfo(enemyInfoList){this.timer = 0;this.enemyInfoList = enemyInfoList;this.enemyList = [];}
update(){this.spawnTimer();this.enemyListUpdate();this.collision();}
draw(){this.enemyListDraw();}
getEnemyAllDead(){return this.enemyInfoList.length == 0 && this.enemyList.length == 0;}
enemyListUpdate(){for(let i = 0; i < this.enemyList.length; i++){if(this.enemyList[i].status == "remove"){this.enemyList.splice(i , 1);break}this.enemyList[i].update();}}
collision(){let player = ManagerPlayer.getInstance().player;for(let j = 0; j < this.enemyList.length; j++){let enemy = this.enemyList[j];if(enemy.status == "dead" ){break;}if(enemy.status == "remove"){break;}if(player.status == "work"){let check = enemy.checkCollision(player);if(check){player.setDamaged(enemy.power);}}}}
enemyListDraw(){for(let i = 0; i < this.enemyList.length; i++){this.enemyList[i].draw();}}
spawnTimer(){this.timer += 1;
for(let i = 0; i < this.enemyInfoList.length; i++){let enemyInfo = this.enemyInfoList[i];if(this.timer >= enemyInfo.time){this.spawnMonster(enemyInfo.xPos , enemyInfo.yPos , enemyInfo.name);this.enemyInfoList.splice(i , 1);break;}}}
spawnMonster(xPos , yPos , name){if(name == "cyclops"){let monster = new UnitCyclops(xPos , yPos , 3, 100, 15);this.enemyList.push(monster);}if(name == "orc"){var monster = new UnitOrc(xPos, yPos , 2 , 300, 40);this.enemyList.push(monster);}}
getEnemyAllDead(){return this.enemyInfoList.length == 0 && this.enemyList.length == 0;}}
- 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";import { ManagerKey } from "./managerKey.js";import { ManagerAnimation } from "./managerAnimation.js";import { ManagerDamage } from "./managerDamage.js";
//매니저 게임이 총괄을 하는거다.export class ManagerGame {static instance = new ManagerGame();static getInstance() { return ManagerGame.instance; }
start(canavs, ctx) {this.canavs = canavs;this.ctx = ctx;//main은 더이상 쓰지 않기 위해서 저장ManagerImage.getInstance().start();ManagerScene.getInstance().start();ManagerButton.getInstance().start();ManagerPlayer.getInstance().start();ManagerText.getInstance().start();ManagerUI.getInstance().start();ManagerKey.getInstance().start();ManagerAnimation.getInstance().start();ManagerDamage.getInstance().start();//각종 매니저들을 로딩함//이것에 순서대로 페이지를 로딩?
ManagerScene.getInstance().changeScene("title");}//여기서 현재 씬이 계속 도는것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");
this.setImage("영웅_걷기_r_01" , 380, 425 , "../img/플레이어/영웅_걷기_r_01.png");this.setImage("영웅_걷기_r_02" , 380, 425 , "../img/플레이어/영웅_걷기_r_02.png");this.setImage("영웅_걷기_r_03" , 380, 425 , "../img/플레이어/영웅_걷기_r_03.png");this.setImage("영웅_걷기_r_04" , 380, 425 , "../img/플레이어/영웅_걷기_r_04.png");this.setImage("영웅_죽음_r_01" , 380, 425 , "../img/플레이어/영웅_죽음_r_01.png");this.setImage("영웅_죽음_r_02" , 380, 425 , "../img/플레이어/영웅_죽음_r_02.png");this.setImage("영웅_죽음_r_03" , 380, 425 , "../img/플레이어/영웅_죽음_r_03.png");this.setImage("영웅_죽음_r_04" , 380, 425 , "../img/플레이어/영웅_죽음_r_04.png");this.setImage("영웅_죽음_r_05" , 380, 425 , "../img/플레이어/영웅_죽음_r_05.png");
this.setImage("스킬_파이어_r_01" , 252, 78 , "../img/스킬/스킬_파이어_r_01.png");this.setImage("스킬_파이어_r_02" , 252, 78 , "../img/스킬/스킬_파이어_r_02.png");this.setImage("스킬_파이어_r_03" , 252, 78 , "../img/스킬/스킬_파이어_r_03.png");this.setImage("스킬_파이어_r_04" , 252, 78 , "../img/스킬/스킬_파이어_r_04.png");this.setImage("스킬_파이어_r_05" , 252, 78 , "../img/스킬/스킬_파이어_r_05.png");
this.setImage("사이클롭스_이동_l_01" , 270, 320 , "../img/사이클롭스/사이클롭스_이동_l_01.png");this.setImage("사이클롭스_이동_l_02" , 270, 320 , "../img/사이클롭스/사이클롭스_이동_l_02.png");this.setImage("사이클롭스_이동_l_03" , 270, 320 , "../img/사이클롭스/사이클롭스_이동_l_03.png");this.setImage("사이클롭스_이동_l_04" , 270, 320 , "../img/사이클롭스/사이클롭스_이동_l_04.png");this.setImage("사이클롭스_이동_l_05" , 270, 320 , "../img/사이클롭스/사이클롭스_이동_l_05.png");
this.setImage("사이클롭스_죽음_l_01" , 270, 320 , "../img/사이클롭스/사이클롭스_죽음_l_01.png");this.setImage("사이클롭스_죽음_l_02" , 270, 320 , "../img/사이클롭스/사이클롭스_죽음_l_02.png");this.setImage("사이클롭스_죽음_l_03" , 270, 320 , "../img/사이클롭스/사이클롭스_죽음_l_03.png");this.setImage("사이클롭스_죽음_l_04" , 270, 320 , "../img/사이클롭스/사이클롭스_죽음_l_04.png");this.setImage("오크_이동_l_01" , 480, 440 , "../img/오크/오크_이동_l_01.png");this.setImage("오크_이동_l_02" , 480, 440 , "../img/오크/오크_이동_l_02.png");this.setImage("오크_이동_l_03" , 480, 440 , "../img/오크/오크_이동_l_03.png");this.setImage("오크_이동_l_04" , 480, 440 , "../img/오크/오크_이동_l_04.png");this.setImage("오크_이동_l_05" , 480, 440 , "../img/오크/오크_이동_l_05.png");this.setImage("오크_이동_l_06" , 480, 440 , "../img/오크/오크_이동_l_06.png");this.setImage("오크_이동_l_07" , 480, 440 , "../img/오크/오크_이동_l_07.png");this.setImage("오크_이동_l_08" , 480, 440 , "../img/오크/오크_이동_l_08.png");this.setImage("오크_이동_l_09" , 480, 440 , "../img/오크/오크_이동_l_09.png");this.setImage("오크_이동_l_10" , 480, 440 , "../img/오크/오크_이동_l_10.png");this.setImage("오크_이동_l_11" , 480, 440 , "../img/오크/오크_이동_l_11.png");
this.setImage("오크_죽음_l_01" , 484, 444 , "../img/오크/오크_죽음_l_01.png");this.setImage("오크_죽음_l_02" , 484, 444 , "../img/오크/오크_죽음_l_02.png");this.setImage("오크_죽음_l_03" , 484, 444 , "../img/오크/오크_죽음_l_03.png");this.setImage("오크_죽음_l_04" , 484, 444 , "../img/오크/오크_죽음_l_04.png");this.setImage("오크_죽음_l_05" , 484, 444 , "../img/오크/오크_죽음_l_05.png");this.setImage("스킬_검_l_01" , 300, 300 , "../img/스킬/스킬_검_l_01.png");this.setImage("스킬_검_l_02" , 300, 300 , "../img/스킬/스킬_검_l_02.png");this.setImage("스킬_검_l_03" , 300, 300 , "../img/스킬/스킬_검_l_03.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];}
}
- managerKey.js
export class ManagerKey {static instance = new ManagerKey();static getInstance(){return this.instance;}
start(){this.keyStayList = {"KeyD" : false , "KeyA" : false , "KeyW" : false , "KeyS" : false };//계속 눌려야 하는것this.keyOnceList = {"KeyK" : "up" , "Digit1" : "up" , "Digit2" : "up"};//한번만 눌리는것document.addEventListener("keydown", (e) => {this.keyStayList[e.code] = true;if(this.keyOnceList[e.code] == "up"){this.keyOnceList[e.code] = "true";}
});
document.addEventListener("keyup", (e) => {this.keyStayList[e.code] = false;
if(this.keyOnceList[e.code] == "down"){this.keyOnceList[e.code] = "up";}});
}getKeyStay(key){return this.keyStayList[key];}
getKeyOnce(key){if(this.keyOnceList[key] == "true"){this.keyOnceList[key] = "down";return true;}else{return false;}}}
- managerPlayer.js
import { UnitPlayer} from "./unitPlayer.js";export class ManagerPlayer {
static instance = new ManagerPlayer();static getInstance() { return ManagerPlayer.instance; }
start() {this.money = 3000;this.power = 10;this.hpMax = 100;this.speed = 3.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; }
setPlayer(x , y){this.player = new UnitPlayer(x , y , this.speed , this.hpMax , this.power);//UnitPlayer을 만들어서 배치를 시킨다.}
update(){if(this.player != null){this.player.update();}}
draw(){if(this.player != null){this.player.draw();}}//게임이 끝났는지 안끝났는지.getLose(){if(this.player != null){if(this.player.status == "gameover"){return true;}}return false;}
}
- 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();}}
}
- managerSkill.js
import {ManagerEnemy} from "./managerEnemy.js"import {TextDamage} from "./textDamage.js"import { ManagerDamage } from "./managerDamage.js";import {ManagerPlayer} from "./managerPlayer.js"
//스킬 관련된것만 관리export class ManagerSkill {static instance = new ManagerSkill();static getInstance(){return this.instance;}
start(){this.fireSkillList = []; //fire은 주인공this.swordSkillList = []; //칼은 몬스터가 쓰는것}update(){this.fireSkillUpdate(); //firethis.swordSkillUpdate(); //칼this.collision();//this는 클래스가 가지고 있는것 . 클래스 자신}swordSkillUpdate(){for(var i = 0; i < this.swordSkillList.length; i++){if(this.swordSkillList[i].status == "dead"){this.swordSkillList.splice(i, 1);break;}
this.swordSkillList[i].update();}}fireSkillUpdate(){for(let i = 0; i < this.fireSkillList.length; i++){if(this.fireSkillList[i].status == "dead"){this.fireSkillList.splice(i, 1);break;}this.fireSkillList[i].update();}}collision(){
for(let i = 0; i < this.swordSkillList.length; i++){let swordSkill = this.swordSkillList[i];let player = ManagerPlayer.getInstance().player;if(player.status !="work"){continue;}let check = swordSkill.checkCollision(player);if(check){player.setDamaged(swordSkill.power);this.swordSkillList.splice(i, 1);return;}}
//----------------------------------------
//충돌했을때.for(let i = 0; i < this.fireSkillList.length; i++){let fireSkill = this.fireSkillList[i];let enemyList = ManagerEnemy.getInstance().enemyList;
for(let j = 0; j < enemyList.length; j++){let enemy = enemyList[j];if(enemy.status == "work"){let check = fireSkill.checkCollision(enemy);if(check){enemy.setDamaged(fireSkill.power);this.fireSkillList.splice(i, 1);// 데미지 이펙트let deadDistance = 30;let textDamage = new TextDamage(-fireSkill.power , fireSkill.xPos + 200 , fireSkill.yPos, 1 , deadDistance , 70);ManagerDamage.getInstance().addTextDamage(textDamage);
return;}}}}}
draw(){for(let i = 0; i < this.fireSkillList.length; i++){this.fireSkillList[i].draw();}for(let i = 0; i < this.swordSkillList.length; i++){this.swordSkillList[i].draw();}
}
addFireSkill(skill){this.fireSkillList.push(skill);}
getFireSkillList(){return this.fireSkillList;}addSwordSkill(skill){this.swordSkillList.push(skill);}
getSwordSkillList(){return this.swordSkillList;}
}
- managerSort.js
import { ManagerEnemy } from "./managerEnemy.js";import { ManagerPlayer } from "./managerPlayer.js";import { ManagerSkill } from "./managerSkill.js";
export class ManagerSort {static instance = new ManagerSort();static getInstance(){return this.instance;}
start(){}
getUnitList(){let sortList = [];let enemyList = ManagerEnemy.getInstance().enemyList;for (let i = 0; i < enemyList.length; i++ ){sortList.push( enemyList[i]);}let fireSkillList = ManagerSkill.getInstance().fireSkillList;for (let i = 0; i < fireSkillList.length; i++ ){sortList.push(fireSkillList[i]);}
let swordSkillList = ManagerSkill.getInstance().swordSkillList;for (let i = 0; i < swordSkillList.length; i++ ){sortList.push(swordSkillList[i]);}let player = ManagerPlayer.getInstance().player;sortList.push(player);
return sortList;
}
unitSortDraw(){let sortList = this.getUnitList();
sortList.sort(function (a, b) {if (a.zCol > b.zCol) {return 1;}else{return -1;}});
for(let i = 0; i < sortList.length; i++){if(sortList[i]){sortList[i].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("게임종료_버튼"),"게임승리_버튼" : ManagerButton.getInstance().getButton("게임승리_버튼"),};}
getMouseOver(buttonName){return this.buttonList[buttonName].getMouseOver();}
drawPauseBoard(){this.imageBoard.nodeImageDraw(300, 100);this.buttonList["돌아가기_버튼"].setButtonPosition(330, 500);this.buttonList["게임종료_버튼"].setButtonPosition(670, 500);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["일시정지_버튼"].setButtonPosition(1190, 20);this.buttonList["일시정지_버튼"].nodeButtonDraw();}
drawWInBoard(){this.imageBoard.nodeImageDraw(300, 100);this.buttonList["게임승리_버튼"].setButtonPosition(500, 500);this.buttonList["게임승리_버튼"].nodeButtonDraw();ManagerText.getInstance().drawText(480, 140, 80 , "brown" , "게임승리" , true);ManagerText.getInstance().drawText(365, 225, 40 , "blue" , "축하합니다. 승리하였습니다!" , true);ManagerText.getInstance().drawText(550, 565, 40 , "red" , "로비이동" , true);}drawGameoverBoard(){this.imageBoard.nodeImageDraw(300, 100);this.buttonList["게임종료_버튼"].setButtonPosition(500, 500);this.buttonList["게임종료_버튼"].nodeButtonDraw();ManagerText.getInstance().drawText(480, 140, 80 , "brown" , "게임오버" , true);ManagerText.getInstance().drawText(365, 225, 40 , "blue" , "다음기회에 다시 도전하세요!" , true);ManagerText.getInstance().drawText(550, 565, 40 , "red" , "게임오버" , true);}
}
- nodeAnimation.js
import {ManagerImage} from "./managerImage.js";
export class NodeAnimation{
constructor(imageNameList , frameDelay){this.animation = [];for(let i = 0; i < imageNameList.length; i++){let imageName = imageNameList[i];let imageNode = ManagerImage.getInstance().getImage(imageName);//이미지 다 가져와서this.animation.push(imageNode); //배열에 넣어놓은것}this.frameDelay = frameDelay;this.frameTime = 0;//프레임에 따라서 다음 이미지로 넘기는 것this.indexInit();
}
indexInit(){this.index = 0;this.frameTime = 0;}
// 연속에니메이션(걷기)// 루프 => 걷기playLoop(){this.frameTime += 1;if(this.frameTime >= this.frameDelay){this.frameTime = 0;this.index += 1;if(this.index >= this.animation.length){this.index = 0;}}}// 일회에니메이션(죽음)// 한번만 실행 => 죽음playOnce(){this.frameTime += 1;if(this.frameTime >= this.frameDelay){this.frameTime = 0;this.index += 1;}if(this.index >= this.animation.length){this.index = this.animation.length - 1; // 마지막 에니메이션고정return true; // 에니메이션이 끝났음을 알린다.}return false;}
draw(x, y){let nodeImage = this.animation[this.index];nodeImage.nodeImageDraw(x , y);}}
- 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";import { ManagerPlayer } from "./managerPlayer.js";import {ManagerSkill} from "./managerSkill.js"import {ManagerEnemy} from "./managerEnemy.js"import { ManagerDamage } from "./managerDamage.js";import { ManagerSort } from "./managerSort.js";
export class SceneStage01 {start() {document.addEventListener("click", this.mouseClickEvent);this.stage01bg = new UnitStage01BG(); //배경this.stage01bg.start();
this.gameStatus = "play"; //play // pause // lose // win//게임 상태
ManagerPlayer.getInstance().setPlayer(100, 100);//플레이어 세팅ManagerSkill.getInstance().start();//스킬 세팅
let enemyInfoList = [//적의 위치 . 시간 . 어떤 몬스터가 나올지.{ "time" : 200, "xPos" : 1300, "yPos" : 200 , "name" : "cyclops"},{ "time" : 300, "xPos" : 1300, "yPos" : 200 , "name" : "cyclops"},{ "time" : 400, "xPos" : 1300, "yPos" : 200 , "name" : "cyclops"},// { "time" : 600, "xPos" : 1300, "yPos" : 300 , "name" : "cyclops"},// { "time" : 700, "xPos" : 1300, "yPos" : 400 , "name" : "cyclops"},// { "time" : 800, "xPos" : 1300, "yPos" : 200 , "name" : "cyclops"},// { "time" : 900, "xPos" : 1300, "yPos" : 300 , "name" : "cyclops"},{ "time" : 600, "xPos" : 1300, "yPos" : 100 , "name" : "orc"},{ "time" : 640, "xPos" : 1350, "yPos" : 300 , "name" : "orc"},];ManagerEnemy.getInstance().setEnemyInfo(enemyInfoList);//몬스터 세팅}
update() {if(this.gameStatus == "pause"){return;}
if(this.gameStatus == "play"){this.gameStatusPlay();}
ManagerDamage.getInstance().update();
if(ManagerPlayer.getInstance().getLose()){this.gameStatus = "lose";}if(ManagerEnemy.getInstance().getEnemyAllDead()){this.gameStatus = "win";}
}
gameStatusPlay(){this.stage01bg.update();ManagerPlayer.getInstance().update();ManagerEnemy.getInstance().update();ManagerSkill.getInstance().update();}
draw() {this.stage01bg.draw();ManagerSort.getInstance().unitSortDraw();//ManagerSort => sort에서 가져와서 z축으로 정렬을 하고 그려야 한다./* //원근감이 사라진다.ManagerPlayer.getInstance().draw(); //플레이어를 먼저 그리고ManagerSkill.getInstance().draw();ManagerEnemy.getInstance().draw();*/
ManagerDamage.getInstance().draw();
ManagerUI.getInstance().drawPauseButton();
if(this.gameStatus == "pause"){ManagerUI.getInstance().drawPauseBoard();}
if(this.gameStatus == "lose"){ManagerUI.getInstance().drawGameoverBoard();}if(this.gameStatus == "win"){ManagerUI.getInstance().drawWInBoard();}
}
mouseClickEvent = (event) => {if(this.gameStatus == "play" && ManagerUI.getInstance().getMouseOver("일시정지_버튼")){this.gameStatus = "pause";event.stopImmediatePropagation();}else if(this.gameStatus == "pause" && ManagerUI.getInstance().getMouseOver("돌아가기_버튼")){this.gameStatus = "play";event.stopImmediatePropagation();}else if(this.gameStatus == "pause" && ManagerUI.getInstance().getMouseOver("게임종료_버튼")){ManagerScene.getInstance().changeScene("title");event.stopImmediatePropagation();}
else if(this.gameStatus == "lose" && ManagerUI.getInstance().getMouseOver("게임종료_버튼")){ManagerScene.getInstance().changeScene("title");event.stopImmediatePropagation();}else if(this.gameStatus == "win" && ManagerUI.getInstance().getMouseOver("게임승리_버튼")){ManagerScene.getInstance().changeScene("lobby");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");}}
}
- skillFire.js
import { ManagerAnimation } from "./managerAnimation.js";import { SuperCollision } from "./superCollision.js";
export class SkillFire extends SuperCollision{constructor(xPos , yPos , speed , power , deadDistance){super();
this.animationList = {};this.animationList["애니_스킬_파이어"] = ManagerAnimation.getInstance().getNodeAnimation("애니_스킬_파이어");this.currentAnimationName = "";
this.xPos = xPos;this.yPos = yPos;this.speed = speed;this.power = power;this.deadDistance = deadDistance;
this.status = ""; // work // deadthis.changeStatus("work");}update(){if(this.status == "dead"){return;}if(this.status == "work"){this.statusWork();}
super.setCollisionBox(this.xPos + 40 , this.yPos + 10 , 192, 57);}
draw(){if(this.status == "dead"){return;}
this.animationList[this.currentAnimationName].draw(this.xPos, this.yPos);super.drawBox();}
animationReset(){for(let key in this.animationList){this.animationList[key].indexInit();}}changeStatus(nextStatus){if(this.status == nextStatus){return;}this.status = nextStatus;this.animationReset();}
statusWork(){
this.currentAnimationName = "애니_스킬_파이어";this.animationList[this.currentAnimationName].playLoop();this.xPos += this.speed;this.deadDistance -= this.speed;if(this.deadDistance <= 0){this.changeStatus("dead");}}}
- skillSword.js
import { ManagerAnimation } from "./managerAnimation.js";import { SuperCollision } from "./superCollision.js";
export class SkillSword extends SuperCollision{constructor(xPos , yPos , speed , power , deadDistance){super();
this.animationList = {};this.animationList["애니_스킬_검"] = ManagerAnimation.getInstance().getNodeAnimation("애니_스킬_검");this.currentAnimationName = "";
this.xPos = xPos;this.yPos = yPos;this.speed = speed;this.power = power;this.deadDistance = deadDistance;
this.status = ""; // work // deadthis.changeStatus("work");}update(){if(this.status == "dead"){return;}if(this.status == "work"){this.statusWork();}
super.setCollisionBox(this.xPos + 20 , this.yPos + 45 , 200, 220);}
draw(){if(this.status == "dead"){return;}
this.animationList[this.currentAnimationName].draw(this.xPos, this.yPos);super.drawBox();}animationReset(){for(var key in this.animationList){this.animationList[key].indexInit();}}changeStatus(nextStatus){if(this.status == nextStatus){return;}this.status = nextStatus;this.animationReset();}
statusWork(){
this.currentAnimationName = "애니_스킬_검";this.animationList[this.currentAnimationName].playOnce();this.xPos -= this.speed;this.deadDistance -= this.speed;if(this.deadDistance <= 0){this.changeStatus("dead");}}}
- superCollision.js
import { ManagerGame } from "./managerGame.js";
export class SuperCollision{ //충돌만 처리하는곳//그릴때. z축을 기준으로 다시 그린다.// 충돌범위설정setCollisionBox(xCol , yCol , wCol , hCol){this.xCol = xCol;this.yCol = yCol;this.wCol = wCol;this.hCol = hCol;this.zCol = this.yCol + this.hCol; // 유닛 정렬을 위해 필요하다. 원근감을 위해 위에 있는 유닛부터 그린다.}
//외각선그리기drawBox(){let ctx = ManagerGame.getInstance().ctx;ctx.beginPath () ;ctx.rect(this.xCol, this.yCol, this.wCol, this.hCol);ctx.fillStyle = "black";ctx.lineWidth = 1;ctx.strokeStyle = "black";ctx.stroke();ctx.closePath () ;}
// 충돌체크checkCollision(other){let left1 = this.xCol;let right1 = this.xCol + this.wCol;let top1 = this.yCol;let bottom1 = this.yCol + this.hCol;let left2 = other.xCol;let right2 = other.xCol + other.wCol;let top2 = other.yCol;let bottom2 = other.yCol + other.hCol;if(left1 < right2 && right1 > left2 && top1 < bottom2 && bottom1 > top2){return true;}return false;}}
- superUnit.js
import { SuperCollision } from "./superCollision.js";
export class SuperUnit extends SuperCollision{//SuperCollision 을 상속. 충돌 처리해준느것constructor(xPos , yPos , speed , hpMax , power){super();this.xPos = xPos;this.yPos = yPos;this.speed = speed;this.hp = hpMax;this.hpMax = hpMax;this.power = power;}//죽었는지getUnitDead(){if(this.hp <= 0){this.hp = 0;return true;}return false;}}
- textDamage.js
import { ManagerText } from "./managerText.js";
export class TextDamage {constructor(text , xPos , yPos , speed , deadDistance , size){this.text = text;this.xPos = xPos;this.yPos = yPos;this.speed = speed;this.dead = false;this.deadDistance = deadDistance;this.size = size;}update(){if(this.dead){return;}this.yPos -= this.speed;this.deadDistance -= this.speed;if(this.deadDistance <= 0){this.dead = true;}}
draw(){if(this.dead){return;}ManagerText.getInstance().drawText(this.xPos, this.yPos , this.size , "red" , this.text , true);}}
- unitCyclops.js
import { ManagerAnimation } from "./managerAnimation.js";import { SuperUnit } from "./superUnit.js";
//몬스터도 플레이어와 똑같다.export class UnitCyclops extends SuperUnit{//SuperUnit 을 상속받음//unit으로 만들어 놓으며 재활용이 가능하다. 아니면 여기다가 코드를 다 써야 한다.constructor(xPos , yPos , speed , hpMax , power){super(xPos , yPos , speed , hpMax , power);
this.animationList = {};this.animationList["애니_사이클롭스_걷기"] = ManagerAnimation.getInstance().getNodeAnimation("애니_사이클롭스_걷기");this.animationList["애니_사이클롭스_맞기"] = ManagerAnimation.getInstance().getNodeAnimation("애니_사이클롭스_맞기");this.animationList["애니_사이클롭스_죽음"] = ManagerAnimation.getInstance().getNodeAnimation("애니_사이클롭스_죽음");
this.currentAnimationName = "";this.status = ""; //work, dead , remove , damagedthis.damagedTime = 0;this.damagedTimeMax = 50;
this.changeStatus("work");}
update(){if(this.status == "remove"){return;}if(this.getUnitDead()){this.changeStatus("dead");}if(this.status == "dead"){this.statusDead();}if(this.status == "damaged"){this.statusDamaged();}if(this.status == "work"){this.statusWork();}super.setCollisionBox(this.xPos + 95, this.yPos + 80, 120, 150);}
draw(){if(this.status == "remove"){return;}// console.log(this.currentAnimationName);this.animationList[this.currentAnimationName].draw(this.xPos, this.yPos);super.drawBox();}
changeStatus(nextStatus){if(this.status == nextStatus){return;}this.status = nextStatus;this.animationReset();}animationReset(){for(var key in this.animationList){this.animationList[key].indexInit();}}
setDamaged(power){this.hp -= power;this.changeStatus("damaged");}
statusWork(){if(this.xPos <= -200){this.changeStatus("remove");return;}this.xPos -= this.speed;this.currentAnimationName = "애니_사이클롭스_걷기";this.animationList[this.currentAnimationName].playLoop();}statusDead(){this.currentAnimationName = "애니_사이클롭스_죽음";let check = this.animationList[this.currentAnimationName].playOnce();if(check){this.changeStatus("remove");return;}}statusDamaged(){this.currentAnimationName = "애니_사이클롭스_맞기";this.animationList[ this.currentAnimationName ].playOnce();this.damagedTime += 1;if(this.damagedTime >= this.damagedTimeMax){this.damagedTime = 0;this.changeStatus("work");}}
}
- unitOrc.js
import { ManagerAnimation } from "./managerAnimation.js";import { SkillSword } from "./skillSword.js";import { ManagerSkill } from "./managerSkill.js";import { SuperUnit } from "./superUnit.js";
export class UnitOrc extends SuperUnit{constructor(xPos , yPos , speed , hpMax , power){super(xPos , yPos , speed , hpMax , power);
this.animationList = {};this.animationList["애니_오크_걷기"] = ManagerAnimation.getInstance().getNodeAnimation("애니_오크_걷기");this.animationList["애니_오크_맞기"] = ManagerAnimation.getInstance().getNodeAnimation("애니_오크_맞기");this.animationList["애니_오크_죽음"] = ManagerAnimation.getInstance().getNodeAnimation("애니_오크_죽음");
this.currentAnimationName = "";this.status = ""; // remove , damaged , "attack" , "dead"
this.dir = "left"; // up , down , right
this.deadTime = 0;this.deadTimeMax = 100; //this.damagedTime = 0;this.damagedTimeMax = 50;this.attackTime = 0;this.attackTimeMax = 150;
this.changeStatus("work");}
update(){
if(this.status == "remove"){return;}if(this.getUnitDead()){this.status = "dead";}if(this.status == "dead"){this.statusDead();}if(this.status == "damaged"){this.statusDamaged();}if(this.status == "work"){this.statusWork();}super.setCollisionBox(this.xPos + 160 , this.yPos + 100 , 200, 280);}draw(){
if(this.status == "remove"){return;}this.animationList[this.currentAnimationName].draw(this.xPos, this.yPos);super.drawBox();}
changeStatus(nextStatus){
if(this.status == nextStatus){return;}this.status = nextStatus;this.animationReset();}animationReset(){
for(var key in this.animationList){this.animationList[key].indexInit();}}
setDamaged(power){
this.hp -= power;this.changeStatus("damaged");}statusDead(){
this.currentAnimationName = "애니_오크_죽음";this.animationList[this.currentAnimationName].playOnce();this.deadTime += 1;if(this.deadTime >= this.deadTimeMax){this.changeStatus("remove");return;}}
statusDamaged(){
this.currentAnimationName = "애니_오크_맞기";this.animationList[ this.currentAnimationName ].playOnce();this.damagedTime += 1;if(this.damagedTime >= this.damagedTimeMax){this.damagedTime = 0;this.changeStatus("work");}}
statusWork(){this.currentAnimationName = "애니_오크_걷기";this.animationList[this.currentAnimationName].playLoop();this.attackTime += 1;if ( this.attackTime >= this.attackTimeMax){this.attackTime = 0;var deadDistance = 800;var skill = new SkillSword(this.xPos - 100 , this.yPos + 100, 5 , this.power , deadDistance);ManagerSkill.getInstance().addSwordSkill(skill);}
if(this.dir == "right"){this.xPos += this.speed;if(this.xPos >= 1000){this.dir = "left";}}
else if(this.dir == "left"){this.xPos -= this.speed;if(this.xPos <= 700){this.dir = "up";}}else if(this.dir == "up"){this.yPos -= this.speed;if(this.yPos <= -50){this.dir = "down";}}else if(this.dir == "down"){this.yPos += this.speed;if(this.yPos >= 350){this.dir = "up";}}}}
- unitPlayer.js
import { ManagerAnimation } from "./managerAnimation.js";import { ManagerKey } from "./managerKey.js";import { SuperUnit } from "./superUnit.js";import { ManagerSkill } from "./managerSkill.js";import { SkillFire } from "./skillFire.js";export class UnitPlayer extends SuperUnit{//SuperUnit을 상속받음constructor(xPos , yPos , speed , hpMax , power){// 상속받았으면 부모생성자는 그냥 호출한다.super(xPos , yPos , speed , hpMax , power); //부모한테 정보 넘기기this.animationList = {}; //본인은 애니메이션을 가지고 있다.this.animationList["애니_영웅_걷기"] = ManagerAnimation.getInstance().getNodeAnimation("애니_영웅_걷기");this.animationList["애니_영웅_맞기"] = ManagerAnimation.getInstance().getNodeAnimation("애니_영웅_맞기");this.animationList["애니_영웅_죽음"] = ManagerAnimation.getInstance().getNodeAnimation("애니_영웅_죽음");this.currentAnimationName = "";this.status = ""; // work // damaged// dead // gameover;//상태는 4가지가 있다.
// 플레이어가 공격받으면 잠시뒤에 회복된다.// 플레이어가 한 대 맞으면 바로 일어나면 안되니까. 시간 주는것this.damagedTime = 0;this.damagedTimeMax = 30;this.changeStatus("work");}
update(){ //각종 상태에 대해 정리if(this.status == "gameover"){return;}
if(this.getUnitDead()){this.changeStatus("dead");}
if(this.status == "work"){this.statusWork();}
if(this.status == "damaged"){this.statusDamaged();}
if(this.status == "dead"){this.statusDead();}
super.setCollisionBox(this.xPos + 140, this.yPos + 120 , 150, 190);//외각 박스선}
draw(){if(this.status == "gameover"){return;}
this.animationList[this.currentAnimationName].draw(this.xPos, this.yPos);super.drawBox();}
animationReset(){for(let key in this.animationList){this.animationList[key].indexInit();}}
changeStatus(nextStatus){if(this.status == nextStatus){return;}this.status = nextStatus;this.animationReset();}
statusWork(){this.playerKey();this.currentAnimationName = "애니_영웅_걷기";this.animationList[this.currentAnimationName].playLoop();}
statusDead(){this.currentAnimationName = "애니_영웅_죽음";let aniEnd = this.animationList[this.currentAnimationName].playOnce();if(aniEnd){this.changeStatus("gameover");}}
statusDamaged(){this.playerKey();this.currentAnimationName = "애니_영웅_맞기";this.animationList[ this.currentAnimationName ].playOnce();this.damagedTime += 1;if(this.damagedTime >= this.damagedTimeMax){this.damagedTime = 0;this.changeStatus("work");}}
setDamaged(power){this.hp -= power;this.changeStatus("damaged");}
statusGameover(){}
playerKey(){
let d = ManagerKey.getInstance().getKeyStay("KeyD");let a = ManagerKey.getInstance().getKeyStay("KeyA");let w = ManagerKey.getInstance().getKeyStay("KeyW");let s = ManagerKey.getInstance().getKeyStay("KeyS");let k = ManagerKey.getInstance().getKeyOnce("KeyK"); // 스킬키let test1 = ManagerKey.getInstance().getKeyOnce("Digit1"); // test keylet test2 = ManagerKey.getInstance().getKeyOnce("Digit2"); // test key
// 에니메이션 테스트용if(test1){this.setDamaged(20);}//밑에는 진짜 기능if(d){this.xPos += this.speed;if(this.xPos >= 300){ // 일정범위 벗어나지 못하게 막기this.xPos = 300;}}if(a){this.xPos -= this.speed;if(this.xPos <= -100){this.xPos = -100;}}if(w){this.yPos -= this.speed;if(this.yPos <= 0){this.yPos = 0;}}if(s){this.yPos += this.speed;if(this.yPos >= 400){this.yPos = 400;}}
if(k){var deadDistance = 500;var skill = new SkillFire(this.xPos + 200 , this.yPos + 200, 15 , this.power , deadDistance);ManagerSkill.getInstance().addFireSkill(skill);
}}}
- 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]);}
}}
반응형