Skip to content

Commit

Permalink
1.API文档更新,按逻辑重写了一遍
Browse files Browse the repository at this point in the history
2.删除无用文件
3.彻底完善了存档 
读档功能还有运行新游戏时的逻辑,现在即使存在缓存,但玩家点击新游戏时,不会自动恢复进度,默认从新的进度开始,自动恢复只有在读档功能那里使用。
3.Demo游戏界面清除无用cookie按钮
4.游戏Logic.js细节修改
5.Demo剧情和展示代码细节修改
6.存档界面添加新的警告信息
7.ChapterReader删除无用代码
8.FileSystem.js源码中注释的错别字更新
9.ImageEffect.js添加TODO信息
10.PlotLoader更新
11.core.js添加了全局路径变量和剧情执行到哪一行的索引变量
最后:使用此框架,一定要看Demo展示和Demo代码,如果大神级请忽略这句话
预计将此次更新设置为1.0_beta版本
  • Loading branch information
2439905184 committed Feb 5, 2021
1 parent 7544b1a commit e8bc3bd
Show file tree
Hide file tree
Showing 23 changed files with 322 additions and 540 deletions.
210 changes: 129 additions & 81 deletions API.txt.js
Original file line number Diff line number Diff line change
@@ -1,82 +1,130 @@
EasyAvg——》核心引擎类
EasyAvg.create_img 创建图片对象 参数src:图片文件地址 alt=当图片无法加载时的描述
返回Image对象
EasyAvg.create_TextBackground 创建背景对话框
参数 color颜色值
EasyAvg.scale_img 修改图片大小 参数img scale

EasyAvg.create_BackroundImg创建背景图片 参数img对象

文件系统API cookie fileSystem NOTE没有开发
FileSystem类
Array FileSystem.load_Plot_Text(url)
参数URL是文本所在的地址 这里必须在Http服务器环境下面才能运行
返回一个数据变量,使用
Dialog.setContent(array[0])来设置文本剧情
至于为什么必须是array[0]的原因
在源码chapterTest/test.js 和module/FileSystem.js可以看见原因



使用jQuery cookie插件保存进度
EasyAvg.save(mode,value) 参数 mode使用的存档api value值

基于jquery +html5 js 没有用canvas
凡是用EasyAvg框架创建的对象,一般都可以使用jquery方法,比较灵活,不会封装死了

jquery常用对象方法 NOTE一下用$表示Jquery对象 是伪代码

NOTE 为对象创建click事件,并执行function内部代码
$.click(function()
{

})
NOTE 修改对象文字,仅对文字对象有效
$.text("值")

NOTE 获取/设置'$'对象属性值
$.attr()

NOTE Dialog类
方法:
create_Dialog() //创建Dialog对象 实际是<p></p>的jquery对象
clearClicks() //清除内置计数器
setDebugLog(boolean) //设置是否显示调试信息
setFinishAction(function) //没有句子可以播放时,执行的代码
示例代码:
var Engine=new EasyAvg()
var dialog=Engine.create_Dialog()
var text=['这是一段测试对话,你因为挪动了时间,导致了不可预知的问题!','第二段','第三段']
Dialog类
dialog.setContent(text)
dialog.setDebugLog(true)



// NOTE: 后面这段代码是设置没有句子可以播放时,执行的代码
var action=function MyFinishAction()
{
console.warn("#游戏结束#,来自逻辑层代码");
}

dialog.setFinishAction(action)
//根据索引改变bgm
dialog.changeBgmAt(index,src)
NOTE Engine ->core.js内
// WARNING: 以下代码只在你在html里写了
//<audio id="bgm" controls autoplay="true" loop="true"></audio>
//的时候生效
EasyAvg——》核心引擎类 API参考文档
一、创建框架
var Engine=new EasyAvg()
//是否显示audio控件 默认为不显示 bgm.css
Engine.showBgm()
Engine.hideBgm()
Engine.changeBgm(src) //改变bgm
Engine.setBgmVolume(int) //设置bgm音量 必须在html中定义一个id为bgm的audio标签 否则无效

新增ImageEffect类 用于设置图像效果
//设置图像效果 图片对象 效果字符串
ImageEffect.setImageEffect=function(imgObj,effect)
//清除指定图像的全部图像效果
ImageEffect.clearAllEffect=function(imgObj)
/*设置图像效果的值*/ //val为字符串 可以是10%写法也可以是10px写法 具体根据效果自己测试
ImageEffect.setImageEffectValue=function(imgObj,val)
你也可以使用全局变量,方便在自定义js中调用框架里的代码
window.Engine=new EasyAvg()

二、剧情文件 文件名称规范
剧情文件名必须从1.txt开始
1.txt视为开始的章节

注意:如果要继续写新的章节,需要写成
2.txt 3.txt 4.txt 以此类推 (程序设计思路仿了nscripter)

注意事项:
1.建议单个剧情文件的大小最大不超过4MB,否则,可能无法存储和读取文件信息
因为localStorage上限空间为5MB
2.剧情文件一定要按规范写,如果乱写,有可能导致浏览器卡死

