Skip to content

Commit 1735fb8

Browse files
coderATPcoderATP
committed
update
1 parent d5567f2 commit 1735fb8

File tree

11 files changed

+789
-0
lines changed

11 files changed

+789
-0
lines changed

‎fonts/MarioWorldPixelColor-3zBwX.ttf‎

56.2 KB
Binary file not shown.

‎fonts/angrybirds-regular.ttf‎

48.7 KB
Binary file not shown.

‎src/events/EventEmitter.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
class EventEmitter extends Phaser.Events.EventEmitter{
2+
constructor(){
3+
super();
4+
}
5+
}
6+
7+
export const eventEmitter = new EventEmitter();

‎src/myInput.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
class Input{
2+
constructor(){
3+
this.keys = [];
4+
this.lastKey = "";
5+
this.touchX = 0;
6+
this.touchY = 0;
7+
this.touchThreshold = 50;
8+
//developer
9+
10+
//button
11+
this.keypressed = false;
12+
this.buttons = document.querySelectorAll("button");
13+
this.buttons.forEach(btn=>{
14+
btn.addEventListener('touchstart', (e)=>{
15+
if(this.keys.indexOf(e.target.id) === -1){
16+
this.keys.unshift(e.target.id);
17+
this.lastKey = e.target.id;
18+
this.keypressed = true;
19+
}
20+
});
21+
btn.addEventListener ('touchend', (e)=>{
22+
if(this.keys.indexOf(e.target.id) > -1){
23+
this.keys.splice(this.keys.indexOf(e.target.id), 1);
24+
this.lastKey = "";
25+
this.keypressed = false;
26+
}
27+
})
28+
29+
btn.addEventListener('mousedown', (e)=>{
30+
if(this.keys.indexOf(e.target.id) === -1){
31+
this.keys.unshift(e.target.id);
32+
this.lastKey = e.target.id;
33+
this.keypressed = true;
34+
}
35+
});
36+
btn.addEventListener ('mouseup', (e)=>{
37+
if(this.keys.indexOf(e.target.id) > -1){
38+
this.keys.splice(this.keys.indexOf(e.target.id), 1);
39+
this.lastKey = "";
40+
this.keypressed = false;
41+
}
42+
})
43+
})
44+
45+
//arrows
46+
window.addEventListener('keydown', (e)=>{
47+
if(this.keys.indexOf(e.key) === -1){
48+
this.keys.unshift(e.key);
49+
this.lastKey = e.key;
50+
this.keypressed = true;
51+
}
52+
})
53+
window.addEventListener('keyup', (e)=>{
54+
if(this.keys.indexOf(e.key) > -1){
55+
this.keys.splice(this.keys.indexOf(e.key), 1);
56+
this.lastKey = "";
57+
this.keypressed = false;
58+
}
59+
})
60+
}
61+
}
62+
63+
export const myInput = new Input();

