Paglikha ng isang Javascript-based Interactive Storytelling Platform

{
 "start": {
 "text": [
 "You stand at the edge of a dark forest.",
 "The wind carries a faint whisper."
 ],
 "tags": ["outdoor", "moody"],
 "choices": [
 { "text": "Enter the forest", "target": "forest_path",
 "effect": "playerStats.fear++" },
 { "text": "Turn back to the village", "target": "village_square",
 "condition": "player.hasCompass" }
 ]
 }
}

Pamamahala sa Estado

Ang mga variable ng Estado ay nakatira sa isang reactitive store. Gamitin ang isang simpleng bagay na may mga gotter/setter at isang change notification system kaya ang UI ay awtomatikong nag-rereproduce sa mga update ng estado. Halimbawa:

class StoryState {
 constructor(initialData) {
 this._state = { ...initialData };
 this._listeners = [];
 }
 get(key) { return this._state[key]; }
 set(key, value) {
 this._state[key] = value;
 this._notify();
 }
 subscribe(fn) { this._listeners.push(fn); }
 _notify() { this._listeners.forEach(fn => fn(this._state)); }
}

Ang pattern na ito decouples speciation logic mula sa DOM, na ginagawang mature ang plataporma at madaling mapalawak.

Pagtatayo ng JavaScript Mebrain

Ang makina ay nagbabasa ng mga impormasyon tungkol sa kuwento (na karaniwang inangkat o nakuha bilang JSON) at kinokontrol ang nabigasyon.

Pagbuhat at Pagbibigay ng Isang Node

function renderNode(nodeId, storyData, state) {
 const node = storyData[nodeId];
 if (!node) throw new Error(`Node ${nodeId} not found`);

 // Run hooks before rendering
 if (node.onEnter) node.onEnter(state);

 const container = document.getElementById('story-content');
 container.innerHTML = ''; // Clear previous content

 // Render text paragraphs
 node.text.forEach(para => {
 const p = document.createElement('p');
 p.textContent = para; // Use a safe renderer for markdown
 container.appendChild(p);
 });

 // Render choices, filtered by conditions
 const choicesContainer = document.getElementById('choices');
 choicesContainer.innerHTML = '';
 node.choices.forEach(choice => {
 if (choice.condition && !evaluateCondition(choice.condition, state)) return;
 const btn = document.createElement('button');
 btn.textContent = choice.text;
 btn.addEventListener('click', () => {
 if (choice.effect) applyEffect(choice.effect, state);
 renderNode(choice.target, storyData, state);
 });
 choicesContainer.appendChild(btn);
 });

 // Run exit hooks
 if (node.onLeave) node.onLeave(state);
}

Pag - aalis ng Kalagayan

Ang mga kondisyon ay maaaring simpleng mga strando gaya ng na sinuri sa pamamagitan ng isang ligtas na ekspresyong parser (naiwasan ). Gamitin ang isang magaang na ekspresyong pang-eksperimento gaya ng expr-eval[ o isulat ang isang reconstitutional par na nagbibigay lamang ng iba't ibang mga pag-ibang mga pag-spectyup at mga pangunahing operator.

Pagliligtas at Pagbuhat ng mga Pagsulong

Gamitin upang manatili sa estado (kabilang ang mga binibisitang node, kasalukuyang node, at variables). Maglaan ng isang tungkuling autosave na nag-aanunsyo pagkatapos ng bawat node transition, at isang manwal na pang-ligtas/based UI.

function save(state, nodeId) {
 localStorage.setItem('story_save', JSON.stringify({
 state: state._state,
 current: nodeId,
 timestamp: Date.now()
 }));
}

function load() {
 const raw = localStorage.getItem('story_save');
 if (!raw) return null;
 return JSON.parse(raw);
}

Para sa mas malalaking kuwento, isaalang - alang ang IndexedDB upang makatipid ng mga ari - ariang binary tulad ng mga imahen o mga piraso ng audio.

Pag - unawa sa User na Karanasan

Isang saligang teksto na physton calftones interfaces, subalit inaasahan ng makabagong mga manonood ang multimedia, tumutugong disenyo, at madaling makuha.

Paglipat ng Media

• Mga Image: Gamitin tagong na kumukupas sa pamamagitan ng CSS transitions. Mga larawang inline sa loob ng teksto ng kuwento gamit ang isang dibuhong katulad ng na pinarsing ng tagasalin.
• Audio: Background university loops and sound effects na inumpisahan ng witch. Gamitin ang Web Audio API para sa mababang glunas ng playback at control ng volume.
• [[Talaksan: Maikling cinematic clips para sa mga susing eksena. Sa pamamagitan ng mga kontrol o autoplay (sa pamamagitan ng user acting acting confiction).

Responsibilidad at Madaling Makakuhang UI

• Gumamit ng semantikong HTML: , para sa mga pagpipilian, para sa sedebar imbentaryo o log.
• Idagdag ang ARIA attributes: para sa dynamic text updates, sa mga piling lalagyan.
• Suportadong nabigasyon sa keyboard: Tala sa pamamagitan ng mga pagpipilian, Pasok sa pagpili. di-malinaw na pokus sa mga nakatagong pagpipilian.
• Ang tema ng Match system ay may CSS media queries.

Komponenteng Arkitektura (Opsiyonal)

Kung plano mong sukatin ang iyong sarili, isaalang - alang ang isang balangkas ng pananaw na gaya ng reaksyon o Vue. Pinasisimple nila ang pangangasiwa ng estado at muling pag - aabuloy. Ang isang finite state machine[ aklatan (e.g., XState[) ay maaaring magmodelo ng masalimuot na mga grap ng kuwento sa mga guwardiya, kilos, at magkakaagapay na mga estado.

test('renderNode shows correct text for start node', () => {
 document.body.innerHTML = `
`;
 const storyData = {
 start: { text: ['Hello'], choices: [] }
 };
 const state = new StoryState({});
 renderNode('start', storyData, state);
 expect(document.getElementById('story-content').innerHTML).toContain('Hello');
});