剧情文件语法规范
一、每一行就是一个段落,当玩家点击对话框之后,内部计时器数值+1,然后自动设置对话框句子
例子:
1.这是第一个段落,加载完毕,会自动设置文本
2.这时第二个段落,必须玩家点击对话框之后才会被设置到对话框上面,然后显示出来

二、进入到下一个章节(文件的语法定义)
很简单就是 > 大于号,这个符号,只需要在剧情文件的最后一行加上这个,就会告诉EasyAvg接下来要读下面一章的剧情

注意:
1.由于 > 此符号是跳转到下一章的关键字,所以在剧情文本中,不建议使用此符号,可以用中文 “大于”来代替这个符号。
也不是说完全不能用,但不能写在剧情文本的每行开头。

说明:至于为什么设计这个符号,因为我觉得这个符号容易理解,比较的形象,因为 > 这个符号看上去就是一个向右的箭头符号。
而和这个->符号又不一样>->简单,按shift次数更少,也是为了程序员考虑

三、游戏结束符号定义
<end
1.此符号将告诉EasyAvg,你的游戏完全结束了,并调用框架自带方法,返回初始界面

注意:
1.目前,EasyAvg在执行此符号的时候,没有做自动保存功能,所以,你需要在执行到这里之前,告诉没有存档的玩家赶紧存档。
不然会导致白玩游戏,无存档(如果玩家在游戏结束之前就存档了,那么请忽略这一条)
2.此问题将会在之后版本更新中解决。

一、剧情文件对于的js代码规范
说明:
1.每一行剧情文本对于一行js代码,如果对应的那一行剧情不需要执行代码,请按回车,留一个空行,这样不会执行任何自定义js代码
2.如果你的代码比较复杂,也是可以实现的,你需要把代码都写在一行里,然后每个代码结尾都得加上;
3.如果发现双引号的字符串无效,请使用单引号''
基本例子:
剧情 代码
第一行 console.log("第一行")
第二行 alert("我是第二行")
第三行,我比较复杂 function custom(){alert("这时一行复杂的代码");var x=1};custom();
> //进入下一章,一般不建议在这里写代码,会跳过的
结束运行例子
剧情
第一行
第二行
第三行
<end //你的游戏在这里结束

