Skip to content

AXWV/Aweb-plot-of-a-play

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
README.md
README.md
 
 
index.json
index.json
 
 
index.php
index.php
 
 
index1.php
index1.php
 
 
pt.php
pt.php
 
 
sy.json
sy.json
 
 

Repository files navigation

Aweb-plot-of-a-play

建议index.php适合写为个人主页 index1.php适合做一个游戏首页(有

一点点
借鉴蔚蓝档案) pt.php适合写剧情 戳这访问https://xw.ct.ws/

JSON驱动的网页生成系统

这是一个基于JSON配置文件的轻量级网页生成系统，只需编辑index.json文件即可创建完整的网页，无需编写HTML/CSS代码。系统通过PHP动态解析JSON配置并生成美观的响应式网页。

功能特点

  • 完全JSON驱动：所有内容通过JSON文件配置
  • 响应式设计：适配各种屏幕尺寸
  • 多种内容类型：标题、段落、按钮等
  • 灵活布局：支持左、中、右三种对齐方式
  • 背景效果：支持固定、平铺和滚动背景
  • 视觉增强：圆角设计、阴影效果、平滑过渡
  • 易于扩展：通过修改JSON即可更新内容

文件结构

├── index.php        # 主程序文件
├── index.json       # 网页内容配置文件
└── readme.md        # 使用说明文档

快速开始

  1. 将index.php和index.json放在同一目录下
  2. 编辑index.json文件配置网页内容
  3. 通过浏览器访问index.php

JSON配置详解

基本结构

{
  "ztt1": "页面标题",
  "bjj1": "背景图片URL",
  "bjz1": "背景效果",
  "键名": "内容",
  ...
}

特殊键值

键前缀 功能描述 示例值
ztt1 页面标题 "我的网站"
bjj JPG背景图片 "https://example.com/bg.jpg"
bjp PNG背景图片 "https://example.com/bg.png"
bjz 背景效果(n/f/l) "l" (滚动背景)
h1-h6 1-6级标题 "主标题"
p 普通段落 "这是一个段落"
za 按钮 "点击这里"
a 按钮链接地址(不显示) "page.php"

对齐方式

在键名末尾添加对齐标识符：

  • l：左对齐（默认）
  • c：居中
  • r：右对齐

示例：

  • "h1c": "居中标题" → 居中显示的一级标题
  • "p2r": "右对齐段落" → 右对齐的第二个段落
  • "za1c": "居中按钮" → 居中显示的按钮

背景效果

通过bjz键设置背景效果：

  • n：固定背景（不随页面滚动）
  • f：垂直平铺背景
  • l：缓慢滚动背景

完整配置示例

{
  "ztt1": "创意空间",
  "bjj1": "https://images.unsplash.com/photo-1505506874110-6a7a69069a08",
  "bjz1": "l",
  
  "h1c": "欢迎来到创意空间",
  "p1": "这里是一个充满灵感的地方，探索无限创意可能。",
  
  "h2c": "精选项目",
  "p2l": "网页设计 | 品牌视觉 | 用户体验",
  
  "za1c": "查看设计作品",
  "a1": "design.php",
  
  "za2c": "浏览摄影集",
  "a2": "photography.php",
  
  "za3c": "探索代码项目",
  "a3": "coding.php",
  
  "h3c": "关于我们",
  "p3": "我们是一支充满激情的创意团队，专注于打造独特而有效的视觉体验。",
  
  "p4c": "联系我们开启创意之旅",
  "za4c": "发送咨询邮件",
  "a4": "mailto:[email protected]",
  
  "note": "本页面使用JSON驱动的内容管理系统"
}

视觉效果

  1. 内容容器：

    • 圆角设计（15px）
    • 半透明白色背景（85%不透明度）
    • 柔和阴影效果
    • 最大宽度800px，居中显示

  2. 内容块：

    • 圆角设计（8px）
    • 悬停时轻微背景变化
    • 自适应间距

  3. 按钮：

    • 圆角设计（30px）
    • 蓝色渐变背景
    • 悬停时上浮效果
    • 平滑过渡动画

  4. 背景效果：

    • 滚动背景：60秒完成一次从上到下的滚动循环
    • 固定背景：随页面滚动而固定
    • 平铺背景：垂直方向重复平铺

高级技巧

  1. 组合使用对齐方式：

    "h1c": "居中主标题",
"p1r": "右对齐段落",
"za1l": "左对齐按钮"

  2. 使用高质量背景图：

    "bjj1": "https://source.unsplash.com/1600x900/?nature,water"

  3. 创建多个按钮：

    "za1": "按钮1",
"a1": "page1.php",
"za2": "按钮2",
"a2": "page2.php"

  4. 添加联系信息：

    "zaemail": "发送邮件",
"aemail": "mailto:[email protected]"

自定义样式

要修改页面样式，编辑index.php中的CSS部分：