‎src/scenes/GameState.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/**@type {import("../typings/phaser")} */
2+
3+
4+
const STATES = {
5+
LOAD: 0,
6+
MENU: 1,
7+
LEVELSELECT: 2,
8+
PLAY: 3,
9+
PAUSE: 4,
10+
GAMEOVER: 5
11+
};
12+
13+
export const LEVELS = [
14+
{name: "forest", scenes: 3},
15+
{name: "ruins", scenes: 3},
16+
{name: "crypt", scenes: 3},
17+
{name: "cemetery", scenes: 3}
18+
19+
];
20+
21+
export class GameState extends Phaser.Scene{
22+
constructor(scene, config){
23+
super(scene);
24+
this.config = config;
25+
this.map = null;
26+
this.currentLevel = null;
27+
this.currentScene = null;
28+
29+
this.mapLayers = null;
30+
this.bgLayers = null;
31+
this.player = null;
32+
this.enemies = null;
33+
this.mapWidth = this.mapHeight = undefined;
34+
this.gamePaused;
35+
this.endOfSceneImage = null;
36+
this.loadingScreen = document.getElementById("loadingScreen");
37+
this.menuScreen = document.getElementById("menuScreen");
38+
this.levelSelectScreen = document.getElementById("levelSelectScreen");
39+
this.playScreen = document.getElementById("playScreen");
40+
this.pauseScreen = document.getElementById("pauseScreen");
41+
this.gameOverScreen = document.getElementById("gameOverScreen");
42+
this.levelCompleteScreen = document.getElementById("levelCompleteScreen");
43+
this.playSceneCurtain = document.getElementById("playSceneCurtain");
44+
this.loading_startBtn = document.getElementById("loading_start");
45+
this.restartConfirmScreen = document.getElementById("restartConfirmScreen");
46+
this.optionsScreen = document.getElementById("optionsScreen");
47+
this.shouldUpdate = true;
48+
this.shouldRender = true;
49+
this.opacity = 0;
50+
51+
}
52+
53+
create(){
54+
this.registry.set("currentScene", this.registry.get("currentScene") || 1);
55+
}
56+
57+
setCurrentScene() {
58+
this.currentLevel = this.registry.get("currentLevel");
59+
this.currentScene = this.registry.get("currentScene");
60+
}
61+
62+
resetGame(){
63+
this.map = null;
64+
this.mapID = null;
65+
this.mapLayers = null;
66+
this.backgrounds = null;
67+
this.player = null;
68+
this.enemies = null;
69+
this.mapWidth = this.mapHeight = undefined;
70+
this.gamePaused;
71+
}
72+
73+
hideAllScreens(){
74+
this.loadingScreen.style.display = "none";
75+
this.menuScreen.style.display = "none";
76+
this.levelSelectScreen.style.display = "none";
77+
this.playScreen.style.display = "none";
78+
this.playSceneCurtain.style.display = "none";
79+
this.pauseScreen.style.display = "none";
80+
this.levelCompleteScreen.style.display = "none";
81+
this.gameOverScreen.style.display = "none";
82+
this.restartConfirmScreen.style.display = "none";
83+
this.optionsScreen.style.display = "none";
84+
}
85+
86+
hide(screen){
87+
screen.style.display = "none";
88+
}
89+
90+
show(screen, display){
91+
screen.style.display = display;
92+
}
93+
94+
update(){
95+
}
96+
}