如果觉得文本较长,不方便查看,请善用文本编辑器的搜索功能,之后会提供在线API文档的(read the docs)
建议使用专门的代码编辑器打开此文件,因为这样对于代码,会有自动高亮和提示
以下是API参考
class 类参考
一、EasyAvg -在core.js定义 -此框架的核心
EasyAvg.create_img(src,alt)
//创建并返回一个jquery图片对象 src是图片相对路径,alt是当图片无法加载时显示的提示信息
EasyAvg.create_BackroundImg(imgObj)
//创建一个jquery图片对象,并自动添加到当前网页中,img是一个jquery图片对象
EasyAvg.create_Dialog()
//创建并返回一个文本对话框对象,需要手动添加到网页中
EasyAvg.showBgm()
//显示audio标签的控件,一般用于调试
EasyAvg.hideBgm()
//隐藏audio标签的控件,一般用于调试
EasyAvg.changeBgm()
//更改bgm 如果此方法不起作用 请使用$("#bgm").attr("src","新音频文件的相对路径")来代替此方法
二、Dialog -在core.js定义 -此框架比较重要的部分
Dialog.setContent(data_obj)
//设置对话框的内容对象,不建议手动调用此方法,建议交给EasyAvg自动设置,代码在Logic.js里面
Dialog.setLoadContent(data_obj)
//加载已经存在的游戏进度时使用的方法 同样不建议手动调用
Dialog.clearClicks()
//清空对话框内部计数器,一般在调试代码的时候使用
Dialog.setDebugLog(bool)
//设置对话框是否显示调试信息 bool是一个布尔值
Dialog.getClicks()
//获得对话框内部计数器的点击次数
Dialog.getRuntimeIndex()
//获得游戏运行状态 返回一个字符串 例子:返回"1_1" 表示第一章 第一行
Dialog.setFontSize()
//设置对话框文字大小
三、FileSystem -在FileSystem.js定义 -文件系统 单个模块
FileSystem.setDebugLog(bool)
//设置是否显示调试信息
FileSystem.load(key)
//读取单个localStorage文件信息,返回获取到的值
FileSystem.save(key,value)
//存入一个localStorage信息
FileSystem.load_Plot_Text(url)
//读取剧情文本 url是文本文件路径 此方法为异步get,不建议使用
FileSystem.set_plot_split_char(string)
//让用户自定义剧情解析器的换号判断符号 此功能未实现,请不要使用 未来可能废弃
FileSystem.clearAll()
//清空所有localStorage信息,调试用途,请勿乱用,否则可能导致玩家丢失存档信息
//如果要删除单个localStorage信息,请手动localStorage.removeItem(key)
四、方法参考(不需要创建类,直接使用,在已经通过<script>标签引入的情况下
changeScene(src)
//跳转到指定网页,src是相对路径 不建议手动调用,会导致未保存进度的玩家丢失进度,直接跳转 可以在游戏外调用
//此方法跳转,默认在当前页面跳转
如果此文档存在错误,欢迎指出并修改。
EasyAvg 目前可能存在隐藏bug,如果在开发和制作游戏的工程中,请反馈bug信息到github

如果看不懂此文档,请先去学习一下html基础和jquery基础,css最好也要学学,用于制作更美观的界面。
你不需要学到精通,有点皮毛就可以利用此框架开发游戏了。

EasyAvg 顾名思义,是简单Avg,暂时没有复杂粒子效果和其他效果。(但有图像滤镜效果)

这里提供一个网站,菜鸟教程,你可以在这里学习基础
https://www.runoob.com/

后言:
我做了个简单的语法检查器,但没有加入目前的框架中,代码在module文件夹里面。所以请遵循语法规范,否则出了问题别找我。
Demo展示的图片是noesis游戏里面的,仅用于技术展示,请勿商用。
使用此框架请遵循README.md中的信息
Demo必须运行在http服务器环境下,你可以本地使用python -m http.server进行测试
亦可以使用nginx或者其他第三方服务器
也可以把做好的游戏发布在自己网站上面,记得注明powered by EasyAvgFrameWork 并留下开源地址链接。
否则请勿使用,这是对作者的尊重,哪怕你字写小一点我都不介意的
Binary file removed croped-image.jpg
Binary file not shown.
5 changes: 4 additions & 1 deletion fullExample/Logic.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
$(function()
{
var Engine=new EasyAvg()
window.Engine=new EasyAvg()
var fileManager=new FileSystem()
function initBg()
{
var bg=$("#bg")
Expand All @@ -20,6 +21,8 @@ $(function()
$("#newGame").click(function()
{
alert("新游戏")
//点击后,自动清除缓存
localStorage.removeItem("RunTimeIndex")
changeScene("Scene/Game.html")
})
$("#loadGame").click(function()
Expand Down
36 changes: 20 additions & 16 deletions fullExample/SaveLogic.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ $(function() {
$("li").mouseenter(function()
{
$("#se")[0].play()
// $("#se")[0].load()
})

/*用于存文件*/
Expand All @@ -18,7 +17,6 @@ $(function() {
var today = date.toDateString() + " " + "NEW!"
/*用于给读档按钮的json数据*/
var data_list=[]
// var list=[]
//初始化文件系统
var fileManager = new FileSystem()
function init()
Expand Down Expand Up @@ -54,27 +52,28 @@ $(function() {
var saveState = confirm("存档吗?")
// console.log($(this));
if (saveState) {
var a = $("<img width='5%' src='img/k18.png' alt='存档截屏快照'>" + "<span>" + today + "</span>")
var a = $("<span>" + today + "</span>")
$(this).html(a)
id = $(this).attr("value")
//获得点击index
console.warn("#存档index>" + id);
//搞什么社区团购 烦死了,我只想做电脑,赚钱什么 全部都是自私的陋习
//var toSaveData=$.cookie("runTimeIndex")
console.log("新存档!");
//测试用
// var toSaveData = 1
var toSaveData=$.cookie("runTimeIndex")
alert("cookie传入>"+toSaveData)
//截屏对象
var shot_img=""
var toSaveData=localStorage.getItem("RunTimeIndex")
alert("缓存传入>"+toSaveData)
var dataObject = {
"data": toSaveData,
"date": today
"date": today,
"screenShot":"src",
}
var save_data_object = JSON.stringify(dataObject)
alert(save_data_object)
fileManager.save("saveData" + id, save_data_object)
// 自动刷新页面
location.reload()
// console.log("cookieIndex#>"+toSaveData)
}
})
$("#back").click(function() {
Expand Down Expand Up @@ -109,16 +108,21 @@ $(function() {
}
/*正确读档行为*/
else{
//加载的数据
var loaded_data=data_list[loadId-1].data
console.log("读取后正确数据>"+loaded_data);
/*更新cookie数据*/
$.cookie("runTimeIndex",loaded_data,{path:'/'})
console.log("cookie值>"+$.cookie("runTimeIndex"));
/*正确读取后自动返回*/
console.log("读取后正确数据>"+loaded_data)
//处理值
if(loaded_data!=null)
{
changeScene("Scene/Game.html")
}
//取得存档后,把信息分离 告诉加载器的逻辑应该写在哪里
//更新缓存
localStorage.setItem("RunTimeIndex",loaded_data)
var t=localStorage.getItem("RunTimeIndex")
if(t!=null)
{
changeScene("Scene/Game.html")
}
}
}
}
else
Expand Down
2 changes: 1 addition & 1 deletion fullExample/Scene/Game.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h1> EasyAvgFramework </h1>
<button id="end">返回</button>
<button id="loadGame">读档</button>
<button id="saveGame">存档</button>
<button id="clearCookie">清除自动暂存cookie</button>
<!-- <button id="clearCookie">清除自动暂存cookie</button> -->
<button id="clearClicks">清空计数器</button>
<button id="reload">刷新页面</button>
<button id="history">历史记录</button>
Expand Down
Loading

0 comments on commit e8bc3bd

Please sign in to comment.