/* 修改内容容器样式 */
.content-container {
    background-color: rgba(240, 240, 240, 0.9); /* 背景色 */
    border-radius: 20px; /* 圆角大小 */
    max-width: 900px; /* 最大宽度 */
}

/* 修改按钮样式 */
.button {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* 渐变背景 */
    color: #fff; /* 文字颜色 */
    padding: 15px 30px; /* 内边距 */
}

/* 修改背景动画速度 */
@keyframes scrollBackground {
    0% { background-position: center top; }
    100% { background-position: center bottom; }
}

最佳实践

  1. 内容组织：

    • 按逻辑顺序排列内容
    • 使用标题创建内容层次
    • 合理使用对齐方式增强布局

  2. 性能优化：

    • 压缩背景图片（<500KB）
    • 使用CDN托管大图
    • 减少不必要的内容块

  3. 可访问性：

    • 为按钮提供明确的文字
    • 确保足够的颜色对比度
    • 为图片添加备选文本（通过JSON键名）

  4. SEO优化：

    • 在ztt1中使用关键词
    • 在段落中包含描述性内容
    • 使用语义化的标题结构

注意事项

  1. JSON文件必须使用UTF-8编码
  2. 键名不能重复（如两个"h1"）
  3. 按钮(za)必须对应链接(a)
  4. 背景图片URL需使用绝对路径
  5. 对齐标识符必须是键名最后一个字符

常见问题

Q：背景图片不显示怎么办？ A：检查图片URL是否正确且可公开访问，确保URL使用双引号包裹

Q：按钮链接无效怎么办？ A：确保每个za键都有对应的a键，且键名匹配（如za1对应a1）

Q：如何添加多行内容？ A：在JSON值中使用\n换行符，或在PHP中处理为<br>标签

Q：能否添加自定义CSS？ A：可以，直接修改index.php中的<style>部分

系统优势

  1. 零前端知识：无需HTML/CSS技能即可创建网页
  2. 快速迭代：修改JSON文件即时更新网站
  3. 轻量高效：单个PHP文件，无数据库依赖
  4. 完全可控：所有内容集中管理
  5. 响应式设计：自动适配桌面和移动设备

这个系统非常适合创建个人主页、作品集展示、活动页面等简单网站，通过JSON配置即可快速部署专业外观的网页。

横屏互动故事系统 - README

系统概述

这是一个基于PHP和JavaScript开发的横屏互动故事系统，专为移动设备横屏体验优化。系统通过JSON配置文件加载故事内容，支持角色动态切换、对话推进、背景变化等功能，提供沉浸式的故事体验。

主要功能

  1. 横屏适配：自动检测设备方向，提示用户切换至横屏模式
  2. 故事加载：从本地或远程JSON文件加载故事内容
  3. 角色展示：支持最多5个角色动态切换表情/状态
  4. 对话系统：打字机效果的对话展示
  5. 进度指示：直观的进度点显示
  6. 背景切换：根据故事进度动态更换背景
  7. 结束选项：故事结束后提供多个选择分支
  8. 交互反馈：点击特效和动画效果增强体验

文件结构

├── pt.php             # 主程序文件
├── P1.json            # 主配置JSON
├── T1.json            # 故事内容JSON
├── img/               # 图片资源目录
│   ├── 1.png
│   ├── 2.png
│   ├── 3.png
│   ├── 4.png
│   ├── 5.png
│   ├── bj1.png
│   └── 背景2.jpg
└── README.md          # 说明文档

使用说明

1. 主配置 (P1.json)

{
  "ztt1": "故事标题",
  "z2": "",
  "zt2": "欢迎语",
  "zt3": "开始按钮文本",
  "zu2": "故事入口URL"
}

2. 故事内容 (T1.json)

{
  "ta": ["角色1图片1", "角色1图片2"],
  "tb": ["角色2图片1"],
  "tc": ["角色3图片1", "角色3图片2", "角色3图片3"],
  "td": ["角色4图片1", "角色4图片2"],
  "te": ["角色5图片1"],
  "tbgs": ["背景1", "背景2"],
  "tt": ["对话1", "对话2"],
  "tx": ["选项1文本", "选项2文本"],
  "txt": ["选项1跳转URL", "选项2跳转URL"],
  "ttx": ["提示1", "提示2"]
}

3. 访问方式

  • 主界面：pt.php?p=1&t=1
  • 故事界面：pt.php?p=1&t=1&page=story&s=0
  • 三方故事源：pt.php?sss=http://example.com/story.json

技术实现

核心逻辑

  1. PHP处理：

    • 安全过滤URL参数
    • 加载本地JSON文件
    • 支持远程故事源(CURL获取)

  2. 前端交互：

    • 点击屏幕推进故事进度
    • 角色图片轮换
    • 打字机效果对话
    • 背景切换
    • 进度指示器更新

  3. 响应式设计：

    • 横屏检测与提示
    • 自适应布局
    • 触摸优化