‎src/scenes/LevelSelectScene.js‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
/**@type {import("../typings/phaser")} */
2+
import { GameState } from "./GameState.js";
3+
import { ui } from "../ui.js";
4+
import { myInput } from "../myInput.js";
5+
import {eventEmitter} from "../events/EventEmitter.js";
6+
import { PlayScene } from "./PlayScene.js";
7+
8+
9+
export class LevelSelectScene extends GameState {
10+
constructor(config) {
11+
super('LevelSelectScene', config);
12+
13+
this.levelImage = ui.levelScreenshot_forest;
14+
this.imageIndex = 0;
15+
this.numberOfLevels = 4;
16+
}
17+
18+
enter() {
19+
eventEmitter.destroy("MENU_TO_LEVELSELECT");
20+
21+
this.hideAllScreens();
22+
this.show(this.levelSelectScreen, "grid");
23+
}
24+
25+
create() {
26+
this.enter();
27+
this.handleEvents();
28+
}
29+
30+
handleEvents() {
31+
ui.levelSelect_enter.addEventListener("click", ()=>{
32+
eventEmitter.emit("LEVELSELECT_TO_ENTER");
33+
})
34+
ui.levelSelect_back.addEventListener("click", ()=>{
35+
eventEmitter.emit("LEVELSELECT_TO_MENU");
36+
})
37+
38+
eventEmitter.once("LEVELSELECT_TO_ENTER", ()=>{
39+
this.scene.start("TransitionToPlayScene");
40+
})
41+
eventEmitter.once("LEVELSELECT_TO_MENU", ()=>{
42+
this.scene.start("MenuScene");
43+
})
44+
}
45+
46+
initEvents() {
47+
this.scene.events.on(Phaser.Scenes.Events.UPDATE, this.update, this);
48+
}
49+
50+
renderScreenshot(){
51+
const canvas = document.querySelector("#levelScreenshot_canvas");
52+
const ctx = canvas.getContext("2d");
53+
ctx.clearRect(0,0,canvas.width, canvas.height);
54+
ctx.drawImage(this.levelImage, 0, 0, canvas.width, canvas.height);
55+
}
56+
57+
setSelectedLevel() {
58+
if (this.imageIndex == 0) {
59+
this.registry.set("currentLevel", 0)
60+
}
61+
else if (this.imageIndex == 1) {
62+
this.registry.set("currentLevel", 1)
63+
}
64+
else if (this.imageIndex == 2) {
65+
this.registry.set("currentLevel", 2)
66+
}
67+
else if (this.imageIndex == 3) {
68+
this.registry.set("currentLevel", 3)
69+
}
70+
}
71+
72+
navigateLevels(){
73+
74+
const imageDescriptions = [ "forest","ruins", "crypt", "cemetry" ];
75+
76+
switch(myInput.keys[0]){
77+
//navigation with the circles, easy
78+
//forest circle
79+
case "levelSelect_forest":
80+
this.imageIndex = 0;
81+
break;
82+
//ruins circle
83+
case "levelSelect_ruins":
84+
this.imageIndex = 1;
85+
break;
86+
//crypt circle
87+
case "levelSelect_crypt":
88+
this.imageIndex = 2;
89+
break;
90+
//cemetry circle
91+
case "levelSelect_cemetry":
92+
this.imageIndex = 3;
93+
break;
94+
95+
//navigation with the arrows, intermediate
96+
//"next" arrow
97+
case "levelSelect_next":
98+
//this.game.audio.play(this.game.audio.buttonSound);
99+
if(this.imageIndex < this.numberOfLevels - 1 && myInput.keypressed){
100+
this.imageIndex++;
101+
myInput.keypressed = false;
102+
}
103+
else if(this.imageIndex >= this.numberOfLevels - 1 && myInput.keypressed){
104+
this.imageIndex = 0;
105+
myInput.keypressed = false;
106+
}
107+
break;
108+
//"previous" arrow
109+
case "levelSelect_previous":
110+
//this.game.audio.play(this.game.audio.buttonSound);
111+
if(this.imageIndex > 0 && myInput.keypressed){
112+
this.imageIndex--;
113+
myInput.keypressed = false;
114+
}
115+
else if(this.imageIndex <= 0 && myInput.keypressed){
116+
this.imageIndex = this.numberOfLevels - 1;
117+
myInput.keypressed = false;
118+
}
119+
break;
120+
}
121+
122+
//BASED ON INAGE THE SET IMAGE-INDEX VALUE WE WILL NOW SET:
123+
// (A) THE SCREENSHOT PROPERTIES
124+
// (B) THE IMAGE FILEPATH
125+
this.levelImage = ui.levelScreenshots[this.imageIndex];
126+
127+
// (C) THE IMAGE ID
128+
129+
//(D) THE IMAGE INFORMATION / DESCRIPTION
130+
ui.levelDescription.innerText = imageDescriptions[this.imageIndex];
131+
//(E) CURRENT LEVEL TO THE SELECTED LEVEL BASED ON IMAGE-INDEX VALUE
132+
this.setSelectedLevel();
133+
this.registry.set("currentLevel", this.imageIndex);
134+
}
135+
136+
update() {
137+
this.navigateLevels();
138+
this.renderScreenshot();
139+
140+
}
141+
}

‎src/scenes/MenuScene.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**@type {import("../typings/phaser")} */
2+
import { GameState } from "./GameState.js";
3+
import { ui } from "../ui.js";
4+
import { eventEmitter } from "../events/EventEmitter.js";
5+
6+
7+
export class MenuScene extends GameState{
8+
constructor(config){
9+
super('MenuScene', config);
10+
11+
}
12+
13+
enter(){
14+
eventEmitter.destroy("PRELOAD_TO_MENU");
15+
eventEmitter.destroy("LEVELSELECT_TO_MENU");
16+
eventEmitter.destroy("PAUSE_TO_MENU");
17+
18+
this.hideAllScreens();
19+
this.show(this.menuScreen, "grid");
20+
}
21+
22+
create(){
23+
this.enter();
24+
this.initEvents();
25+
26+
eventEmitter.once("MENU_TO_LEVELSELECT", ()=>{
27+
this.scene.start("LevelSelectScene");
28+
})
29+
}
30+
31+
initEvents(){
32+
ui.menu_playBtn.addEventListener("click", ()=>{
33+
eventEmitter.emit("MENU_TO_LEVELSELECT");
34+
})
35+
}
36+
37+
}

0 commit comments

Comments
 (0)