代码有点乱,,,哈哈哈
灵感来自文字游戏Lifeline,实际上我改过很多个版本!
这个版本是修改自最近折腾的 HTML - Trial Error (https://i.iblackly.com/tryerr/index.html)
使用方法:
复制以下代码到博客后台-页面定制-博客侧边栏公告 即可
支持的语法:
1 /* :: Start , 跳跃点 */ 2 :: Start 3 4 /* >img img_name.jpg 图 */ 5 >img img.jpg 6 7 /* 文本 */ 8 开头是文本 9 10 /* >bu , 单个按钮*/ 11 >but 按钮文本|jumpname 12 >but (.+)|(.+) 13 14 15 /* >buts , 两个按钮 */ 16 >buts 按钮文本|jumpname 按钮2文本|jump2name 17 >buts (.+)|(.+) (.+)|(.+) 18 19 /* >link */ 20 >link 超链接|linkefilename.html 21 >link (.+)|(.+) 22 23 /* >dlink */ 24 >dlink Start 25 26 27 /* >code */ 28 >code waytag 29 <html> 30 <head> 31 <title>Try Err</title> 32 </head> 33 <body> 34 <p>Try Err 0000</p> 35 </body> 36 </html> 37 >/code waytag 38 39 (?<=>code waytag )(.* )+(?=>/code waytag) 40 GetPoint[0].match("(?<=>code "+CodesType[1]+" )(.* )+(?=>/code "+CodesType[1]+")");
逻辑:
大致如下
读取 id StoryData 内的指定内容
各种判断,各种分割之后 输出到指定的位置
最重要的时故事要好~
可惜不会写故事~~~~~
舞台
1 <h1>测试公告栏代码</h1> 2 3 <!-- 舞台 --> 4 <div id="Story" onclick="Clickd()"></div> 5 6 <!-- 故事数据 --> 7 <div id="StoryData" hidden> 8 :: Version 9 cnblog 文字互动 10 2019年10月26日23点29分 11 >but 开始|Start 12 13 :: Start 14 这是一个cnblog的文字互动插件? 15 灵感来自以前很火的文字游戏LifeLine 16 文字游戏有他的魅力 17 能让人在脑海中构建出一个只属于自己的世界 18 >buts 唔,有啥功能?|youshagongneng 在哪里下载?|zainalixiazai 19 20 :: youshagongneng 21 可以输出文字! 22 哈哈哈~开玩笑的~ 23 你想输出啥都行 24 只需要就该js就行了~ 25 >but 好吧,哪里下载?|zainalixiazai 26 27 :: zainalixiazai 28 >delay 2s xiazaiyemian 29 30 :: xiazaiyemian 31 >link 点击前往下载详情页面|https://www.cnblogs.com/iblackly/p/11745769.html 32 >but 信息|Version 33 34 </div> 35 36 <!-- 动画舞台--> 37 <wait><div class="wait la-2x"><div></div><div></div></div></wait>
脚本
1 <!-- 脚本 --> 2 <script> 3 /* 载入故事然后开始 */ 4 window.onload = function(){ 5 /* 开始跳跃点名 */ 6 StartName = "Start"; 7 /* 感觉大部分时间都在想如何起个好听的名 = =! */ 8 SayNumber = 0; 9 /* 故事位置 */ 10 StoryData = document.getElementById("StoryData").firstChild.nodeValue; 11 /* 启动ilearning */ 12 ilearning(StartName); 13 } 14 15 16 /* ilearning */ 17 function ilearning(GO){ 18 console.log(GO); 19 /* 关闭延时动画 */ 20 //Wait('off'); 21 22 /* 跳转点内容 */ 23 GetPoint = StoryData.match(":{2} "+GO+" (.+ )+"); 24 console.log("_> 跳转点内容 "+GetPoint[0]); 25 26 /* 格式化?感动吗? */ 27 var PointSplist = GetPoint[0].split(/ /); 28 console.log("_> 跳转点内容.格式化 "+PointSplist); 29 30 /* 仙人指路 */ 31 for(var i=0; i<PointSplist.length;i++){ 32 Compass(PointSplist[i]); 33 console.log("_> 字符串长 "+PointSplist.length); 34 console.log("_> 仙人指谁 "+PointSplist[i]); 35 } 36 } 37 38 39 /* Compass 仙人指路 */ 40 function Compass(LINE){ 41 switch(true){ 42 43 /* :: Start , 跳跃点 */ 44 case /^:{2}/.test(LINE): 45 console.log("_> 跳跃点 "+LINE); 46 JumpPoint(LINE); 47 break; 48 49 /* TEXT 行头除了 [ < > : / 空格 换行 以外的就是普通文本了 */ 50 case /^[^[<>:/\n ]/.test(LINE): 51 console.log("_> 普通文本 "+LINE); 52 JumpText(LINE); 53 break; 54 55 /* >info 信息提示 */ 56 case /^>info/.test(LINE): 57 console.log("_> 信息提示 "+LINE); 58 InfoText(LINE); 59 break; 60 61 /* >buts , 两个按钮 */ 62 case /^>buts/.test(LINE): 63 console.log("_> 两个按钮 "+LINE); 64 Buttons(LINE); 65 break; 66 67 /* >but , 单个按钮 */ 68 case /^>but/.test(LINE): 69 console.log("_> 单个按钮 "+LINE); 70 Button(LINE); 71 break; 72 73 /* 链接 */ 74 case /^>link/.test(LINE): 75 console.log("_> 链接 "+LINE); 76 ALink(LINE); 77 break; 78 79 /* 代码 */ 80 case /^>code/.test(LINE): 81 console.log("_> 代码 "+LINE); 82 Codes(LINE); 83 break; 84 85 /* >img img_name.jpg 图 */ 86 case /^>img/.test(LINE): 87 console.log("_> 图片 "+LINE); 88 Imgs(LINE); 89 break; 90 91 /* >delay 10s Start 延时 */ 92 case /^>delay/.test(LINE): 93 console.log("_> 延时 "+LINE); 94 DelayGO(LINE); 95 break; 96 97 /* 音频 98 case /^>audio/.test(LINE): 99 console.log(LINE); 100 Audios(LINE); 101 break;*/ 102 103 /* 视频 104 case /^>video/.test(LINE): 105 console.log(LINE); 106 Videos(LINE); 107 break;*/ 108 109 /* 未匹配的 */ 110 default: 111 console.log("_> 未知 "+LINE); 112 } 113 } 114 115 116 /* 跳跃点 */ 117 function JumpPoint(LINE){ 118 /* Sayid +1 */; 119 SayNumber++; 120 console.log("_> SAYID NUMBER "+SayNumber); 121 console.log("_> 跳跃点 "+LINE); 122 123 /* 剥离无用符号,为标签获取id名 */ 124 var JumpID = LINE.replace(/^[:]{2}s/, ""); 125 SAYID = JumpID+".SAY."+SayNumber;// xxx.SAY.123 126 BUTID = JumpID+".BUT."+SayNumber;// xxx.BUT.123 127 PREID = JumpID+".PRE."+SayNumber; 128 console.log("_> SAY ID "+SAYID+" _> BUT ID "+BUTID); 129 130 var JumpHTML = "<section id="+SAYID+"></section>"; 131 var JumpDOM = document.getElementById("Story"); 132 JumpDOM.insertAdjacentHTML("beforeEnd", JumpHTML); 133 } 134 135 /* 普通文本 */ 136 function JumpText(LINE){ 137 console.log("_> 普通文本 "+LINE); 138 var TextDOM = document.getElementById(SAYID); 139 var TextHTML = "<p>"+LINE+"</p>"; 140 TextDOM.insertAdjacentHTML("beforeEnd",TextHTML); 141 console.log("_> 普通文本 "+LINE); 142 } 143 144 /* 信息提示 */ 145 function InfoText(LINE){ 146 console.log("_> 信息提示 "+LINE); 147 var RegExp = LINE.match(/>info (.*)/); 148 var DOM = document.getElementById(SAYID); 149 var HTML = "<h2>"+RegExp[1]+"</h2>"; 150 DOM.insertAdjacentHTML("beforeEnd",HTML); 151 console.log("_> 信息提示 "+HTML); 152 } 153 154 /* 两个按钮 */ 155 function Buttons(LINE){ 156 console.log("_> 两个按钮 "+LINE); 157 var GetData = LINE.match(/>buts (.+)|(.+) (.+)|(.+)/); 158 console.log("_> 两个按钮.正则 "+GetData[0]); 159 var ButtonsDOM = document.getElementById(SAYID); 160 var ButtonsHTML = "<span id="+BUTID+"><a class="bl" id=""+BUTID+".A"href="javascript:Selectd('"+BUTID+".A')" onclick="ilearning('"+GetData[2]+"')">"+GetData[1]+"</a><a class="br" id=""+BUTID+".B"href="javascript:Selectd('"+BUTID+".B')" onclick="ilearning('"+GetData[4]+"')">"+GetData[3]+"</a></span>"; 161 ButtonsDOM.insertAdjacentHTML("beforeEnd",ButtonsHTML); 162 } 163 164 /* 单个按钮 */ 165 function Button(LINE){ 166 console.log("_> 单个按钮 "+LINE); 167 var GetData = LINE.match(/>but (.+)|(.+)/); 168 console.log("_> 单个按钮.正则 "+GetData[0]); 169 var ButtonDOM = document.getElementById(SAYID); 170 var ButtonHTML = "<span id="+BUTID+"><a class="bc" id=""+BUTID+".A" href="javascript:Selectd('"+BUTID+".A')" onclick="ilearning('"+GetData[2]+"')">"+GetData[1]+"</a></span>"; 171 ButtonDOM.insertAdjacentHTML("beforeEnd",ButtonHTML); 172 } 173 174 /* 链接 */ 175 function ALink(LINE){ 176 console.log("_> 链接 "+LINE); 177 var GetData = LINE.match(/>link (.+)|(.+)/); 178 console.log(GetData[0]); 179 var ALinkHTML= "<span><a href=""+GetData[2]+"">"+GetData[1]+"</a></span"; 180 console.log(ALinkHTML); 181 var ALinkDOM = document.getElementById(SAYID); 182 ALinkDOM.insertAdjacentHTML("beforeEnd",ALinkHTML); 183 } 184 185 /* 代码块 */ 186 function Codes(LINE){ 187 console.log("_> 代码 "+LINE); 188 189 /* 哪个代码块? */ 190 var CodeTag = LINE.split(/>codes(S+)/); 191 console.log("_> 代码.标签 "+CodeTag[1]); 192 193 /* 从跳转点获取代码块 */ 194 GetData = GetPoint[0].match("(?<=>code "+CodeTag[1]+" )(.* )+(?=>/code "+CodeTag[1]+")"); 195 console.log(GetData[0]); 196 197 var CodeDOM = document.getElementById(SAYID); 198 var CodeHTML = "<pre class="html">"+encodeHtml(GetData[0])+"</pre>"; 199 console.log(GetData[0]); 200 console.log(CodeHTML); 201 CodeDOM.insertAdjacentHTML("beforeEnd",CodeHTML); 202 /* 渲染 */ 203 SyntaxHighlighter.highlight(); 204 } 205 /* /代码块 */ 206 207 // HTML转义函数 208 function encodeHtml(s){ 209 return s.replace( 210 /"|&|'|<|>|[x00-x20]|[x7F-xFF]|[u0100-u2700]/g, 211 function($0){ 212 var c = $0.charCodeAt(0); 213 switch(c){ 214 case 13: return "<br />"; 215 case 32: return " "; 216 default: return "&#"+c+";"; 217 } 218 } 219 ); 220 }; 221 222 /* 图片 */ 223 function Imgs(LINE){ 224 var ImgDOM = document.getElementById(SAYID); 225 /* 剥离无用符号*/ 226 var ImgUrl = LINE.replace(/^>img /, ""); 227 console.log(ImgUrl); 228 var ImgHTML = "<img src=""+ImgUrl+"">"; 229 console.log(ImgHTML); 230 ImgDOM.insertAdjacentHTML("beforeEnd",ImgHTML); 231 } 232 233 234 /* 视频 */ 235 function Videos(LINE){ 236 console.log(LINE); 237 238 /* 获取 */ 239 GetVideo = LINE.match("[^>videos](.*)"); 240 console.log(GetVideo[0]); 241 242 var VideoDOM = document.getElementById(SAYID); 243 VideoDOM.insertAdjacentHTML("beforeEnd",GetVideo[0]); 244 245 var AudioSrc = "<audio src=""+GetAudio[0]+""controls="controls">"; 246 console.log(AudioSrc ); 247 var AudioDOM = document.getElementById(SAYID); 248 AudioDOM.insertAdjacentHTML("beforeEnd",AudioSrc); 249 250 } 251 252 253 /* 声音 音乐 */ 254 function Audios(LINE){ 255 console.log(LINE); 256 257 /* 获取 */ 258 GetAudio = LINE.match("[^>audios](.*)"); 259 console.log(GetAudio[0]); 260 261 var AudioSrc = "<audio src=""+GetAudio[0]+""controls="controls">"; 262 console.log(AudioSrc); 263 var AudioDOM = document.getElementById(SAYID); 264 AudioDOM.insertAdjacentHTML("beforeEnd",AudioSrc); 265 } 266 267 268 269 /* Time Delay */ 270 function DelayGO(LINE){ 271 console.log(">_ 延时 "+LINE); 272 var RegExp = LINE.match(/delay (d*)s (.*)/); 273 console.log(RegExp); 274 var DelayTime = RegExp[1]*1000; 275 console.log(">_ 延时时间 "+DelayTime); 276 277 /* 延时执行 */ 278 Wait('on'); 279 setTimeout(function(){ 280 ilearning(RegExp[2]); 281 Wait('off'); 282 },DelayTime); 283 } 284 285 286 /* Wait 动画 */ 287 function Wait(LINE){ 288 var WaitDOM = document.getElementsByTagName("wait"); 289 if (LINE == 'on'){ 290 WaitDOM[0].style.display="block"; 291 } else { 292 WaitDOM[0].style.display="none"; 293 } 294 } 295 296 297 /* SelectMe And change color */ 298 function Selectd(LINE){ 299 console.log("_> SelectMe " +LINE); 300 var RegExp = LINE.match(/(.*..*..*.)(.)/); 301 302 var BUTSA = RegExp[1]+"A"; 303 var BUTSB = RegExp[1]+"B"; 304 console.log(BUTSA,BUTSB); 305 var DOMA = document.getElementById(BUTSA); 306 var DOMB = document.getElementById(BUTSB); 307 308 console.log(RegExp[0]); 309 console.log(DOMB); 310 311 if(RegExp[2]== 'A'){ 312 console.log(">_ A") 313 DOMA.href = "javascript:void(0)"; 314 DOMA.onclick = null; 315 DOMA.style.color = "#00000080"; 316 DOMA.style.background = "#97e597c9"; 317 318 if(DOMB){ 319 console.log("sssssssssssss"); 320 DOMB.onclick = null; 321 DOMB.href = 'javascript:void(0)'; 322 DOMB.style.color = "#00000080"; 323 } 324 }else { 325 console.log(">_ B") 326 DOMB.href = 'javascript:void(0)'; 327 DOMB.onclick = null; 328 DOMB.style.color = "#00000080"; 329 DOMB.style.background = "#97e597c9"; 330 331 DOMA.href = 'javascript:void(0)'; 332 DOMA.onclick = null; 333 DOMA.style.color = "#00000080"; 334 } 335 } 336 337 338 //著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 339 //作者: DIYgod 340 //链接: https://www.anotherhome.net/2153 341 //来源: Anotherhome 342 var OriginTitile = document.title; 343 var titleTime; 344 document.addEventListener('visibilitychange', function() { 345 if(document.hidden) { 346 document.title = '(つェ⊂)我藏好了哦~ ' + OriginTitile; 347 clearTimeout(titleTime); 348 } 349 else { 350 document.title = '(*´∇`*) 被你发现啦~ ' + OriginTitile; 351 titleTime = setTimeout(function() { 352 document.title = OriginTitile; 353 }, 2000); 354 } 355 }); 356 357 358 function Clickd(){ 359 console.log("TAP TAP"); 360 } 361 </script>
样式
1 html { 2 margin: 5px; 3 background-color: #f4f4f4; 4 } 5 6 body { 7 color: #666; 8 margin: 0 auto; 9 //max-width: 700px; 10 font-weight: normal; 11 font-family: PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans; 12 } 13 14 a { 15 color: #97e597; 16 text-decoration: none; 17 background: transparent; 18 } 19 20 ::selection { 21 background: #97e597; 22 } 23 24 hr{ 25 background: #e0ffbf; 26 border: none; 27 height: 1px; 28 } 29 30 31 32 #navigator { 33 text-align:center; 34 //border-bottom: 1px solid #e3e3e3; 35 } 36 #navigator ul li a{ 37 margin:0; 38 font-size:1.5rem; 39 overflow:hidden; 40 color: #aaa; 41 } 42 #navigator ul li{ 43 list-style-type:none; 44 } 45 46 47 48 49 /* header */ 50 #header { 51 text-align: center; 52 margin-bottom: 20px; 53 -webkit-user-select: none; 54 user-select: none; 55 } 56 57 #header a { 58 margin: 0; 59 font-size: 3rem; 60 font-weight: 200; 61 line-height: 1em; 62 overflow: hidden; 63 } 64 65 #header p { 66 margin: 0; 67 font-size: 1.6rem; 68 font-style: normal; 69 } 70 71 @media screen and (max- 670px) { 72 #header a { 73 font-size: 3rem; 74 } 75 76 #header p { 77 font-size: 1.5rem; 78 } 79 } 80 81 @media screen and (max- 600px) { 82 #header a { 83 font-size: 3rem; 84 } 85 86 #header p { 87 font-size: 1.4rem; 88 } 89 } 90 91 @media screen and (max- 500px) { 92 #header a { 93 font-size: 2.5rem; 94 } 95 96 #header p { 97 font-size: 1.3rem; 98 } 99 } 100 101 @media screen and (max- 400px) { 102 #header a { 103 font-size: 2rem; 104 } 105 106 #header p { 107 font-size: 1.2rem; 108 } 109 } 110 111 /* header */ 112 113 114 115 /* Story */ 116 section{ 117 text-align: center; 118 /* word-break: break-all; 119 background-color: #ffffff;*/ 120 border-radius: 3px; 121 padding-top: 1px; 122 } 123 124 125 section h2{ 126 background-color: #e0f5a4; 127 font-size: 1.8em; 128 font-weight: normal; 129 margin: 10px 0; 130 padding: 5px 0 1px 0; 131 } 132 133 134 section img,audio,embed{ 135 width: 100%; 136 } 137 138 pre{ 139 text-align: left; 140 display: block; 141 font-size: 1.5em; 142 margin-block-start: 0.83em; 143 margin-block-end: 0.83em; 144 margin-inline-start: 0px; 145 margin-inline-end: 0px; 146 font-weight: bold; 147 border-radius: 5px; 148 padding: 10px; 149 background-color: #fafafa; 150 overflow:auto; 151 } 152 153 /*section a{ 154 padding: 10px; 155 margin: 5px; 156 color: #fff; 157 word-break: break-all; 158 font-weight: normal; 159 font-size: 1.6rem; 160 background-color: #51c75f; 161 display: inline-block; 162 border-radius: 5px; 163 }*/ 164 165 section span { 166 margin: 10px 0; 167 text-align: center; 168 display: flex; 169 } 170 171 section a,section span a { 172 width: 100%; 173 padding: 5px; 174 margin: 2px; 175 color: #959595; 176 word-break: break-all; 177 font-weight: normal; 178 font-size: 0.8rem; 179 border-radius: 3px; 180 border: 1px solid #E6ECF1; 181 box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1); 182 } 183 184 section span a:hover { 185 color: #fff; 186 background-color: #97e597c9; 187 } 188 189 .bl{ 190 text-align: right; 191 } 192 193 .br{ 194 text-align: left; 195 } 196 /* Story */ 197 198 /* wait */ 199 wait { 200 display: none; 201 padding-bottom: 30px; 202 } 203 204 .wait,.wait>div { 205 position: relative; 206 -moz-box-sizing: border-box; 207 box-sizing: border-box 208 } 209 210 .wait { 211 display: block; 212 font-size: 0; 213 color: #c6f693; 214 } 215 216 .wait>div { 217 display: inline-block; 218 float: none; 219 background-color: currentColor; 220 border: 0 solid currentColor 221 } 222 223 .wait { 224 width: 32px; 225 height: 32px 226 } 227 228 .wait>div { 229 position: absolute; 230 top: 0; 231 left: 0; 232 width: 32px; 233 height: 32px; 234 border-radius: 100%; 235 opacity: 0; 236 -webkit-animation: ball-scale-multiple 1s 0s linear infinite; 237 -moz-animation: ball-scale-multiple 1s 0s linear infinite; 238 -o-animation: ball-scale-multiple 1s 0s linear infinite; 239 animation: ball-scale-multiple 1s 0s linear infinite 240 } 241 242 .wait>div:nth-child(2) { 243 -webkit-animation-delay: .2s; 244 -moz-animation-delay: .2s; 245 -o-animation-delay: .2s; 246 animation-delay: .2s 247 } 248 249 .wait.la-2x { 250 width: 64px; 251 height: 64px 252 text-align: center; 253 margin: 0 auto; 254 padding-bottom: 70px; 255 } 256 257 .wait.la-2x>div { 258 width: 64px; 259 height: 64px 260 } 261 262 @-webkit-keyframes ball-scale-multiple { 263 0% { 264 opacity: 0; 265 -webkit-transform: scale(0); 266 transform: scale(0) 267 } 268 269 5% { 270 opacity: .75 271 } 272 273 100% { 274 opacity: 0; 275 -webkit-transform: scale(1); 276 transform: scale(1) 277 } 278 } 279 280 @-moz-keyframes ball-scale-multiple { 281 0% { 282 opacity: 0; 283 -moz-transform: scale(0); 284 transform: scale(0) 285 } 286 287 5% { 288 opacity: .75 289 } 290 291 100% { 292 opacity: 0; 293 -moz-transform: scale(1); 294 transform: scale(1) 295 } 296 } 297 298 @-o-keyframes ball-scale-multiple { 299 0% { 300 opacity: 0; 301 -o-transform: scale(0); 302 transform: scale(0) 303 } 304 305 5% { 306 opacity: .75 307 } 308 309 100% { 310 opacity: 0; 311 -o-transform: scale(1); 312 transform: scale(1) 313 } 314 } 315 316 @keyframes ball-scale-multiple { 317 0% { 318 opacity: 0; 319 -webkit-transform: scale(0); 320 -moz-transform: scale(0); 321 -o-transform: scale(0); 322 transform: scale(0) 323 } 324 325 5% { 326 opacity: .75 327 } 328 329 100% { 330 opacity: 0; 331 -webkit-transform: scale(1); 332 -moz-transform: scale(1); 333 -o-transform: scale(1); 334 transform: scale(1) 335 } 336 } 337 /* wait */ 338 339 footer{ 340 text-align: center; 341 } 342 footer a{ 343 color: #666; 344 } 345 346 .iblackly{ 347 width: 25px; 348 margin: 0px 2px -4px 2px; 349 } 350 351 .coding{ 352 width: 25px; 353 margin: 0px 2px -4px 2px; 354 } 355 356 .chrome{ 357 width: 22px; 358 margin: 0px 2px -5px 2px; 359 } 360 361 /* 滚动 */ 362 /* 整个滚动条 */ 363 ::-webkit-scrollbar { 364 width: 3px; 365 height: 3px; 366 } 367 368 /* 滚动条上的滚动滑 */ 369 ::-webkit-scrollbar-thumb { 370 background: #b3d979; 371 border-radius: 3px; 372 } 373 /* 滚动 */