关键算法

// 角色图片更新算法
const imgIndex = Math.floor(clickCount / 2) % imageArray.length;

// 对话更新逻辑
if(clickCount % 2 === 0) {
    // 打字机效果
} else {
    // 完整显示
}

// 背景轮换
const bgIndex = clickCount % backgroundArray.length;

开发说明

依赖项

  • PHP 7.0+
  • Web服务器(Apache/Nginx)
  • 现代浏览器(Chrome/Firefox/Safari)

扩展功能建议

  1. 添加用户进度保存功能
  2. 实现音效支持
  3. 增加多语言支持
  4. 开发故事编辑器
  5. 添加成就系统

示例截图

无

使用提示

  1. 确保所有图片路径正确
  2. JSON文件使用UTF-8编码
  3. 三方故事源需支持CORS或使用代理
  4. 对于复杂故事，合理规划角色图片序列

这个系统非常适合创建视觉小说、互动故事和教育应用。通过简单的JSON配置，您可以快速创建丰富的互动故事体验。

横屏互动故事系统 - README

系统概述

这是一个基于PHP和JavaScript开发的横屏互动故事系统，专为移动设备横屏体验优化。系统通过JSON配置文件加载故事内容，支持角色动态切换、对话推进、背景变化等功能，提供沉浸式的故事体验。

主要功能

  1. 横屏适配：自动检测设备方向，提示用户切换至横屏模式
  2. 故事加载：从本地或远程JSON文件加载故事内容
  3. 角色展示：支持最多5个角色动态切换表情/状态
  4. 对话系统：打字机效果的对话展示
  5. 进度指示：直观的进度点显示
  6. 背景切换：根据故事进度动态更换背景
  7. 结束选项：故事结束后提供多个选择分支
  8. 交互反馈：点击特效和动画效果增强体验

文件结构

├── pt.php             # 主程序文件
├── P1.json            # 主配置JSON
├── T1.json            # 故事内容JSON
├── img/               # 图片资源目录
│   ├── 1.png
│   ├── 2.png
│   ├── 3.png
│   ├── 4.png
│   ├── 5.png
│   ├── bj1.png
│   └── 背景2.jpg
└── README.md          # 说明文档

使用说明

1. 主配置 (P1.json)

{
  "ztt1": "故事标题",
  "z2": "",
  "zt2": "欢迎语",
  "zt3": "开始按钮文本",
  "zu2": "故事入口URL"
}

2. 故事内容 (T1.json)

{
  "ta": ["角色1图片1", "角色1图片2"],
  "tb": ["角色2图片1"],
  "tc": ["角色3图片1", "角色3图片2", "角色3图片3"],
  "td": ["角色4图片1", "角色4图片2"],
  "te": ["角色5图片1"],
  "tbgs": ["背景1", "背景2"],
  "tt": ["对话1", "对话2"],
  "tx": ["选项1文本", "选项2文本"],
  "txt": ["选项1跳转URL", "选项2跳转URL"],
  "ttx": ["提示1", "提示2"]
}

3. 访问方式

  • 主界面：pt.php?p=1&t=1
  • 故事界面：pt.php?p=1&t=1&page=story&s=0
  • 三方故事源：pt.php?sss=http://example.com/story.json

技术实现

核心逻辑

  1. PHP处理：

    • 安全过滤URL参数
    • 加载本地JSON文件
    • 支持远程故事源(CURL获取)

  2. 前端交互：

    • 点击屏幕推进故事进度
    • 角色图片轮换
    • 打字机效果对话
    • 背景切换
    • 进度指示器更新

  3. 响应式设计：

    • 横屏检测与提示
    • 自适应布局
    • 触摸优化

关键算法

// 角色图片更新算法
const imgIndex = Math.floor(clickCount / 2) % imageArray.length;

// 对话更新逻辑
if(clickCount % 2 === 0) {
    // 打字机效果
} else {
    // 完整显示
}

// 背景轮换
const bgIndex = clickCount % backgroundArray.length;

开发说明

依赖项

  • PHP 7.0+
  • Web服务器(Apache/Nginx)
  • 现代浏览器(Chrome/Firefox/Safari)

扩展功能建议

  1. 添加用户进度保存功能
  2. 实现音效支持
  3. 增加多语言支持
  4. 开发故事编辑器
  5. 添加成就系统

示例截图

无

使用提示

  1. 确保所有图片路径正确
  2. JSON文件使用UTF-8编码
  3. 三方故事源需支持CORS或使用代理
  4. 对于复杂故事，合理规划角色图片序列

这个系统非常适合创建视觉小说、互动故事和教育应用。通过简单的JSON配置，您可以快速创建丰富的互动故事体验。

About

AXWV开发网页版剧情播放器

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages