반응형
- 주인공이 출전하기 게임으로 들어가기 전에 돈이 1만원이 있어서 자신을 업그레이드 하는것
- _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");
}
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");}
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");}
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; //게임이 시작이 안해서 null}
setMoney(money) { this.money = money; }setPower(power) { this.power = power; }setHpMax(hpMax) { this.hpMax = hpMax; }setSpeed(speed) { this.speed = speed; }
getMoney() { return this.money; }getPower() { return this.power; }getHpMax() { return this.hpMax; }getSpeed() { return this.speed; }
}
- managerScene.js
-
import { SceneLobby } from "./sceneLobby.js";import { SceneSelect } from "./sceneSelect.js";import { SceneTitle } from "./sceneTitle.js";
export class ManagerScene {static instance = new ManagerScene();static getInstance() { return ManagerScene.instance; }
start() {this.sceneList = {};this.curScene = null;this.curSceneName = "";
this.setSceneList();}
setSceneList() {this.sceneList["title"] = new SceneTitle();this.sceneList["lobby"] = new SceneLobby();this.sceneList["select"] = new SceneSelect();}
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);
document.addEventListener("click", this.mouseClickEvent);}update() {
}
draw() {this.imageBackground.nodeImageDraw(0, 0);
this.buttonBack.nodeButtonDraw();}
mouseClickEvent = (e) => {if(this.buttonBack.getMouseOver()) {document.removeEventListener("click", this.mouseClickEvent);e.stopImmediatePropagation(); // 버튼이 한번만 눌리게 하는 역할
ManagerScene.getInstance().changeScene("lobby");}}
}
- 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");}}
}
반응형
'코딩 > 1-JavaScript' 카테고리의 다른 글
| E02_애니메이션 => 05단계_스테이지_배경 (0) | 2025.06.13 |
|---|---|
| E02_애니메이션 => 04단계_셀렉트완성 (1) | 2025.06.13 |
| E02_애니메이션 => 02단계_페이지이동 (0) | 2025.06.13 |
| E02_애니메이션 => 01단계_타이틀 (0) | 2025.06.13 |
| 05_게임_오목 (0) | 2025.06.12 |