Spaces:
Running on Zero
Running on Zero
File size: 5,792 Bytes
c670567 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 | import Phaser from 'phaser';
import * as utils from '../utils';
/**
* Game Complete UI Scene - All Levels Completed Screen
* This file is a STANDARD TEMPLATE
*
* Displayed when player completes the final level
* Returns to title screen on Enter/Space/Click
*
* TODO for AI: Customize createDOMUI() to match game theme
*/
export class GameCompleteUIScene extends Phaser.Scene {
private currentLevelKey: string | null;
private isTransitioning: boolean;
private uiContainer: Phaser.GameObjects.DOMElement | null;
private enterKey?: Phaser.Input.Keyboard.Key;
private spaceKey?: Phaser.Input.Keyboard.Key;
constructor() {
super({
key: 'GameCompleteUIScene',
});
this.currentLevelKey = null;
this.isTransitioning = false;
this.uiContainer = null;
}
/**
* Receive current level key from game scene
*/
init(data: { currentLevelKey?: string }) {
this.currentLevelKey = data.currentLevelKey || 'Level1Scene';
// Reset transition flag
this.isTransitioning = false;
}
create(): void {
// Create DOM UI
this.createDOMUI();
// Setup input controls
this.setupInputs();
}
/**
* TODO: Customize the game complete screen appearance
* This is the celebration screen for completing the entire game!
* Keep the overall structure but modify:
* - Colors and styles (typically celebratory/golden theme)
* - Animations (more elaborate than regular victory)
* - Text content
*/
createDOMUI(): void {
const uiHTML = `
<div id="game-complete-container" class="fixed top-0 left-0 w-full h-full pointer-events-none z-[1000] font-retro flex flex-col justify-center items-center bg-black bg-opacity-70">
<!-- Main Content Container -->
<div class="flex flex-col items-center justify-center gap-16 p-8 text-center pointer-events-auto">
<!-- Game Complete Title -->
<div id="game-complete-title" class="text-yellow-400 font-bold pointer-events-none animate-pulse" style="
font-size: clamp(48px, 6rem, 72px);
text-shadow: 4px 4px 0px #000000;
animation: glow 1.2s ease-in-out infinite alternate;
">GAME COMPLETE!</div>
<!-- Congratulations Text -->
<div id="congratulations-text" class="text-white font-bold pointer-events-none" style="
font-size: clamp(24px, 3rem, 36px);
text-shadow: 2px 2px 0px #000000;
line-height: 1.4;
">
Congratulations!<br>
You have completed all levels!
</div>
<!-- Press Enter Text -->
<div id="press-enter-text" class="text-green-400 font-bold pointer-events-none animate-pulse" style="
font-size: clamp(20px, 2.5rem, 32px);
text-shadow: 3px 3px 0px #000000;
animation: blink 0.8s ease-in-out infinite alternate;
">PRESS ENTER TO RETURN TO MENU</div>
</div>
<!-- Custom Animations -->
<style>
@keyframes glow {
from { transform: scale(1); }
to { transform: scale(1.15); }
}
@keyframes blink {
from { opacity: 0.3; }
to { opacity: 1; }
}
@keyframes rainbow {
0% { color: #ff0000; }
16% { color: #ff8000; }
33% { color: #ffff00; }
50% { color: #00ff00; }
66% { color: #00ffff; }
83% { color: #8000ff; }
100% { color: #ff0000; }
}
#congratulations-text {
animation: rainbow 3s linear infinite;
}
/* Mobile Responsive */
@media (max-width: 768px) {
#game-complete-container > div {
gap: 1.5rem !important;
padding: 1.5rem !important;
}
}
@media (max-height: 600px) {
#game-complete-container > div {
gap: 1rem !important;
padding: 1rem !important;
}
}
</style>
</div>
`;
// Add DOM element to scene - MUST use utils.initUIDom
this.uiContainer = utils.initUIDom(this, uiHTML);
}
/**
* Standard input setup - DO NOT MODIFY
*/
setupInputs(): void {
// Clear previous event listeners
this.input.off('pointerdown');
// Create keyboard input
this.enterKey = this.input.keyboard!.addKey(
Phaser.Input.Keyboard.KeyCodes.ENTER,
);
this.spaceKey = this.input.keyboard!.addKey(
Phaser.Input.Keyboard.KeyCodes.SPACE,
);
// Listen for mouse click events
this.input.on('pointerdown', () => this.returnToMenu());
// Listen for key events
this.enterKey.on('down', () => this.returnToMenu());
this.spaceKey.on('down', () => this.returnToMenu());
}
/**
* Return to title screen - DO NOT MODIFY structure
*/
returnToMenu(): void {
// Prevent multiple triggers
if (this.isTransitioning) return;
this.isTransitioning = true;
console.log('Returning to title screen');
// Stop current level's background music
const currentScene = this.scene.get(this.currentLevelKey!) as any;
if (currentScene?.backgroundMusic) {
currentScene.backgroundMusic.stop();
}
// Clear event listeners
this.input.off('pointerdown');
if (this.enterKey) {
this.enterKey.off('down');
}
if (this.spaceKey) {
this.spaceKey.off('down');
}
// Stop all game-related scenes
this.scene.stop('UIScene');
this.scene.stop(this.currentLevelKey!);
// Start title screen
this.scene.start('TitleScreen');
}
update(): void {
// Game Complete UI scene doesn't need special update logic
}
}
|