lovegame/script.js at main · craig7351/lovegame · GitHub

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
// Access global window.gameScript

class GameEngine {
    constructor() {
        this.currentSceneId = "01";
        this.currentBgm = "";
        this.elements = {
            gameContainer: document.getElementById('game-container'),
            background: document.getElementById('background-layer'),
            character: document.getElementById('character-layer'),
            dialogueBox: document.getElementById('dialogue-box'),
            speakerName: document.getElementById('speaker-name'),
            dialogueText: document.getElementById('dialogue-text'),
            choicesContainer: document.getElementById('choices-container'),
            mainMenu: document.getElementById('main-menu'),
            startBtn: document.getElementById('start-btn'),
            bgmPlayer: document.getElementById('bgm-player')
        };

        this.init();
    }

    init() {
        if (this.elements.startBtn) {
            this.elements.startBtn.addEventListener('click', () => this.startGame());
        } else {
            console.error("Start button not found!");
        }
    }

    playMusic(src) {
        if (!src) return;
        if (this.currentBgm === src) return; // Same song, don't restart

        if (this.elements.bgmPlayer) {
            this.elements.bgmPlayer.src = src;
            this.elements.bgmPlayer.volume = 0.5;
            this.elements.bgmPlayer.play().catch(e => {
                console.warn("Autoplay prevented:", e);
            });
            this.currentBgm = src;
        }
    }

    startGame() {
        if (this.elements.mainMenu) {
            this.elements.mainMenu.style.display = 'none';
        }
        this.loadScene(this.currentSceneId);
    }

    loadScene(sceneId) {
        const script = window.gameScript;
        if (!script) {
            console.error("Game script not loaded!");
            return;
        }

        const sceneData = script.find(scene => scene.id === sceneId);
        if (!sceneData) {
            console.error("Scene not found:", sceneId);
            return;
        }

        // 1. Update Image
        if (sceneData.image) {
            this.elements.background.style.backgroundImage = `url('${sceneData.image}')`;
            this.elements.character.style.backgroundImage = `url('${sceneData.image}')`;
            this.elements.character.style.opacity = 1;

            // 2. Play BGM
            if (sceneData.bgm) {
                this.playMusic(sceneData.bgm);
            }
        }

        // 3. Show Text
        this.showDialogue(sceneData.speaker, sceneData.text, () => {
            // 4. Show Choices
            this.showChoices(sceneData.choices);
        });
    }

    showDialogue(speaker, text, callback) {
        this.elements.dialogueBox.classList.add('visible');
        this.elements.speakerName.textContent = speaker;
        this.elements.dialogueText.textContent = "";

        let i = 0;
        const speed = 50;

        const typeWriter = () => {
            if (i < text.length) {
                this.elements.dialogueText.textContent += text.charAt(i);
                i++;
                setTimeout(typeWriter, speed);
            } else {
                if (callback) callback();
            }
        };

        typeWriter();
    }

    showChoices(choices) {
        this.elements.choicesContainer.innerHTML = '';
        if (!choices || choices.length === 0) return;

        this.elements.choicesContainer.style.display = 'flex';

        choices.forEach(choice => {
            const btn = document.createElement('button');
            btn.className = 'choice-btn fade-in';
            btn.textContent = choice.text;
            btn.addEventListener('click', () => {
                this.elements.choicesContainer.style.display = 'none';
                this.loadScene(choice.nextScene);
            });
            this.elements.choicesContainer.appendChild(btn);
        });
    }
}

window.onload = () => {
    const game = new GameEngine();
};