一个简单的页面宠物小模板
pagePetDemo
一个简单的页面宠物小模板
这个教程假设使用模板的人毫无代码基础，如果你对自己的代码能力有自信，欢迎随意对代码进行修改！
更新
2023/12/06:
- 修复了对话框bug，请重新下载模板
- 添加了发布网页（Github Page）教程
快速开始
一、下载
github下载：sixwater6H2O/pagePetDemo (github.com)
百度网盘下载：
链接：https://pan.baidu.com/s/1vEiLU9flT_iEzi0i0dWGFA
提取码：pppp
在修改模板过程中请保持各文件相对位置不变。
二、修改模板
你至少需要修改的：
img文件夹中的立绘js/conf.js中的立绘路径、菜单文字js/talk.js中的对话文本
1. 在一切的开始，你需要一台电脑，手机和平板都无法继续操作。
将下载下来的压缩包解压到任意位置，在修改模板过程中请保持各文件相对位置不变。
2. 解压后，你会得到这三个文件
img文件夹用于存放立绘js文件夹用于存放脚本代码，我们主要修改conf.js和talk.js这两个文件，其他文件可以保持原样打开
demo.html可以查看效果
3. 首先，将你的立绘图片放进img文件夹，图片格式可以是png、jpg、gif甚至tiff（但推荐使用透明底）
命名格式无要求，如果担心接下来填写图片路径的时候出问题可以按照我的方式命名替换：
attack：追逐到鼠标后的立绘chasing：追逐鼠标过程中的立绘click：被点击的立绘fall：掉落物的立绘left：向左行走时的立绘right：向右行走时的立绘pose0：初始立绘不要求全部包括这些立绘，如果不担心太单调的话，全部使用一张图也是可以的。
4. 打开js文件夹，右键点击conf.js，选择打开方式“记事本”
5. 设置立绘
找到“立绘部分”，按照你的立绘图片名在对应行的引号内填写立绘路径（如果不知道什么是路径的话，就在img/斜杠后填图片名，包括后缀），小心不要删掉引号。
如果你只用了一张图片，六项填写同样的路径即可。但是六项请一定都要填写。
6. 设置菜单
找到菜单设置部分。
按照需要设置菜单提示语、选项文本。比如可以设置是否添加“追逐鼠标”等选项。
需要多少其他选项和对应对话，在menuList的方括号中间模仿格式添加选项4567……即可，注意方括号、引号和逗号的位置。
7. 根据个人需要修改conf.js中的其他设置。
8. 同样使用记事本打开talk.js，按照提示修改对话文本
注：所有的对话如果需要换行，请在需要换行的位置插入<br>，不要直接按回车键，否则会出现问题。
简单来说，引号之间不要换行！！
引号之间不要换行！！！
引号之间不要换行！！！
三、运行
双击demo.html文件在浏览器中打开
如果前面没有问题的话，你推/OC现在就会在浏览器底部走来走去了！
四、发布网页（可选）
如果你只想单机打开网页，那这一部分可以直接跳过；如果你想发布网页供别人浏览但又不知道该怎么做，可以参考这一部分的傻瓜教程！
在这里我用的是Github Desktop + Github Page（GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.），主打的是一个0代码基础傻瓜教程，如果你稍微懂点代码，推荐还是使用git命令。
Github不需要科学上网，但如果一直打不开Github界面或者加载非常慢的话，也可以科学上网加速一下。
1. 下载Github Desktop
链接：GitHub Desktop | Simple collaboration from your desktop
2. 注册Github账号
按提示注册账号，填写的username要记住，之后你的网址会是用户名.github.io，如果对网址有要求的话要好好起名哦
跟随提示直到注册完成
3. 回到Github Desktop并登录
4. 创建仓库
在网页版Github中登录账号并点击右上角头像创建仓库
填写仓库信息，仓库名必须填用户名.github.io，剩下的维持默认就行，点击创建。
5. 配置Github Page
创建完成后自动进入仓库，也可以从Github主页左侧或者右上角头像中进入仓库。现在来开启Github Page服务。
在Quick setup中选择
Set up in Desktop，等待自动打开Github Desktop软件。
选择本地保存地址，点击Clone保存
注：这一步也可以选择直接在Desktop中克隆仓库，二选一，能克隆到本地即可
在本地文件夹中找到刚刚的保存地址，把你修改过的页面宠物模板复制进去，并把
demo.html重命名为index.html
回到Desktop中，可以看到左侧Chages栏出现了很多文件，在Summary中随便填点什么，点击
Commit to main提交
然后点击右侧
publish branch
静静地等待上传
浏览器访问
用户名.github.io，多刷新几遍浏览器，如果前面没有问题的话页面很快就会出现了！
好了！现在你可以把你的页面宠物网址
用户名.github.io分享出去供大家浏览了！手机上也可以浏览哦！
五、可能的问题
Q1：为什么不显示立绘/对话/菜单？
A1：原因多种多样，需要具体问题具体分析，但简而言之，有bug。
可能是修改的时候不小心动了什么代码，可能是填写的有什么问题，可以在浏览器界面按下f12打开控制台查看报错信息。实在不行可以还原成初始版本，重新来一次（？
Q2：发布/修改网页内容后，为什么界面没有发生改变？
A2：可能是因为浏览器缓存了之前的界面内容，可以等一段时间多刷新几遍，或者清除缓存后重启浏览器。总之过一会儿就好了！
Q3：我想做好几个页面宠物，需要每次都申请新的github账号吗？
A3：不需要！如果想添加新的页宠界面，可以在本地仓库目录里新建文件夹，将对应的index.html、js文件夹、img文件夹放进文件夹中，类似这样：
然后重复配置Github Page步骤的第四步提交更新，新的界面可以通过用户名.github.io/文件夹名/访问。
如果显示找不到界面的话多刷新几次等一等就好了。
注意：必须有index.html文件，对应的文件夹名才能被访问
Q4：在手机/平板上访问网页的时候背景图片显示不全/图片大小不合适？
A4：这是因为模板设置中的图片大小使用的都是绝对大小，意思是在电脑和在其他设备浏览时的大小都是一样的，在电脑屏幕上正好，在手机屏幕中可能就不太合适了。可以选择寻找一个所有设备都适合的大小，也可以自行检索图片大小设置的其他办法。
Q5：我可以对这个demo进行任意修改吗？我有想添加的其他功能。
A6：请随意！本人学艺不精可能会有各种bug，欢迎各位佬随意修改使用！但请不要拿来商用（真的有商用的价值吗）
Q6：你做这个的目的是什么？你的背后是什么人？（？）
A6：表面上的目的：搓个小玩具给大家玩。
实际上的目的：如果大家觉得我整了个好活的话能不能来看看我们《PPPPPP》（图穷匕见）。是被腰斩了的少年Jump漫画，70话完结，很好看的能不能看在孩子努力了的份上有空看我们pp一眼……（卑微）如果能给孩子做点pp饭的话那您将是我一生的恩人……（轻轻跪下）
一个视频了解我们6个p：
BV1ee4y1L7fR
【【公式】『PPPPPP』12月21日―ピアノの天才「音上」の家に七つ子が誕生した【JC最新5巻発売中】-哔哩哔哩】 https://b23.tv/rNBc5tl
