Tạo một nền tảng kể chuyện tương tác dựa trên Javascript

• Bộ nhận diện độc đáo (v., , .
• ngữ cảnh: Một dãy các chuỗi hoặc đánh dấu nội dung (có gắn với một bộ chuyển đổi HTML an toàn).
• Các phân loại: một dãy tùy chọn, mỗi nút đích, điều kiện tùy chọn và hiệu ứng tùy chọn trên tình trạng.
• thẻ: Siêu âm cho bộ lọc, khi nó chuyển động, hay âm thanh.
• [FLT: 0] VàoEnter / trên leave: Hooks để chạy JavaScript tùy ý (âm thanh, thay đổi ảnh, cập nhật hình ảnh).

{
 "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" }
 ]
 }
}

Quản lý trạng thái

Biến số tiểu bang trực tiếp trong cửa hàng phản ứng. Hãy dùng một đối tượng đơn giản với các nhà thu/ sửa đổi và một hệ thống thông báo thay đổi, vì vậy UI tự động phục hồi các bản cập nhật trạng thái. Ví dụ:

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)); }
}

Mô hình này giải thích logic từ điện thoại của DOP, làm cho nền tảng có thể kiểm tra và dễ dàng mở rộng.

Xây dựng máy JavaScript

Máy đọc dữ liệu câu chuyện (thường được nhập hoặc lấy như JSON) và điều khiển việc định vị.

Đang nạp và vẽ một nút

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);
}

Độ phân giải

Điều kiện có thể là chuỗi đơn giản như đánh giá [FLT:] qua một biểu thức an toàn phân tích (không có [FLT: 6). Hãy dùng biểu thức nhỏ như [FLT: 0] [FLT: 0] [FLT: 1] hoặc viết một phân tích phân tích phân tích phân tích phân tách phân cách lại, mà chỉ cho phép xem biến và các nhà điều hành cơ bản. Đừng bao giờ cho tác giả một mã hoá câu chuyện tùy ý thực hiện trừ khi hộp cát được cất giữ.

Cứu và nạp tiến bộ

Dùng để bền bỉ tình trạng (bao gồm các nút, nút hiện thời và biến). Cung cấp một chức năng tự động phát điện sau mỗi nút chuyển tiếp, và một hướng dẫn lưu/ nạp 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);
}

Đối với những câu chuyện lớn hơn, hãy xem phụ lục DB để lưu tài sản nhị phân như hình ảnh hoặc mảnh âm thanh.

Làm tăng thêm kinh nghiệm người dùng

Một giao diện văn bản cơ bản và nút bấm của máy tính, nhưng khán giả hiện đại mong đợi đa phương tiện, thiết kế đáp ứng và khả năng truy cập.

Hợp nhất phương tiện