diff --git a/src/templates/javascript/src/sample/actors/ball.actor.js b/src/templates/javascript/src/sample/actors/ball.actor.js index 74c209c..62686ee 100644 --- a/src/templates/javascript/src/sample/actors/ball.actor.js +++ b/src/templates/javascript/src/sample/actors/ball.actor.js @@ -4,17 +4,17 @@ import { assetManager } from '../managers/asset.manager.js'; export class Ball extends Actor { constructor(x, y, radius, vel) { super({ x, y, radius, vel }); - this.ball_speed = vel; - this.is_colliding = false; + this.ballSpeed = vel; + this.isColliding = false; } onInitialize(engine) { // this.body.collisionType = CollisionType.Passive; - this.set_sprite(); + this.setSprite(); } - set_sprite() { + setSprite() { const sprite = SpriteSheet.fromImageSource({ image: assetManager.images.spritesheet, grid: { @@ -28,9 +28,9 @@ export class Ball extends Actor { }, }); const frames = range(0, 0); - const animation_ms = 0; - const ball_anim = Animation.fromSpriteSheet(sprite, frames, animation_ms); + const animationMs = 0; + const ballAnim = Animation.fromSpriteSheet(sprite, frames, animationMs); // - this.graphics.use(ball_anim); + this.graphics.use(ballAnim); } } diff --git a/src/templates/javascript/src/sample/actors/brick.actor.js b/src/templates/javascript/src/sample/actors/brick.actor.js index 593163c..e792351 100644 --- a/src/templates/javascript/src/sample/actors/brick.actor.js +++ b/src/templates/javascript/src/sample/actors/brick.actor.js @@ -6,66 +6,65 @@ import { range, vec, } from 'excalibur'; -import { BRICK_TYPE } from '../models.js'; + import { assetManager } from '../managers/asset.manager.js'; export class Brick extends Actor { constructor(x, y, width, height, type) { super({ x, y, width, height }); this.type = type; - this.sprite_status = 32 * 8; + this.spriteStatus = 32 * 8; switch (this.type) { case '1': this.life = 1; - this.sprite_type = 1; - this.hit_score = 100; - this.destroy_score = this.life * 200; + this.spriteType = 1; + this.hitScore = 100; + this.destroyScore = this.life * 200; break; case '2': this.life = 2; - this.sprite_type = 2; - this.hit_score = 250; - this.destroy_score = this.life * 200; + this.spriteType = 2; + this.hitScore = 250; + this.destroyScore = this.life * 200; break; case '3': this.life = 3; - this.sprite_type = 3; - this.hit_score = 250; - this.destroy_score = this.life * 200; + this.spriteType = 3; + this.hitScore = 250; + this.destroyScore = this.life * 200; break; case '4': this.life = 4; - this.sprite_type = 4; - this.hit_score = 350; - this.destroy_score = this.life * 200; + this.spriteType = 4; + this.hitScore = 350; + this.destroyScore = this.life * 200; break; case '5': this.life = 5; - this.sprite_type = 5; - this.hit_score = 350; - this.destroy_score = this.life * 200; + this.spriteType = 5; + this.hitScore = 350; + this.destroyScore = this.life * 200; break; case '6': this.life = 6; - this.sprite_type = 6; - this.hit_score = 350; - this.destroy_score = this.life * 200; + this.spriteType = 6; + this.hitScore = 350; + this.destroyScore = this.life * 200; break; } } onInitialize(engine) { - // this.body.collisionType = CollisionType.Passive; - this.set_sprite(); + this.setSprite(); this.scale = vec(2, 2); } - set_sprite() { + setSprite() { const sprite = SpriteSheet.fromImageSource({ image: assetManager.images.spritesheet, grid: { @@ -75,27 +74,27 @@ export class Brick extends Actor { spriteHeight: 16, }, spacing: { - originOffset: { x: this.sprite_status, y: this.sprite_type * 16 }, + originOffset: { x: this.spriteStatus, y: this.spriteType * 16 }, }, }); const frames = range(0, 0); - const animation_ms = 100; - const brick_anim = Animation.fromSpriteSheet(sprite, frames, animation_ms); - this.graphics.use(brick_anim); + const animationMs = 100; + const brickAnim = Animation.fromSpriteSheet(sprite, frames, animationMs); + this.graphics.use(brickAnim); } - update_sprite() { + updateSprite() { switch (this.life) { case 3: - this.sprite_status = 32 * 8; + this.spriteStatus = 32 * 8; break; case 2: - this.sprite_status = 32 * 9; + this.spriteStatus = 32 * 9; break; case 1: - this.sprite_status = 32 * 10; + this.spriteStatus = 32 * 10; break; } - this.set_sprite(); + this.setSprite(); } } diff --git a/src/templates/javascript/src/sample/actors/paddle.actor.js b/src/templates/javascript/src/sample/actors/paddle.actor.js index 3926a03..0c4d4b6 100644 --- a/src/templates/javascript/src/sample/actors/paddle.actor.js +++ b/src/templates/javascript/src/sample/actors/paddle.actor.js @@ -15,13 +15,11 @@ export class Paddle extends Actor { this.name = 'paddle'; } onInitialize(engine) { - // this.body.collisionType = CollisionType.Passive; - this.set_sprite(); + this.setSprite(); this.scale = vec(2, 2); } - - set_sprite() { + setSprite() { const sprite = SpriteSheet.fromImageSource({ image: assetManager.images.spritesheet, grid: { @@ -35,9 +33,9 @@ export class Paddle extends Actor { }, }); const frames = range(0, 0); - const animation_ms = 0; - const paddle_anim = Animation.fromSpriteSheet(sprite, frames, animation_ms); + const animationMs = 0; + const paddleAnim = Animation.fromSpriteSheet(sprite, frames, animationMs); // - this.graphics.use(paddle_anim); + this.graphics.use(paddleAnim); } } diff --git a/src/templates/javascript/src/sample/levels/levels.js b/src/templates/javascript/src/sample/levels/levels.js index e756d4b..85ca07e 100644 --- a/src/templates/javascript/src/sample/levels/levels.js +++ b/src/templates/javascript/src/sample/levels/levels.js @@ -48,17 +48,17 @@ const level001 = { name: 'level001', balls: 3, music: LEVEL_MUSIC.LEVEL_2, - ball_speed: BALL_SPEED.NORMAL, - bg_color: Color.Transparent, - level: [EMPTY_ROW, ROW_1, ROW_2, ROW_1, EMPTY_ROW], + ballSpeed: BALL_SPEED.NORMAL, + bgColor: Color.Transparent, + bricksSetup: [EMPTY_ROW, ROW_1, ROW_2, ROW_1, EMPTY_ROW], }; const level002 = { name: 'level002', balls: 3, music: LEVEL_MUSIC.LEVEL_1, - ball_speed: BALL_SPEED.NORMAL, - bg_color: Color.fromHex(LEVEL_BG.BLUE.LIGHT), - level: [ + ballSpeed: BALL_SPEED.NORMAL, + bgColor: Color.fromHex(LEVEL_BG.BLUE.LIGHT), + bricksSetup: [ ['3', '', '3', '', '', '3', '', '3'], ['3', '', '3', '', '', '3', '', '3'], ['3', '', '3', '', '', '3', '', '3'], @@ -69,9 +69,9 @@ const level003 = { name: 'level003', balls: 3, music: LEVEL_MUSIC.LEVEL_3, - ball_speed: BALL_SPEED.NORMAL, - bg_color: Color.fromHex(LEVEL_BG.BLUE.DARK), - level: [ + ballSpeed: BALL_SPEED.NORMAL, + bgColor: Color.fromHex(LEVEL_BG.BLUE.DARK), + bricksSetup: [ ['3', '', '3', '', '3', '', '3', ''], ['', '3', '', '3', '', '3', '', '3'], ['', '2', '', '2', '', '2', '', '2'], @@ -83,9 +83,9 @@ const level004 = { name: 'level004', balls: 3, music: LEVEL_MUSIC.LEVEL_4, - ball_speed: BALL_SPEED.MEDIUM, - bg_color: Color.fromHex(LEVEL_BG.GREEN.DARK), - level: [ + ballSpeed: BALL_SPEED.MEDIUM, + bgColor: Color.fromHex(LEVEL_BG.GREEN.DARK), + bricksSetup: [ ['6', '', '', '', '', '', '', '6'], ROW_3, ROW_3, @@ -96,9 +96,9 @@ const level005 = { name: 'level005', balls: 3, music: LEVEL_MUSIC.LEVEL_5, - ball_speed: BALL_SPEED.MEDIUM, - bg_color: Color.fromHex(LEVEL_BG.GREEN.LIGHT), - level: [ + ballSpeed: BALL_SPEED.MEDIUM, + bgColor: Color.fromHex(LEVEL_BG.GREEN.LIGHT), + bricksSetup: [ ['1', '', '2', '3', '3', '2', '', '1'], ['1', '', '2', '3', '3', '2', '', '1'], ['1', '', '2', '3', '3', '2', '', '1'], @@ -109,10 +109,10 @@ const level006 = { name: 'level006', balls: 3, music: LEVEL_MUSIC.LEVEL_1, - ball_speed: BALL_SPEED.MEDIUM, - bg_color: Color.fromHex(LEVEL_BG.PINK.DARK), + ballSpeed: BALL_SPEED.MEDIUM, + bgColor: Color.fromHex(LEVEL_BG.PINK.DARK), - level: [ + bricksSetup: [ ['', '3', '3', '3', '3', '3', '3', ''], ['2', '', '', '4', '4', '', '', '2'], ['3', '', '', '4', '4', '', '', '3'], @@ -123,9 +123,9 @@ const level007 = { name: 'level007', balls: 3, music: LEVEL_MUSIC.LEVEL_5, - ball_speed: BALL_SPEED.MEDIUM, - bg_color: Color.fromHex(LEVEL_BG.PURPLE.LIGHT), - level: [ + ballSpeed: BALL_SPEED.MEDIUM, + bgColor: Color.fromHex(LEVEL_BG.PURPLE.LIGHT), + bricksSetup: [ ROW_5, ['5', '', '', '4', '4', '', '', '5'], ['5', '', '4', '4', '4', '4', '', '5'], @@ -136,9 +136,9 @@ const level008 = { name: 'level008', balls: 3, music: LEVEL_MUSIC.LEVEL_1, - ball_speed: BALL_SPEED.HARD, - bg_color: Color.fromHex(LEVEL_BG.PURPLE.DARK), - level: [ + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.PURPLE.DARK), + bricksSetup: [ ['', '1', '6', '6', '6', '1', '', ''], ['', '', '1', '6', '1', '', '', ''], ['3', '3', '', '1', '', '', '3', '3'], @@ -149,9 +149,9 @@ const level009 = { name: 'level009', balls: 3, music: LEVEL_MUSIC.LEVEL_2, - ball_speed: BALL_SPEED.HARD, - bg_color: Color.fromHex(LEVEL_BG.YELLOW.DARK), - level: [ + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.YELLOW.DARK), + bricksSetup: [ ['', '', '', '5', '', '5', '', '5'], ['', '', '5', '', '5', '', '5', ''], ['', '5', '', '5', '', '5', '', ''], @@ -162,10 +162,10 @@ const level010 = { name: 'level010', balls: 3, music: LEVEL_MUSIC.LEVEL_2, - ball_speed: BALL_SPEED.HARD, - bg_color: Color.fromHex(LEVEL_BG.ORANGE.DARK), + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.ORANGE.DARK), - level: [ + bricksSetup: [ ['3', '3', '3', '5', '', '', '', '3'], ['3', '3', '5', '', '', '', '5', '3'], ['3', '5', '', '', '', '5', '3', '3'], @@ -176,9 +176,9 @@ const level011 = { name: 'level011', balls: 3, music: LEVEL_MUSIC.LEVEL_3, - ball_speed: BALL_SPEED.HARD, - bg_color: Color.fromHex(LEVEL_BG.ORANGE.LIGHT), - level: [ + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.ORANGE.LIGHT), + bricksSetup: [ ['5', '', '6', '6', '6', '', '4', '4'], ['5', '', '1', '', '3', '', '4', ''], ['5', '', '1', '', '3', '', '3', ''], @@ -189,9 +189,9 @@ const level012 = { name: 'level012', balls: 3, music: LEVEL_MUSIC.LEVEL_4, - ball_speed: BALL_SPEED.HARD, - bg_color: Color.fromHex(LEVEL_BG.RED.DARK), - level: [ + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.RED.DARK), + bricksSetup: [ ['5', '5', '', '', '', '', '5', '5'], ['', '', '6', '6', '6', '6', '', ''], ['5', '5', '', '', '', '', '5', '5'], @@ -202,17 +202,24 @@ const level013 = { name: 'level013', balls: 3, music: LEVEL_MUSIC.LEVEL_5, - ball_speed: BALL_SPEED.HARD, - bg_color: Color.fromHex(LEVEL_BG.RED.LIGHT), - level: [ + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.RED.LIGHT), + bricksSetup: [ ['5', '5', '5', '5', '6', '6', '6', '6'], ['5', '6', '6', '5', '6', '5', '5', '6'], ['5', '6', '6', '5', '6', '5', '5', '6'], ['5', '5', '5', '5', '6', '6', '6', '6'], ], }; - -export const levels_setup = [ +const level014 = { + name: 'level014', + balls: 3, + music: LEVEL_MUSIC.LEVEL_3, + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.RED.LIGHT), + bricksSetup: [[ROW_4], [ROW_6], [ROW_1], [ROW_4]], +}; +export const levelsSeed = [ level001, level002, level003, @@ -226,4 +233,5 @@ export const levels_setup = [ level011, level012, level013, + level014, ]; diff --git a/src/templates/javascript/src/sample/managers/asset.manager.js b/src/templates/javascript/src/sample/managers/asset.manager.js index 612d0cc..3752609 100644 --- a/src/templates/javascript/src/sample/managers/asset.manager.js +++ b/src/templates/javascript/src/sample/managers/asset.manager.js @@ -12,19 +12,19 @@ class AssetManager { }; this.sounds = { - level_music_default: new Sound('/sample/music/HarmonicMinor.wav'), - level_music_1: new Sound('/sample/music/HarmonicMinor.wav'), - level_music_2: new Sound('/sample/music/Cyberpunk Moonlight Sonata.mp3'), - level_music_3: new Sound('/sample/music/cubedcanada+invaderloop.mp3'), - level_music_4: new Sound('/sample/music/S31-Futuristic-Resources.ogg'), - level_music_5: new Sound('/sample/music/ruskerdax_-_open_warfare.mp3'), + levelMusicDefault: new Sound('/sample/music/HarmonicMinor.wav'), + levelMusic1: new Sound('/sample/music/HarmonicMinor.wav'), + levelMusic2: new Sound('/sample/music/Cyberpunk Moonlight Sonata.mp3'), + levelMusic3: new Sound('/sample/music/cubedcanada+invaderloop.mp3'), + levelMusic4: new Sound('/sample/music/S31-Futuristic-Resources.ogg'), + levelMusic5: new Sound('/sample/music/ruskerdax_-_open_warfare.mp3'), // - level_completed: new Sound('/sample/sounds/win.wav'), - level_gameover: new Sound('/sample/sounds/vgdeathsound.wav'), - brick_destroy: new Sound('/sample/sounds/explosion.wav'), - brick_hit: new Sound('/sample/sounds/hit2.wav'), - ball_drop: new Sound('/sample/sounds/ball_drop.mp3'), - paddle_hit: new Sound('/sample/sounds/hit.wav'), + levelCompleted: new Sound('/sample/sounds/win.wav'), + levelGameover: new Sound('/sample/sounds/vgdeathsound.wav'), + brickDestroy: new Sound('/sample/sounds/explosion.wav'), + brickHit: new Sound('/sample/sounds/hit2.wav'), + ballDrop: new Sound('/sample/sounds/ball_drop.mp3'), + paddleHit: new Sound('/sample/sounds/hit.wav'), }; // for (const key in this.images) { diff --git a/src/templates/javascript/src/sample/managers/game.manager.js b/src/templates/javascript/src/sample/managers/game.manager.js index 22e810c..e56cb16 100644 --- a/src/templates/javascript/src/sample/managers/game.manager.js +++ b/src/templates/javascript/src/sample/managers/game.manager.js @@ -11,129 +11,130 @@ import { Subject } from '../utils.js'; class GameManager { constructor(engine) { this.game = engine; - this.score_global = 0; - this.score_level = 0; - this.high_score = 0; + this.scoreGlobal = 0; + this.scoreLevel = 0; + this.highscore = 0; - this.game_state = new Subject(); - this.scene_state = new Subject(); + this.gameState = new Subject(); + this.sceneState = new Subject(); } init() { + this.setupListeners(); + // start engine + this.gameState.next(GAME_STATES.LOADING); + } + setupListeners() { eventBus.on(SCENE_EVENTS.UPDATE_BALL, (balls) => { - uiManager.print_balls(balls); + uiManager.printBalls(balls); }); eventBus.on(SCENE_EVENTS.UPDATE_SCORE, (score) => { - this.score_level += score; - uiManager.print_score(this.score_level); + this.scoreLevel += score; + uiManager.printScore(this.scoreLevel); }); - this.game_state.subscribe((new_game_state) => { - console.log(`GAME_STATE [${new_game_state}]`); - switch (new_game_state) { + this.gameState.onChange((newGameState) => { + console.log(`[${newGameState}]`); + switch (newGameState) { case GAME_STATES.LOADING: assetManager.init(); levelManager.init(); audioManager.init(); uiManager.init(); - this.load_levels(); - this.activate_debug_mode(); + this.loadLevels(); + this.activateDebugMode(); this.game.start(assetManager.loader).then(() => { - this.game_state.next(GAME_STATES.READY); + this.gameState.next(GAME_STATES.READY); eventBus.emit(SCENE_STATE.READY); }); break; case GAME_STATES.READY: - uiManager.update_state(SCENE_STATE.READY); + uiManager.updateState(SCENE_STATE.READY); break; case GAME_STATES.PLAYING: break; case GAME_STATES.COMPLETED: - uiManager.update_state('DONE'); + uiManager.updateState('DONE'); break; case GAME_STATES.ERROR: break; } }); - this.scene_state.subscribe((new_scene_state) => { + this.sceneState.onChange((newSceneState) => { console.log( - `GAME_STATE [${this.game_state.current()}]/[${new_scene_state}]` + `GAME_STATE [${this.gameState.current()}]/[${newSceneState}]` ); - switch (new_scene_state) { + switch (newSceneState) { case SCENE_STATE.LOADING: break; case SCENE_STATE.READY: - this.score_level = this.score_global; + this.scoreLevel = this.scoreGlobal; break; case SCENE_STATE.PLAYING: break; case SCENE_STATE.PAUSED: break; case SCENE_STATE.COMPLETED: - this.score_global = this.score_level; - const new_high_core = this.score_global > this.high_score; - if (new_high_core) this.high_score = this.score_global; + this.scoreGlobal = this.scoreLevel; + const newHighscore = this.scoreGlobal > this.highscore; + if (newHighscore) this.highscore = this.scoreGlobal; - if (levelManager.levels_completed()) { - this.game_state.next(GAME_STATES.COMPLETED); + if (levelManager.levelsCompleted()) { + this.gameState.next(GAME_STATES.COMPLETED); return; } break; case SCENE_STATE.GAMEOVER: - this.score_level = this.score_global; + this.scoreLevel = this.scoreGlobal; break; case SCENE_STATE.ERROR: break; } - uiManager.update_state(new_scene_state); + uiManager.updateState(newSceneState); }); - - // start - this.game_state.next(GAME_STATES.LOADING); } - - load_levels() { + loadLevels() { levelManager.levels.forEach((lvl) => this.game.add(lvl.name, lvl)); } - activate_debug_mode() { + activateDebugMode() { new DevTool(this.game); } // actions - load_level(level) { - this.scene_state.next(SCENE_STATE.LOADING); + loadLevel(level) { + this.sceneState.next(SCENE_STATE.LOADING); this.game.goToScene(level.name); this.game.currentScene.onInitialize(this.game); - uiManager.print_UI( + uiManager.printUI( level.name, level.balls, - this.score_global, - this.high_score + this.scoreGlobal, + this.highscore ); } - start_game() { - const initial_level = levelManager.initial(); - this.load_level(initial_level); + startGame() { + const initialLevel = levelManager.initial(); + this.loadLevel(initialLevel); } - retry_level() { - const same_level = levelManager.current(); - this.load_level(same_level); + retryLevel() { + const sameLevel = levelManager.current(); + this.loadLevel(sameLevel); } - next_level() { - const next_level = levelManager.next(); - if (!next_level) { + nextLevel() { + const nextLevel = levelManager.next(); + if (!nextLevel) { console.warn('No more levels'); return; } - this.load_level(next_level); + this.loadLevel(nextLevel); } - reset_game() { - this.score_global = 0; - this.start_game(); + resetGame() { + this.scoreGlobal = 0; + this.startGame(); } } @@ -161,6 +162,7 @@ const game = new Engine({ canvasElementId: 'main-canvas', backgroundColor: Color.Black, antialiasing: false, + fixedUpdateFps: 30, }); const gameManager = new GameManager(game); const eventBus = new EventBus(); diff --git a/src/templates/javascript/src/sample/managers/level.manager.js b/src/templates/javascript/src/sample/managers/level.manager.js index 7cb9b87..2cea828 100644 --- a/src/templates/javascript/src/sample/managers/level.manager.js +++ b/src/templates/javascript/src/sample/managers/level.manager.js @@ -1,33 +1,33 @@ -import { levels_setup } from '../levels/levels.js'; +import { levelsSeed } from '../levels/levels.js'; import { LevelScene } from '../scenes/level.scene.js'; class LevelManager { - constructor(level_setup) { - this.current_level_index = 0; - this.levels_setup = level_setup; + constructor(levelSetup) { + this.currentLevelIndex = 0; + this.levelsSetup = levelSetup; this.levels = []; } init() { - levels_setup.forEach((lvl) => this.levels.push(new LevelScene(lvl))); + this.levelsSetup.forEach((lvl) => this.levels.push(new LevelScene(lvl))); } initial() { - this.current_level_index = 0; - return this.levels[this.current_level_index]; + this.currentLevelIndex = 0; + return this.levels[this.currentLevelIndex]; } next() { - const exist_next = this.levels[this.current_level_index + 1]; - if (!exist_next) return false; - this.current_level_index++; - return exist_next; + const levelExist = this.levels[this.currentLevelIndex + 1]; + if (!levelExist) return false; + this.currentLevelIndex++; + return levelExist; } current() { - return this.levels[this.current_level_index]; + return this.levels[this.currentLevelIndex]; } - levels_completed() { - return this.current_level_index >= this.levels.length - 1; + levelsCompleted() { + return this.currentLevelIndex >= this.levels.length - 1; } } -export const levelManager = new LevelManager(levels_setup); +export const levelManager = new LevelManager(levelsSeed); diff --git a/src/templates/javascript/src/sample/managers/ui.manager.js b/src/templates/javascript/src/sample/managers/ui.manager.js index df57091..9fa1906 100644 --- a/src/templates/javascript/src/sample/managers/ui.manager.js +++ b/src/templates/javascript/src/sample/managers/ui.manager.js @@ -2,46 +2,46 @@ import { gameManager } from './game.manager.js'; class UIManager { constructor() { - this.game_container = document.getElementById('game'); - this.btn_play = document.getElementById('btn-play'); - this.btn_retry = document.getElementById('btn-retry'); - this.btn_next_level = document.getElementById('btn-next-level'); - this.btn_done = document.getElementById('btn-done'); - this.label_level = document.getElementById('label-level'); - this.label_score = document.getElementById('label-score'); - this.label_balls = document.getElementById('label-balls'); - this.label_high_score = document.getElementById('label-high-score'); + this.gameContainer = document.getElementById('game'); + this.btnPlay = document.getElementById('btn-play'); + this.btnRetry = document.getElementById('btn-retry'); + this.btnNextLevel = document.getElementById('btn-next-level'); + this.btnDone = document.getElementById('btn-done'); + this.labelLevel = document.getElementById('label-level'); + this.labelScore = document.getElementById('label-score'); + this.labelBalls = document.getElementById('label-balls'); + this.labelHighscore = document.getElementById('label-high-score'); } init() { - this.btn_play.onclick = () => gameManager.start_game(); - this.btn_retry.onclick = () => gameManager.retry_level(); - this.btn_next_level.onclick = () => gameManager.next_level(); - this.btn_done.onclick = () => gameManager.reset_game(); + this.btnPlay.onclick = () => gameManager.startGame(); + this.btnRetry.onclick = () => gameManager.retryLevel(); + this.btnNextLevel.onclick = () => gameManager.nextLevel(); + this.btnDone.onclick = () => gameManager.resetGame(); } - print_UI(level, balls, score, high_score) { - this.print_level(level); - this.print_balls(balls); - this.print_score(score); - this.print_high_score(high_score); + printUI(level, balls, score, highscore) { + this.printLevel(level); + this.printBalls(balls); + this.printScore(score); + this.printHighscore(highscore); } - update_state(state) { - this.game_container.className = state; + updateState(state) { + this.gameContainer.className = state; } // - print_balls(amount) { - this.label_balls.innerText = '🪩'.repeat(amount); + printBalls(amount) { + this.labelBalls.innerText = '🪩'.repeat(amount); } - print_score(score) { - this.label_score.innerText = `${score}`; + printScore(score) { + this.labelScore.innerText = `${score}`; } - print_high_score(score) { - this.label_high_score.innerText = `${score}`; + printHighscore(score) { + this.labelHighscore.innerText = `${score}`; } - print_level(lvl) { - this.label_level.innerText = `${lvl}`; + printLevel(lvl) { + this.labelLevel.innerText = `${lvl}`; } } diff --git a/src/templates/javascript/src/sample/particles/galaxy.particles.js b/src/templates/javascript/src/sample/particles/galaxy.particles.js index bde4f3b..f29a524 100644 --- a/src/templates/javascript/src/sample/particles/galaxy.particles.js +++ b/src/templates/javascript/src/sample/particles/galaxy.particles.js @@ -2,7 +2,7 @@ import { Color, EmitterType, ParticleEmitter, Vector } from 'excalibur'; // https://excaliburjs.com/docs/particles // https://excaliburjs.com/particle-tester/ -export function create_galaxy(setup) { +export function createGalaxy(setup) { const { width, height, x, y } = setup; const emitter = new ParticleEmitter({ width, diff --git a/src/templates/javascript/src/sample/scenes/level.scene.js b/src/templates/javascript/src/sample/scenes/level.scene.js index 2ee7cf6..12da067 100644 --- a/src/templates/javascript/src/sample/scenes/level.scene.js +++ b/src/templates/javascript/src/sample/scenes/level.scene.js @@ -5,27 +5,27 @@ import { Ball } from '../actors/ball.actor.js'; import { SCENE_EVENTS, SCENE_STATE, PLAYER_CONTROLS } from '../models.js'; import { eventBus, gameManager } from '../managers/game.manager.js'; import { assetManager } from '../managers/asset.manager.js'; -import { create_galaxy } from '../particles/galaxy.particles.js'; +import { createGalaxy } from '../particles/galaxy.particles.js'; export class LevelScene extends Scene { constructor(setup) { super(); - const { balls, name, ball_speed, bg_color, level, music } = setup; + const { balls, name, ballSpeed, bgColor, bricksSetup, music } = setup; this.name = name; - this.balls = this.level_balls; - this.ball_speed = ball_speed; - this.bg_color = bg_color; - this.bricks_setup = level; - this.level_music = - assetManager.sounds[music] || assetManager.sounds.level_music_default; - this.level_music.volume = 0.1; - this.level_balls = balls; - this.level_bricks = []; + this.balls = this.levelBalls; + this.ballSpeed = ballSpeed; + this.bgColor = bgColor; + this.bricksSetup = bricksSetup; + this.levelMusic = + assetManager.sounds[music] || assetManager.sounds.levelMusicDefault; + this.levelMusic.volume = 0.1; + this.levelBalls = balls; + this.levelBricks = []; this.state = null; this.PLAYER_CONTROLS = null; - this.player_controls = PLAYER_CONTROLS.BOTH; + this.playerControls = PLAYER_CONTROLS.BOTH; } onInitialize(engine) { this.init(engine); @@ -33,84 +33,84 @@ export class LevelScene extends Scene { init(engine) { this.reset(); - this.backgroundColor = this.bg_color; + this.backgroundColor = this.bgColor; //create game objects - const galaxy_particle = this.create_galaxy_particles(engine); - this.level_bricks = this.create_bricks(); + const galaxyParticle = this.createGalaxyParticles(engine); + this.levelBricks = this.createBricks(); - const paddle = this.create_paddle(engine); + const paddle = this.createPaddle(engine); paddle.on('postupdate', () => { - const offset_x = 10; - const hit_limits = { - screen_left: paddle.pos.x - paddle.width / 2 < 0 + offset_x, - screen_right: paddle.pos.x + paddle.width / 2 > engine.drawWidth, + const offsetX = 10; + const hitLimits = { + screenLeft: paddle.pos.x - paddle.width / 2 < 0 + offsetX, + screenRight: paddle.pos.x + paddle.width / 2 > engine.drawWidth, }; - if (hit_limits.screen_left) { - paddle.pos.x = 0 + paddle.width / 2 + offset_x; + if (hitLimits.screenLeft) { + paddle.pos.x = 0 + paddle.width / 2 + offsetX; } - if (hit_limits.screen_right) { - paddle.pos.x = engine.drawWidth - paddle.width / 2 - offset_x; + if (hitLimits.screenRight) { + paddle.pos.x = engine.drawWidth - paddle.width / 2 - offsetX; } }); - const ball = this.create_ball(engine); + const ball = this.createBall(engine); ball.on('postupdate', () => { - const hit_limits = { - screen_top: ball.pos.y - ball.height / 2 < 0, - screen_left: ball.pos.x - ball.width / 2 < 0, - screen_right: ball.pos.x + ball.width / 2 > engine.drawWidth, + const hitLimits = { + screenTop: ball.pos.y - ball.height / 2 < 0, + screenLeft: ball.pos.x - ball.width / 2 < 0, + screenRight: ball.pos.x + ball.width / 2 > engine.drawWidth, }; - if (hit_limits.screen_top) { + if (hitLimits.screenTop) { // send to bottom - ball.vel.y = ball.vel.y = ball.ball_speed.y * -1 + Math.random(); - } else if (hit_limits.screen_left) { + ball.vel.y = ball.vel.y = ball.ballSpeed.y * -1 + Math.random(); + } else if (hitLimits.screenLeft) { // send to the right - ball.vel.x = ball.ball_speed.x + Math.random(); - } else if (hit_limits.screen_right) { + ball.vel.x = ball.ballSpeed.x + Math.random(); + } else if (hitLimits.screenRight) { // send to the left - ball.vel.x = ball.ball_speed.x * -1 + Math.random(); + ball.vel.x = ball.ballSpeed.x * -1 + Math.random(); } }); // destroy bricks ball.on('collisionstart', (e) => { - const collide_with_brick = this.level_bricks.indexOf(e.other) > -1; - const collide_with_paddle = e.other.name === 'paddle'; - if (collide_with_brick) { + const collideWithBrick = this.levelBricks.indexOf(e.other) > -1; + const collideWithPaddle = e.other.name === 'paddle'; + if (collideWithBrick) { let brick = e.other; brick.life--; - eventBus.emit(SCENE_EVENTS.UPDATE_SCORE, brick.hit_score); + eventBus.emit(SCENE_EVENTS.UPDATE_SCORE, brick.hitScore); if (brick.life <= 0) { - assetManager.sounds.brick_destroy.play(0.1); + assetManager.sounds.brickDestroy.play(0.1); brick.kill(); - eventBus.emit(SCENE_EVENTS.UPDATE_SCORE, brick.destroy_score); + eventBus.emit(SCENE_EVENTS.UPDATE_SCORE, brick.destroyScore); } else { - assetManager.sounds.brick_hit.play(0.1); - brick.update_sprite(); + assetManager.sounds.brickHit.play(0.1); + brick.updateSprite(); } - if (this.level_completed()) { - this.level_music.stop(); - assetManager.sounds.level_completed.play(); + if (this.levelCompleted()) { + this.levelMusic.stop(); + assetManager.sounds.levelCompleted.play(); ball.kill(); - this.set_state(SCENE_STATE.COMPLETED); + this.setState(SCENE_STATE.COMPLETED); return; } } - if (collide_with_paddle) { - assetManager.sounds.paddle_hit.play(); + if (collideWithPaddle) { + assetManager.sounds.paddleHit.play(); } - if (!ball.is_colliding) { - ball.is_colliding = true; + if (!ball.isColliding) { + ball.isColliding = true; const intersection = e.contact.mtv.normalize(); - const hit_x = Math.abs(intersection.x) > Math.abs(intersection.y); + const hitX = Math.abs(intersection.x) > Math.abs(intersection.y); - if (hit_x) { + if (hitX) { // reverse x ball.vel.x *= -1; } else { @@ -120,19 +120,19 @@ export class LevelScene extends Scene { } }); ball.on('collisionend', () => { - ball.is_colliding = false; + ball.isColliding = false; }); // lose ball ball.on('exitviewport', () => { this.balls--; - assetManager.sounds.ball_drop.play(); + assetManager.sounds.ballDrop.play(); eventBus.emit(SCENE_EVENTS.UPDATE_BALL, this.balls); if (this.gameover()) { - this.level_music.stop(); - assetManager.sounds.level_gameover.play(); + this.levelMusic.stop(); + assetManager.sounds.levelGameover.play(); ball.kill(); - this.set_state(SCENE_STATE.GAMEOVER); + this.setState(SCENE_STATE.GAMEOVER); } else { ball.pos.x = Math.random() * engine.drawWidth; ball.pos.y = -10; @@ -142,20 +142,20 @@ export class LevelScene extends Scene { // setup player controls if ( - this.player_controls === PLAYER_CONTROLS.MOUSE || - this.player_controls === PLAYER_CONTROLS.BOTH + this.playerControls === PLAYER_CONTROLS.MOUSE || + this.playerControls === PLAYER_CONTROLS.BOTH ) { // MOUSE CONTROLS engine.input.pointers.primary.on('move', (e) => { - const can_move = this.state === SCENE_STATE.PLAYING; - if (can_move) { + const canMove = this.state === SCENE_STATE.PLAYING; + if (canMove) { paddle.pos.x = e.worldPos.x; } }); } if ( - this.player_controls === PLAYER_CONTROLS.KEYBOARD || - this.player_controls === PLAYER_CONTROLS.BOTH + this.playerControls === PLAYER_CONTROLS.KEYBOARD || + this.playerControls === PLAYER_CONTROLS.BOTH ) { // KEYBOARD CONTROLS paddle.on('preupdate', () => { @@ -180,17 +180,17 @@ export class LevelScene extends Scene { } // add game objects to the scene - this.add(galaxy_particle); + this.add(galaxyParticle); this.add(paddle); this.add(ball); - this.level_bricks.forEach((brick) => this.add(brick)); + this.levelBricks.forEach((brick) => this.add(brick)); // - this.level_music.stop(); - this.level_music.play(); - this.set_state(SCENE_STATE.PLAYING); + this.levelMusic.stop(); + this.levelMusic.play(); + this.setState(SCENE_STATE.PLAYING); } - create_galaxy_particles(engine) { - return create_galaxy({ + createGalaxyParticles(engine) { + return createGalaxy({ width: engine.drawWidth, height: engine.drawHeight, x: engine.drawWidth / 2, @@ -199,32 +199,32 @@ export class LevelScene extends Scene { } reset() { this.clear(); - this.balls = this.level_balls; + this.balls = this.levelBalls; } - set_state(new_state) { - if (this.state === new_state) return; - this.state = new_state; - gameManager.scene_state.next(new_state); + setState(newState) { + if (this.state === newState) return; + this.state = newState; + gameManager.sceneState.next(newState); } // game objects - create_bricks() { + createBricks() { const padding = 32 + 24 / 6; - const offset_x = 32 * 2; - const offset_y = 32 + 48; - const brick_width = 32; - const brick_height = 16; + const offsetX = 32 * 2; + const offsetY = 32 + 48; + const brickWidth = 32; + const brickHeight = 16; const bricks = []; - this.bricks_setup.forEach((row, row_index) => { + this.bricksSetup.forEach((row, rowIndex) => { for (let pos = 0; pos < row.length; pos++) { if (row[pos] === '') { continue; } - const x = offset_x + pos * (brick_width + padding); - const y = offset_y + row_index * (brick_height + padding); - const brick = new Brick(x, y, brick_width, brick_height, row[pos]); + const x = offsetX + pos * (brickWidth + padding); + const y = offsetY + rowIndex * (brickHeight + padding); + const brick = new Brick(x, y, brickWidth, brickHeight, row[pos]); brick.z = 1; bricks.push(brick); } @@ -232,16 +232,16 @@ export class LevelScene extends Scene { return bricks; } - create_ball(engine) { + createBall(engine) { const x = engine.drawWidth / 2; const y = -10; const radius = 8; - const vel = this.ball_speed; + const vel = this.ballSpeed; const ball = new Ball(x, y, radius, vel); ball.z = 1; return ball; } - create_paddle(engine) { + createPaddle(engine) { const x = 100; const y = engine.drawHeight - 64; const width = 32; @@ -252,8 +252,8 @@ export class LevelScene extends Scene { return paddle; } // state - level_completed() { - return this.level_bricks.every((b) => b.isKilled()); + levelCompleted() { + return this.levelBricks.every((b) => b.isKilled()); } gameover() { return this.balls <= 0; diff --git a/src/templates/javascript/src/sample/utils.js b/src/templates/javascript/src/sample/utils.js index a16be07..cb31e75 100644 --- a/src/templates/javascript/src/sample/utils.js +++ b/src/templates/javascript/src/sample/utils.js @@ -6,11 +6,11 @@ export class Subject { current() { return this.value; } - next(new_value) { - this.value = new_value; + next(newValue) { + this.value = newValue; this.subscribers.forEach((cb) => cb(this.value)); } - subscribe(callback) { + onChange(callback) { this.subscribers.add(callback); const unsubscribe = () => { @@ -21,20 +21,20 @@ export class Subject { } } export class BehaviourSubject { - constructor(initial_value) { - this.value = initial_value; + constructor(initialValue) { + this.value = initialValue; this.subscribers = new Set(); } current() { return this.value; } - next(new_value) { + next(newValue) { const prev = this.value; - this.value = new_value; + this.value = newValue; this.subscribers.forEach((cb) => cb(this.value, prev)); } - subscribe(callback) { + onChange(callback) { this.subscribers.add(callback); callback(this.value); const unsubscribe = () => { diff --git a/src/templates/typescript/src/sample/actors/ball.actor.ts b/src/templates/typescript/src/sample/actors/ball.actor.ts index 9c9790d..3cfa524 100644 --- a/src/templates/typescript/src/sample/actors/ball.actor.ts +++ b/src/templates/typescript/src/sample/actors/ball.actor.ts @@ -2,7 +2,6 @@ import { Actor, Animation, CollisionType, - Engine, SpriteSheet, Vector, range, @@ -10,20 +9,20 @@ import { import { assetManager } from '../managers/asset.manager'; export class Ball extends Actor { - ball_speed!: Vector; - is_colliding = false; + ballSpeed!: Vector; + isColliding = false; + constructor(x: number, y: number, radius: number, vel: Vector) { super({ x, y, radius, vel }); - this.ball_speed = vel; + this.ballSpeed = vel; } - onInitialize(engine: Engine): void { - // + onInitialize(): void { this.body.collisionType = CollisionType.Passive; - this.set_sprite(); + this.setSprite(); } - set_sprite() { + setSprite() { const sprite = SpriteSheet.fromImageSource({ image: assetManager.images.spritesheet, grid: { @@ -37,9 +36,9 @@ export class Ball extends Actor { }, }); const frames = range(0, 0); - const animation_ms = 0; - const ball_anim = Animation.fromSpriteSheet(sprite, frames, animation_ms); + const animationMs = 0; + const ballAnim = Animation.fromSpriteSheet(sprite, frames, animationMs); // - this.graphics.use(ball_anim); + this.graphics.use(ballAnim); } } diff --git a/src/templates/typescript/src/sample/actors/brick.actor.ts b/src/templates/typescript/src/sample/actors/brick.actor.ts index 44d363b..96a25b8 100644 --- a/src/templates/typescript/src/sample/actors/brick.actor.ts +++ b/src/templates/typescript/src/sample/actors/brick.actor.ts @@ -2,7 +2,6 @@ import { Actor, Animation, CollisionType, - Engine, SpriteSheet, range, vec, @@ -11,11 +10,11 @@ import { assetManager } from '../managers/asset.manager'; export class Brick extends Actor { type!: string; - sprite_type!: number; - sprite_status!: number; + spriteType!: number; + spriteStatus!: number; life!: number; - hit_score = 0; - destroy_score = 0; + hitScore = 0; + destroyScore = 0; constructor( x: number, y: number, @@ -25,59 +24,58 @@ export class Brick extends Actor { ) { super({ x, y, width, height }); this.type = type; - this.sprite_status = 32 * 8; + this.spriteStatus = 32 * 8; switch (this.type) { case '1': this.life = 1; - this.sprite_type = 1; - this.hit_score = 100; - this.destroy_score = this.life * 200; + this.spriteType = 1; + this.hitScore = 100; + this.destroyScore = this.life * 200; break; case '2': this.life = 2; - this.sprite_type = 2; - this.hit_score = 250; - this.destroy_score = this.life * 200; + this.spriteType = 2; + this.hitScore = 250; + this.destroyScore = this.life * 200; break; case '3': this.life = 3; - this.sprite_type = 3; - this.hit_score = 250; - this.destroy_score = this.life * 200; + this.spriteType = 3; + this.hitScore = 250; + this.destroyScore = this.life * 200; break; case '4': this.life = 4; - this.sprite_type = 4; - this.hit_score = 350; - this.destroy_score = this.life * 200; + this.spriteType = 4; + this.hitScore = 350; + this.destroyScore = this.life * 200; break; case '5': this.life = 5; - this.sprite_type = 5; - this.hit_score = 350; - this.destroy_score = this.life * 200; + this.spriteType = 5; + this.hitScore = 350; + this.destroyScore = this.life * 200; break; case '6': this.life = 6; - this.sprite_type = 6; - this.hit_score = 350; - this.destroy_score = this.life * 200; + this.spriteType = 6; + this.hitScore = 350; + this.destroyScore = this.life * 200; break; } } - onInitialize(engine: Engine): void { - // + onInitialize(): void { this.body.collisionType = CollisionType.Passive; - this.set_sprite(); + this.setSprite(); this.scale = vec(2, 2); } - set_sprite() { + setSprite() { const sprite = SpriteSheet.fromImageSource({ image: assetManager.images.spritesheet, grid: { @@ -87,27 +85,27 @@ export class Brick extends Actor { spriteHeight: 16, }, spacing: { - originOffset: { x: this.sprite_status, y: this.sprite_type * 16 }, + originOffset: { x: this.spriteStatus, y: this.spriteType * 16 }, }, }); const frames = range(0, 0); - const animation_ms = 100; - const brick_anim = Animation.fromSpriteSheet(sprite, frames, animation_ms); - this.graphics.use(brick_anim); + const animationMs = 100; + const brickAnim = Animation.fromSpriteSheet(sprite, frames, animationMs); + this.graphics.use(brickAnim); } - update_sprite() { + updateSprite() { switch (this.life) { case 3: - this.sprite_status = 32 * 8; + this.spriteStatus = 32 * 8; break; case 2: - this.sprite_status = 32 * 9; + this.spriteStatus = 32 * 9; break; case 1: - this.sprite_status = 32 * 10; + this.spriteStatus = 32 * 10; break; } - this.set_sprite(); + this.setSprite(); } } diff --git a/src/templates/typescript/src/sample/actors/paddle.actor.ts b/src/templates/typescript/src/sample/actors/paddle.actor.ts index 3153ceb..b94139a 100644 --- a/src/templates/typescript/src/sample/actors/paddle.actor.ts +++ b/src/templates/typescript/src/sample/actors/paddle.actor.ts @@ -2,7 +2,6 @@ import { Actor, Animation, CollisionType, - Engine, SpriteSheet, range, vec, @@ -22,14 +21,13 @@ export class Paddle extends Actor { this.speed = speed; this.name = 'paddle'; } - onInitialize(engine: Engine): void { - // + onInitialize(): void { this.body.collisionType = CollisionType.Passive; - this.set_sprite(); + this.setSprite(); this.scale = vec(2, 2); } - set_sprite() { + setSprite() { const sprite = SpriteSheet.fromImageSource({ image: assetManager.images.spritesheet, grid: { @@ -43,9 +41,9 @@ export class Paddle extends Actor { }, }); const frames = range(0, 0); - const animation_ms = 0; - const paddle_anim = Animation.fromSpriteSheet(sprite, frames, animation_ms); + const animationMs = 0; + const paddleAnim = Animation.fromSpriteSheet(sprite, frames, animationMs); // - this.graphics.use(paddle_anim); + this.graphics.use(paddleAnim); } } diff --git a/src/templates/typescript/src/sample/levels/levels.ts b/src/templates/typescript/src/sample/levels/levels.ts index a62ef09..f68970d 100644 --- a/src/templates/typescript/src/sample/levels/levels.ts +++ b/src/templates/typescript/src/sample/levels/levels.ts @@ -48,17 +48,17 @@ const level001: LevelSetup = { name: 'level001', balls: 3, music: LEVEL_MUSIC.LEVEL_2, - ball_speed: BALL_SPEED.NORMAL, - bg_color: Color.Transparent, - level: [EMPTY_ROW, ROW_1, ROW_2, ROW_1, EMPTY_ROW], + ballSpeed: BALL_SPEED.NORMAL, + bgColor: Color.Transparent, + bricksSetup: [EMPTY_ROW, ROW_1, ROW_2, ROW_1, EMPTY_ROW], }; const level002: LevelSetup = { name: 'level002', balls: 3, music: LEVEL_MUSIC.LEVEL_1, - ball_speed: BALL_SPEED.NORMAL, - bg_color: Color.fromHex(LEVEL_BG.BLUE.LIGHT), - level: [ + ballSpeed: BALL_SPEED.NORMAL, + bgColor: Color.fromHex(LEVEL_BG.BLUE.LIGHT), + bricksSetup: [ ['3', '', '3', '', '', '3', '', '3'], ['3', '', '3', '', '', '3', '', '3'], ['3', '', '3', '', '', '3', '', '3'], @@ -69,9 +69,9 @@ const level003: LevelSetup = { name: 'level003', balls: 3, music: LEVEL_MUSIC.LEVEL_3, - ball_speed: BALL_SPEED.NORMAL, - bg_color: Color.fromHex(LEVEL_BG.BLUE.DARK), - level: [ + ballSpeed: BALL_SPEED.NORMAL, + bgColor: Color.fromHex(LEVEL_BG.BLUE.DARK), + bricksSetup: [ ['3', '', '3', '', '3', '', '3', ''], ['', '3', '', '3', '', '3', '', '3'], ['', '2', '', '2', '', '2', '', '2'], @@ -83,9 +83,9 @@ const level004: LevelSetup = { name: 'level004', balls: 3, music: LEVEL_MUSIC.LEVEL_4, - ball_speed: BALL_SPEED.MEDIUM, - bg_color: Color.fromHex(LEVEL_BG.GREEN.DARK), - level: [ + ballSpeed: BALL_SPEED.MEDIUM, + bgColor: Color.fromHex(LEVEL_BG.GREEN.DARK), + bricksSetup: [ ['6', '', '', '', '', '', '', '6'], ROW_3, ROW_3, @@ -96,9 +96,9 @@ const level005: LevelSetup = { name: 'level005', balls: 3, music: LEVEL_MUSIC.LEVEL_5, - ball_speed: BALL_SPEED.MEDIUM, - bg_color: Color.fromHex(LEVEL_BG.GREEN.LIGHT), - level: [ + ballSpeed: BALL_SPEED.MEDIUM, + bgColor: Color.fromHex(LEVEL_BG.GREEN.LIGHT), + bricksSetup: [ ['1', '', '2', '3', '3', '2', '', '1'], ['1', '', '2', '3', '3', '2', '', '1'], ['1', '', '2', '3', '3', '2', '', '1'], @@ -109,10 +109,10 @@ const level006: LevelSetup = { name: 'level006', balls: 3, music: LEVEL_MUSIC.LEVEL_1, - ball_speed: BALL_SPEED.MEDIUM, - bg_color: Color.fromHex(LEVEL_BG.PINK.DARK), + ballSpeed: BALL_SPEED.MEDIUM, + bgColor: Color.fromHex(LEVEL_BG.PINK.DARK), - level: [ + bricksSetup: [ ['', '3', '3', '3', '3', '3', '3', ''], ['2', '', '', '4', '4', '', '', '2'], ['3', '', '', '4', '4', '', '', '3'], @@ -123,9 +123,9 @@ const level007: LevelSetup = { name: 'level007', balls: 3, music: LEVEL_MUSIC.LEVEL_5, - ball_speed: BALL_SPEED.MEDIUM, - bg_color: Color.fromHex(LEVEL_BG.PURPLE.LIGHT), - level: [ + ballSpeed: BALL_SPEED.MEDIUM, + bgColor: Color.fromHex(LEVEL_BG.PURPLE.LIGHT), + bricksSetup: [ ROW_5, ['5', '', '', '4', '4', '', '', '5'], ['5', '', '4', '4', '4', '4', '', '5'], @@ -136,9 +136,9 @@ const level008: LevelSetup = { name: 'level008', balls: 3, music: LEVEL_MUSIC.LEVEL_1, - ball_speed: BALL_SPEED.HARD, - bg_color: Color.fromHex(LEVEL_BG.PURPLE.DARK), - level: [ + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.PURPLE.DARK), + bricksSetup: [ ['', '1', '6', '6', '6', '1', '', ''], ['', '', '1', '6', '1', '', '', ''], ['3', '3', '', '1', '', '', '3', '3'], @@ -149,9 +149,9 @@ const level009: LevelSetup = { name: 'level009', balls: 3, music: LEVEL_MUSIC.LEVEL_2, - ball_speed: BALL_SPEED.HARD, - bg_color: Color.fromHex(LEVEL_BG.YELLOW.DARK), - level: [ + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.YELLOW.DARK), + bricksSetup: [ ['', '', '', '5', '', '5', '', '5'], ['', '', '5', '', '5', '', '5', ''], ['', '5', '', '5', '', '5', '', ''], @@ -162,10 +162,10 @@ const level010: LevelSetup = { name: 'level010', balls: 3, music: LEVEL_MUSIC.LEVEL_2, - ball_speed: BALL_SPEED.HARD, - bg_color: Color.fromHex(LEVEL_BG.ORANGE.DARK), + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.ORANGE.DARK), - level: [ + bricksSetup: [ ['3', '3', '3', '5', '', '', '', '3'], ['3', '3', '5', '', '', '', '5', '3'], ['3', '5', '', '', '', '5', '3', '3'], @@ -176,9 +176,9 @@ const level011: LevelSetup = { name: 'level011', balls: 3, music: LEVEL_MUSIC.LEVEL_3, - ball_speed: BALL_SPEED.HARD, - bg_color: Color.fromHex(LEVEL_BG.ORANGE.LIGHT), - level: [ + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.ORANGE.LIGHT), + bricksSetup: [ ['5', '', '6', '6', '6', '', '4', '4'], ['5', '', '1', '', '3', '', '4', ''], ['5', '', '1', '', '3', '', '3', ''], @@ -189,30 +189,38 @@ const level012: LevelSetup = { name: 'level012', balls: 3, music: LEVEL_MUSIC.LEVEL_4, - ball_speed: BALL_SPEED.HARD, - bg_color: Color.fromHex(LEVEL_BG.RED.DARK), - level: [ + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.RED.DARK), + bricksSetup: [ ['5', '5', '', '', '', '', '5', '5'], ['', '', '6', '6', '6', '6', '', ''], ['5', '5', '', '', '', '', '5', '5'], ['', '1', '1', '1', '1', '1', '1', ''], ], }; + const level013: LevelSetup = { name: 'level013', balls: 3, music: LEVEL_MUSIC.LEVEL_5, - ball_speed: BALL_SPEED.HARD, - bg_color: Color.fromHex(LEVEL_BG.RED.LIGHT), - level: [ + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.RED.LIGHT), + bricksSetup: [ ['5', '5', '5', '5', '6', '6', '6', '6'], ['5', '6', '6', '5', '6', '5', '5', '6'], ['5', '6', '6', '5', '6', '5', '5', '6'], ['5', '5', '5', '5', '6', '6', '6', '6'], ], }; - -export const levels_setup: LevelSetup[] = [ +const level014: LevelSetup = { + name: 'level014', + balls: 3, + music: LEVEL_MUSIC.LEVEL_3, + ballSpeed: BALL_SPEED.HARD, + bgColor: Color.fromHex(LEVEL_BG.RED.LIGHT), + bricksSetup: [[ROW_4], [ROW_6], [ROW_1], [ROW_4]], +}; +export const levelsSeed: LevelSetup[] = [ level001, level002, level003, @@ -226,4 +234,5 @@ export const levels_setup: LevelSetup[] = [ level011, level012, level013, + level014, ]; diff --git a/src/templates/typescript/src/sample/managers/asset.manager.ts b/src/templates/typescript/src/sample/managers/asset.manager.ts index 233e02d..ad17327 100644 --- a/src/templates/typescript/src/sample/managers/asset.manager.ts +++ b/src/templates/typescript/src/sample/managers/asset.manager.ts @@ -17,19 +17,19 @@ class AssetManager { }; this.sounds = { - level_music_default: new Sound('/sample/music/HarmonicMinor.wav'), - level_music_1: new Sound('/sample/music/HarmonicMinor.wav'), - level_music_2: new Sound('/sample/music/Cyberpunk Moonlight Sonata.mp3'), - level_music_3: new Sound('/sample/music/cubedcanada+invaderloop.mp3'), - level_music_4: new Sound('/sample/music/S31-Futuristic-Resources.ogg'), - level_music_5: new Sound('/sample/music/ruskerdax_-_open_warfare.mp3'), + levelMusicDefault: new Sound('/sample/music/HarmonicMinor.wav'), + levelMusic1: new Sound('/sample/music/HarmonicMinor.wav'), + levelMusic2: new Sound('/sample/music/Cyberpunk Moonlight Sonata.mp3'), + levelMusic3: new Sound('/sample/music/cubedcanada+invaderloop.mp3'), + levelMusic4: new Sound('/sample/music/S31-Futuristic-Resources.ogg'), + levelMusic5: new Sound('/sample/music/ruskerdax_-_open_warfare.mp3'), // - level_completed: new Sound('/sample/sounds/win.wav'), - level_gameover: new Sound('/sample/sounds/vgdeathsound.wav'), - brick_destroy: new Sound('/sample/sounds/explosion.wav'), - brick_hit: new Sound('/sample/sounds/hit2.wav'), - ball_drop: new Sound('/sample/sounds/ball_drop.mp3'), - paddle_hit: new Sound('/sample/sounds/hit.wav'), + levelCompleted: new Sound('/sample/sounds/win.wav'), + levelGameover: new Sound('/sample/sounds/vgdeathsound.wav'), + brickDestroy: new Sound('/sample/sounds/explosion.wav'), + brickHit: new Sound('/sample/sounds/hit2.wav'), + ballDrop: new Sound('/sample/sounds/ball_drop.mp3'), + paddleHit: new Sound('/sample/sounds/hit.wav'), }; // for (const key in this.images) { diff --git a/src/templates/typescript/src/sample/managers/game.manager.ts b/src/templates/typescript/src/sample/managers/game.manager.ts index 05879f4..6118f50 100644 --- a/src/templates/typescript/src/sample/managers/game.manager.ts +++ b/src/templates/typescript/src/sample/managers/game.manager.ts @@ -11,133 +11,133 @@ import { Subject } from '../utils'; class GameManager { game!: Engine; - score_global = 0; - score_level = 0; - high_score = 0; + scoreGlobal = 0; + scoreLevel = 0; + highscore = 0; // - game_state = new Subject(); - scene_state = new Subject(); + gameState = new Subject(); + sceneState = new Subject(); constructor(engine: Engine) { this.game = engine; } init() { + this.setupListeners(); + // start engine + this.gameState.next(GAME_STATES.LOADING); + } + private setupListeners() { eventBus.on(SCENE_EVENTS.UPDATE_BALL, (balls: number) => { - uiManager.print_balls(balls); + uiManager.printBalls(balls); }); eventBus.on(SCENE_EVENTS.UPDATE_SCORE, (score: number) => { - this.score_level += score; - uiManager.print_score(this.score_level); + this.scoreLevel += score; + uiManager.printScore(this.scoreLevel); }); - this.game_state.subscribe((new_game_state: GAME_STATES) => { - console.log(`GAME_STATE [${new_game_state}]`); - switch (new_game_state) { + this.gameState.onChange((newGameState: GAME_STATES) => { + console.log(`[${newGameState}]`); + switch (newGameState) { case GAME_STATES.LOADING: assetManager.init(); levelManager.init(); audioManager.init(); uiManager.init(); - this.load_levels(); - this.activate_debug_mode(); + this.loadLevels(); + this.activateDebugMode(); this.game.start(assetManager.loader).then(() => { - this.game_state.next(GAME_STATES.READY); + this.gameState.next(GAME_STATES.READY); eventBus.emit(SCENE_STATE.READY); }); break; case GAME_STATES.READY: - uiManager.update_state(SCENE_STATE.READY); + uiManager.updateState(SCENE_STATE.READY); break; case GAME_STATES.PLAYING: break; case GAME_STATES.COMPLETED: - uiManager.update_state('DONE'); + uiManager.updateState('DONE'); break; case GAME_STATES.ERROR: break; } }); - this.scene_state.subscribe((new_scene_state: SCENE_STATE) => { - console.log( - `GAME_STATE [${this.game_state.current()}]/[${new_scene_state}]` - ); - switch (new_scene_state) { + this.sceneState.onChange((newSceneState: SCENE_STATE) => { + console.log(`[${this.gameState.current()}]/[${newSceneState}]`); + switch (newSceneState) { case SCENE_STATE.LOADING: break; case SCENE_STATE.READY: - this.score_level = this.score_global; + this.scoreLevel = this.scoreGlobal; break; case SCENE_STATE.PLAYING: break; case SCENE_STATE.PAUSED: break; case SCENE_STATE.COMPLETED: - this.score_global = this.score_level; - const new_high_core = this.score_global > this.high_score; - if (new_high_core) this.high_score = this.score_global; + this.scoreGlobal = this.scoreLevel; + const newHighscore = this.scoreGlobal > this.highscore; + if (newHighscore) this.highscore = this.scoreGlobal; - if (levelManager.levels_completed()) { - this.game_state.next(GAME_STATES.COMPLETED); + if (levelManager.levelsCompleted()) { + this.gameState.next(GAME_STATES.COMPLETED); return; } break; case SCENE_STATE.GAMEOVER: - this.score_level = this.score_global; + this.scoreLevel = this.scoreGlobal; break; case SCENE_STATE.ERROR: break; } - uiManager.update_state(new_scene_state); + uiManager.updateState(newSceneState); }); - - // start - this.game_state.next(GAME_STATES.LOADING); } - private load_levels() { + private loadLevels() { levelManager.levels.forEach((lvl) => this.game.add(lvl.name, lvl)); } - private activate_debug_mode() { + private activateDebugMode() { new DevTool(this.game); } // actions - private load_level(level: LevelScene) { - this.scene_state.next(SCENE_STATE.LOADING); + private loadLevel(level: LevelScene) { + this.sceneState.next(SCENE_STATE.LOADING); this.game.goToScene(level.name); this.game.currentScene.onInitialize(this.game); - uiManager.print_UI( + uiManager.printUI( level.name, level.balls, - this.score_global, - this.high_score + this.scoreGlobal, + this.highscore ); } - start_game() { - const initial_level = levelManager.initial(); - this.load_level(initial_level); + startGame() { + const initialLevel = levelManager.initial(); + this.loadLevel(initialLevel); } - retry_level() { - const same_level = levelManager.current(); - this.load_level(same_level); + retryLevel() { + const sameLevel = levelManager.current(); + this.loadLevel(sameLevel); } - next_level() { - const next_level: any = levelManager.next(); - if (!next_level) { + nextLevel() { + const nextLevel: any = levelManager.next(); + if (!nextLevel) { console.warn('No more levels'); return; } - this.load_level(next_level); + this.loadLevel(nextLevel); } - reset_game() { - this.score_global = 0; - this.start_game(); + resetGame() { + this.scoreGlobal = 0; + this.startGame(); } } @@ -165,6 +165,7 @@ const game = new Engine({ canvasElementId: 'main-canvas', backgroundColor: Color.Black, antialiasing: false, + fixedUpdateFps: 30, }); const gameManager = new GameManager(game); const eventBus = new EventBus(); diff --git a/src/templates/typescript/src/sample/managers/level.manager.ts b/src/templates/typescript/src/sample/managers/level.manager.ts index 12fa43c..c358cba 100644 --- a/src/templates/typescript/src/sample/managers/level.manager.ts +++ b/src/templates/typescript/src/sample/managers/level.manager.ts @@ -1,36 +1,36 @@ import { LevelScene } from '../scenes/level.scene'; import { LevelSetup } from '../models'; -import { levels_setup } from '../levels/levels'; +import { levelsSeed } from '../levels/levels'; class LevelManager { - current_level_index = 0; + currentLevelIndex = 0; levels: LevelScene[] = []; - levels_setup!: LevelSetup[]; + levelsSetup!: LevelSetup[]; - constructor(level_setup: LevelSetup[]) { - this.levels_setup = level_setup; + constructor(seeds: LevelSetup[]) { + this.levelsSetup = seeds; } init() { - levels_setup.forEach((lvl) => this.levels.push(new LevelScene(lvl))); + this.levelsSetup.forEach((lvl) => this.levels.push(new LevelScene(lvl))); } initial() { - this.current_level_index = 0; - return this.levels[this.current_level_index]; + this.currentLevelIndex = 0; + return this.levels[this.currentLevelIndex]; } next() { - const exist_next = this.levels[this.current_level_index + 1]; - if (!exist_next) return false; - this.current_level_index++; - return exist_next; + const levelExist = this.levels[this.currentLevelIndex + 1]; + if (!levelExist) return false; + this.currentLevelIndex++; + return levelExist; } current() { - return this.levels[this.current_level_index]; + return this.levels[this.currentLevelIndex]; } - levels_completed() { - return this.current_level_index >= this.levels.length - 1; + levelsCompleted() { + return this.currentLevelIndex >= this.levels.length - 1; } } -export const levelManager = new LevelManager(levels_setup); +export const levelManager = new LevelManager(levelsSeed); diff --git a/src/templates/typescript/src/sample/managers/ui.manager.ts b/src/templates/typescript/src/sample/managers/ui.manager.ts index 1cbf5dd..ef91139 100644 --- a/src/templates/typescript/src/sample/managers/ui.manager.ts +++ b/src/templates/typescript/src/sample/managers/ui.manager.ts @@ -2,57 +2,57 @@ import { SCENE_STATE } from '../models'; import { gameManager } from './game.manager'; class UIManager { - game_container: any; - btn_play: any; - btn_retry: any; - btn_next_level: any; - btn_done: any; - label_level: any; - label_score: any; - label_balls: any; - label_high_score: any; + gameContainer: any; + btnPlay: any; + btnRetry: any; + btnNextLevel: any; + btnDone: any; + labelLevel: any; + labelScore: any; + labelBalls: any; + labelHighscore: any; constructor() { - this.game_container = document.getElementById('game'); - this.btn_play = document.getElementById('btn-play'); - this.btn_retry = document.getElementById('btn-retry'); - this.btn_next_level = document.getElementById('btn-next-level'); - this.btn_done = document.getElementById('btn-done'); - this.label_level = document.getElementById('label-level'); - this.label_score = document.getElementById('label-score'); - this.label_balls = document.getElementById('label-balls'); - this.label_high_score = document.getElementById('label-high-score'); + this.gameContainer = document.getElementById('game'); + this.btnPlay = document.getElementById('btn-play'); + this.btnRetry = document.getElementById('btn-retry'); + this.btnNextLevel = document.getElementById('btn-next-level'); + this.btnDone = document.getElementById('btn-done'); + this.labelLevel = document.getElementById('label-level'); + this.labelScore = document.getElementById('label-score'); + this.labelBalls = document.getElementById('label-balls'); + this.labelHighscore = document.getElementById('label-high-score'); } init() { - this.btn_play.onclick = () => gameManager.start_game(); - this.btn_retry.onclick = () => gameManager.retry_level(); - this.btn_next_level.onclick = () => gameManager.next_level(); - this.btn_done.onclick = () => gameManager.reset_game(); + this.btnPlay.onclick = () => gameManager.startGame(); + this.btnRetry.onclick = () => gameManager.retryLevel(); + this.btnNextLevel.onclick = () => gameManager.nextLevel(); + this.btnDone.onclick = () => gameManager.resetGame(); } - print_UI(level: string, balls: number, score: number, high_score: number) { - this.print_level(level); - this.print_balls(balls); - this.print_score(score); - this.print_high_score(high_score); + printUI(level: string, balls: number, score: number, highscore: number) { + this.printLevel(level); + this.printBalls(balls); + this.printScore(score); + this.printHighscore(highscore); } - update_state(state: SCENE_STATE | 'DONE') { - this.game_container.className = state; + updateState(state: SCENE_STATE | 'DONE') { + this.gameContainer.className = state; } // - print_balls(amount: number) { - this.label_balls.innerText = '🪩'.repeat(amount); + printBalls(amount: number) { + this.labelBalls.innerText = '🪩'.repeat(amount); } - print_score(score: number) { - this.label_score.innerText = `${score}`; + printScore(score: number) { + this.labelScore.innerText = `${score}`; } - print_high_score(score: number) { - this.label_high_score.innerText = `${score}`; + printHighscore(score: number) { + this.labelHighscore.innerText = `${score}`; } - print_level(lvl: string) { - this.label_level.innerText = `${lvl}`; + printLevel(lvl: string) { + this.labelLevel.innerText = `${lvl}`; } } diff --git a/src/templates/typescript/src/sample/models.ts b/src/templates/typescript/src/sample/models.ts index 73ea826..e39ba30 100644 --- a/src/templates/typescript/src/sample/models.ts +++ b/src/templates/typescript/src/sample/models.ts @@ -51,9 +51,9 @@ export interface BrickSetup { export interface LevelSetup { balls: number; name: string; - ball_speed: Vector; - bg_color: Color; - level: any[]; + ballSpeed: Vector; + bgColor: Color; + bricksSetup: any[]; music: LEVEL_MUSIC; } export interface ParticleSetup { diff --git a/src/templates/typescript/src/sample/particles/galaxy.particles.ts b/src/templates/typescript/src/sample/particles/galaxy.particles.ts index 0a940a0..5cc3ef5 100644 --- a/src/templates/typescript/src/sample/particles/galaxy.particles.ts +++ b/src/templates/typescript/src/sample/particles/galaxy.particles.ts @@ -3,7 +3,7 @@ import { ParticleSetup } from '../models'; // https://excaliburjs.com/docs/particles // https://excaliburjs.com/particle-tester/ -export function create_galaxy(setup: ParticleSetup) { +export function createGalaxy(setup: ParticleSetup) { const { width, height, x, y } = setup; const emitter = new ParticleEmitter({ width, diff --git a/src/templates/typescript/src/sample/scenes/level.scene.ts b/src/templates/typescript/src/sample/scenes/level.scene.ts index b2a8743..d7df3ce 100644 --- a/src/templates/typescript/src/sample/scenes/level.scene.ts +++ b/src/templates/typescript/src/sample/scenes/level.scene.ts @@ -12,51 +12,43 @@ import { Brick } from '../actors/brick.actor'; import { Paddle } from '../actors/paddle.actor'; import { Ball } from '../actors/ball.actor'; import { - BrickSetup, SCENE_EVENTS, LevelSetup, SCENE_STATE, PLAYER_CONTROLS, - BRICK_TYPE, } from '../models'; import { eventBus, gameManager } from '../managers/game.manager'; import { assetManager } from '../managers/asset.manager'; -import { create_galaxy } from '../particles/galaxy.particles'; +import { createGalaxy } from '../particles/galaxy.particles'; export class LevelScene extends Scene { name: string; balls: number; - ball_speed: Vector; - bg_color: Color; - bricks_setup!: any[]; + ballSpeed: Vector; + bgColor: Color; + bricksSetup!: any[]; // - level_music!: Sound; - level_balls!: number; - level_bricks: Actor[] = []; + levelMusic!: Sound; + levelBalls!: number; + levelBricks: Actor[] = []; + state!: SCENE_STATE; - player_controls!: PLAYER_CONTROLS; + playerControls!: PLAYER_CONTROLS; constructor(setup: LevelSetup) { super(); - const { - balls, - name, - ball_speed, - bg_color, - level: bricks_setup, - music, - } = setup; + const { balls, name, ballSpeed, bgColor, bricksSetup, music } = setup; this.name = name; - this.level_balls = balls; - this.balls = this.level_balls; - this.ball_speed = ball_speed; - this.bg_color = bg_color; - this.bricks_setup = bricks_setup; - this.level_music = - assetManager.sounds[music] || assetManager.sounds.level_music_default; - this.level_music.volume = 0.1; + this.levelBalls = balls; + this.balls = this.levelBalls; + this.ballSpeed = ballSpeed; + this.bgColor = bgColor; + this.bricksSetup = bricksSetup; + this.levelMusic = + assetManager.sounds[music] || assetManager.sounds.levelMusicDefault; + this.levelMusic.volume = 0.1; - this.player_controls = PLAYER_CONTROLS.BOTH; + this.playerControls = PLAYER_CONTROLS.BOTH; } onInitialize(engine: Engine): void { this.init(engine); @@ -64,84 +56,83 @@ export class LevelScene extends Scene { init(engine: Engine) { this.reset(); - this.backgroundColor = this.bg_color; + this.backgroundColor = this.bgColor; //create game objects - const galaxy_particle = this.create_galaxy_particles(engine); - this.level_bricks = this.create_bricks(); + const galaxyParticle = this.createGalaxyParticles(engine); + this.levelBricks = this.createBricks(); - const paddle = this.create_paddle(engine); + const paddle = this.createPaddle(engine); paddle.on('postupdate', () => { - const offset_x = 10; - const hit_limits = { - screen_left: paddle.pos.x - paddle.width / 2 < 0 + offset_x, - screen_right: paddle.pos.x + paddle.width / 2 > engine.drawWidth, + const hitLimits = { + screenLeft: paddle.pos.x - paddle.width / 2 < 0, + screenRight: paddle.pos.x + paddle.width / 2 > engine.drawWidth, }; - if (hit_limits.screen_left) { - paddle.pos.x = 0 + paddle.width / 2 + offset_x; + if (hitLimits.screenLeft) { + paddle.pos.x = 0 + paddle.width / 2; } - if (hit_limits.screen_right) { - paddle.pos.x = engine.drawWidth - paddle.width / 2 - offset_x; + if (hitLimits.screenRight) { + paddle.pos.x = engine.drawWidth - paddle.width / 2; } }); - const ball = this.create_ball(engine); + const ball = this.createBall(engine); ball.on('postupdate', () => { - const hit_limits = { - screen_top: ball.pos.y - ball.height / 2 < 0, - screen_left: ball.pos.x - ball.width / 2 < 0, - screen_right: ball.pos.x + ball.width / 2 > engine.drawWidth, + const hitLimits = { + screenTop: ball.pos.y - ball.height / 2 < 0, + screenLeft: ball.pos.x - ball.width / 2 < 0, + screenRight: ball.pos.x + ball.width / 2 > engine.drawWidth, }; - if (hit_limits.screen_top) { + if (hitLimits.screenTop) { // send to bottom - ball.vel.y = ball.vel.y = ball.ball_speed.y * -1 + Math.random(); - } else if (hit_limits.screen_left) { + ball.vel.y = ball.vel.y = ball.ballSpeed.y * -1 + Math.random(); + } else if (hitLimits.screenLeft) { // send to the right - ball.vel.x = ball.ball_speed.x + Math.random(); - } else if (hit_limits.screen_right) { + ball.vel.x = ball.ballSpeed.x + Math.random(); + } else if (hitLimits.screenRight) { // send to the left - ball.vel.x = ball.ball_speed.x * -1 + Math.random(); + ball.vel.x = ball.ballSpeed.x * -1 + Math.random(); } }); // destroy bricks ball.on('collisionstart', (e: CollisionStartEvent) => { - const collide_with_brick = this.level_bricks.indexOf(e.other) > -1; - const collide_with_paddle = e.other.name === 'paddle'; - if (collide_with_brick) { + const collideWithBrick = this.levelBricks.indexOf(e.other) > -1; + const collideWithPaddle = e.other.name === 'paddle'; + if (collideWithBrick) { let brick: any = e.other; brick.life--; - eventBus.emit(SCENE_EVENTS.UPDATE_SCORE, brick.hit_score); + eventBus.emit(SCENE_EVENTS.UPDATE_SCORE, brick.hitScore); if (brick.life <= 0) { - assetManager.sounds.brick_destroy.play(0.1); + assetManager.sounds.brickDestroy.play(0.1); brick.kill(); - eventBus.emit(SCENE_EVENTS.UPDATE_SCORE, brick.destroy_score); + eventBus.emit(SCENE_EVENTS.UPDATE_SCORE, brick.destroyScore); } else { - assetManager.sounds.brick_hit.play(0.1); - brick.update_sprite(); + assetManager.sounds.brickHit.play(0.1); + brick.updateSprite(); } - if (this.level_completed()) { - this.level_music.stop(); - assetManager.sounds.level_completed.play(); + if (this.levelCompleted()) { + this.levelMusic.stop(); + assetManager.sounds.levelCompleted.play(); ball.kill(); - this.set_state(SCENE_STATE.COMPLETED); + this.setState(SCENE_STATE.COMPLETED); return; } } - if (collide_with_paddle) { - assetManager.sounds.paddle_hit.play(); + if (collideWithPaddle) { + assetManager.sounds.paddleHit.play(); } - if (!ball.is_colliding) { - ball.is_colliding = true; + if (!ball.isColliding) { + ball.isColliding = true; const intersection = e.contact.mtv.normalize(); - const hit_x = Math.abs(intersection.x) > Math.abs(intersection.y); + const hitX = Math.abs(intersection.x) > Math.abs(intersection.y); - if (hit_x) { + if (hitX) { // reverse x ball.vel.x *= -1; } else { @@ -151,19 +142,19 @@ export class LevelScene extends Scene { } }); ball.on('collisionend', () => { - ball.is_colliding = false; + ball.isColliding = false; }); // lose ball ball.on('exitviewport', () => { this.balls--; - assetManager.sounds.ball_drop.play(); + assetManager.sounds.ballDrop.play(); eventBus.emit(SCENE_EVENTS.UPDATE_BALL, this.balls); if (this.gameover()) { - this.level_music.stop(); - assetManager.sounds.level_gameover.play(); + this.levelMusic.stop(); + assetManager.sounds.levelGameover.play(); ball.kill(); - this.set_state(SCENE_STATE.GAMEOVER); + this.setState(SCENE_STATE.GAMEOVER); } else { ball.pos.x = Math.random() * engine.drawWidth; ball.pos.y = -10; @@ -173,20 +164,20 @@ export class LevelScene extends Scene { // setup player controls if ( - this.player_controls === PLAYER_CONTROLS.MOUSE || - this.player_controls === PLAYER_CONTROLS.BOTH + this.playerControls === PLAYER_CONTROLS.MOUSE || + this.playerControls === PLAYER_CONTROLS.BOTH ) { // MOUSE CONTROLS engine.input.pointers.primary.on('move', (e) => { - const can_move = this.state === SCENE_STATE.PLAYING; - if (can_move) { + const canMove = this.state === SCENE_STATE.PLAYING; + if (canMove) { paddle.pos.x = e.worldPos.x; } }); } if ( - this.player_controls === PLAYER_CONTROLS.KEYBOARD || - this.player_controls === PLAYER_CONTROLS.BOTH + this.playerControls === PLAYER_CONTROLS.KEYBOARD || + this.playerControls === PLAYER_CONTROLS.BOTH ) { // KEYBOARD CONTROLS paddle.on('preupdate', () => { @@ -213,15 +204,15 @@ export class LevelScene extends Scene { // add game objects to the scene this.add(paddle); this.add(ball); - this.add(galaxy_particle); - this.level_bricks.forEach((brick) => this.add(brick)); + this.add(galaxyParticle); + this.levelBricks.forEach((brick) => this.add(brick)); // - this.level_music.stop(); - this.level_music.play(); - this.set_state(SCENE_STATE.PLAYING); + this.levelMusic.stop(); + this.levelMusic.play(); + this.setState(SCENE_STATE.PLAYING); } - create_galaxy_particles(engine: Engine) { - return create_galaxy({ + createGalaxyParticles(engine: Engine) { + return createGalaxy({ width: engine.drawWidth, height: engine.drawHeight, x: engine.drawWidth / 2, @@ -230,32 +221,32 @@ export class LevelScene extends Scene { } reset() { this.clear(); - this.balls = this.level_balls; + this.balls = this.levelBalls; } - set_state(new_state: SCENE_STATE) { - if (this.state === new_state) return; - this.state = new_state; - gameManager.scene_state.next(new_state); + setState(newState: SCENE_STATE) { + if (this.state === newState) return; + this.state = newState; + gameManager.sceneState.next(newState); } // game objects - create_bricks() { + createBricks() { const padding = 32 + 24 / 6; - const offset_x = 32 * 2; - const offset_y = 32 + 48; - const brick_width = 32; - const brick_height = 16; + const offsetX = 32 * 2; + const offsetY = 32 + 48; + const brickWidth = 32; + const brickHeight = 16; const bricks: Actor[] = []; - this.bricks_setup.forEach((row: any[], row_index: number) => { + this.bricksSetup.forEach((row: any[], rowIndex: number) => { for (let pos = 0; pos < row.length; pos++) { if (row[pos] === '') { continue; } - const x = offset_x + pos * (brick_width + padding); - const y = offset_y + row_index * (brick_height + padding); - const brick = new Brick(x, y, brick_width, brick_height, row[pos]); + const x = offsetX + pos * (brickWidth + padding); + const y = offsetY + rowIndex * (brickHeight + padding); + const brick = new Brick(x, y, brickWidth, brickHeight, row[pos]); brick.z = 1; bricks.push(brick); } @@ -264,16 +255,16 @@ export class LevelScene extends Scene { return bricks; } - create_ball(engine: Engine) { + createBall(engine: Engine) { const x = engine.drawWidth / 2; const y = -10; const radius = 8; - const vel = this.ball_speed; + const vel = this.ballSpeed; const ball = new Ball(x, y, radius, vel); ball.z = 1; return ball; } - create_paddle(engine: Engine) { + createPaddle(engine: Engine) { const x = 100; const y = engine.drawHeight - 64; const width = 32; @@ -284,8 +275,8 @@ export class LevelScene extends Scene { return paddle; } // state - level_completed() { - return this.level_bricks.every((b) => b.isKilled()); + levelCompleted() { + return this.levelBricks.every((b) => b.isKilled()); } gameover() { return this.balls <= 0; diff --git a/src/templates/typescript/src/sample/utils.ts b/src/templates/typescript/src/sample/utils.ts index 2e250ea..675cd76 100644 --- a/src/templates/typescript/src/sample/utils.ts +++ b/src/templates/typescript/src/sample/utils.ts @@ -5,11 +5,11 @@ export class Subject { current() { return this.value; } - next(new_value: any) { - this.value = new_value; + next(newValue: any) { + this.value = newValue; this.subscribers.forEach((cb: any) => cb(this.value)); } - subscribe(callback: any) { + onChange(callback: any) { this.subscribers.add(callback); const unsubscribe = () => { @@ -23,19 +23,19 @@ export class BehaviourSubject { value: any; subscribers = new Set(); - constructor(initial_value: any) { - this.value = initial_value; + constructor(initialValue: any) { + this.value = initialValue; } current() { return this.value; } - next(new_value: any) { + next(newValue: any) { const prev = this.value; - this.value = new_value; + this.value = newValue; this.subscribers.forEach((cb: any) => cb(this.value, prev)); } - subscribe(callback: any) { + onChange(callback: any) { this.subscribers.add(callback); callback(this.value); const unsubscribe = () => {