## 一、简介 这是键盘快捷键的第二个应用。这个想法最早来自一款叫做Mountain的steam游戏。这个游戏就是每个字母按键都对应一个音符，通过弹奏某些著名乐章的旋律来解锁一些成就。不够Mountain最大的问题是它只能弹C大调（或者A小调），也就是说，它只有C D E F G A B这7种音，根据十二平均律还少了5个半音，分别是C#（Db），D#（Eb），F#（Gb），G#（Ab），A#（Bb），因此我想实现一个能弹奏这十二种半音的钢琴键盘。 除了能弹奏十二种半音外，我还希望音域能宽一点，至少钢琴的88个半音都能涉及到。但是键盘按键又没有那么多，所以还需要两个按键来让键盘整体平移八度。如果能准备不同音色的乐器那就更好了。 ## 二、实现方法 ### 1.音的演奏。 一种做法是将所有的音作为静态文件进行播放，但是这样会有网络延迟带来的一系列问题，不是最佳的解决方法。幸好有JavaScript库可以使用。这里用的是[audiosynth][1]，它通过调用简单的函数就能播放声音。 使用`Synth.setVolume`来调节播放音量，通过以下调用播放声音。 ``` Synth.play(instrument, note, oct + octave_base, note_span); ``` play函数接受4个参数，第一个是整形，表示乐器种类，这个库提供4种音色，0代表钢琴，1代表管风琴，2代表吉他，3的声音很迷，不知道是什么。第二个参数是演奏哪个音，是一个字符串，表示形如`C`，`C#`之类，降号需要转换成升号，比如`Db`就要转换为`C#`。第三个参数表示音是哪个八度的，整形，比如4就代表第4个八度。最后一个参数表示演奏的时间，单位是秒。 ### 2.键盘的对应 键盘的一个按键对应一个音。为了符合钢琴的键位，定义`q` `w` `e` `r` `t`这一行是低音`C` `D` `E` `F` `G`等等。`q`和`w`上面的按键为`2`，代表`C#`，`w`和`e`上面是`3`，代表`D#`等等。最后的`]`代表`G`，接着，键盘从`z` `x` `c` `v` `b`这一行开始，分别代表`A` `B` `C` `D` `E`这几个音，刚好和上一排对应上，最后一个音为`.`，也就是`B`。这样下来，这个键盘包含3个完整的8度。使用字典来记录这个规则。代码如下。 ``` var keymap = { 'q': 'C -1', 'w': 'D -1', 'e': 'E -1', 'r': 'F -1', 't': 'G -1', 'y': 'A -1', 'u': 'B -1', 'i': 'C 0', 'o': 'D 0', 'p': 'E 0', '[': 'F 0', ']': 'G 0', 'z': 'A 0', 'x': 'B 0', 'c': 'C 1', 'v': 'D 1', 'b': 'E 1', 'n': 'F 1', 'm': 'G 1', ',': 'A 1', '.': 'B 1', '2': 'C# -1', '3': 'D# -1', '5': 'F# -1', '6': 'G# -1', '7': 'A# -1', '9': 'C# 0', '0': 'D# 0', '=': 'F# 0', 'a': 'G# 0', 's': 'A# 0', 'f': 'C# 1', 'g': 'D# 1', 'j': 'F# 1', 'k': 'G# 1', 'l': 'A# 1' }; ``` 其中每一行的键为按键，值为字符串，前半部分表示音的种类，后半部分表示相对音高，相当于基准音的偏移。-1代表比基准低一个八度，1代表高一个八度。如果定义基准音高为4的话，`q`代表`C3`，`i`代表`C4`，`c`代表`C5`。 ### 3.重复按键的处理 重复按键问题主要出现在一直按着一个键不放的情况。比如一直按着`c`，就会一直不断演奏这个音，这显然不是我们想要的，我们想至少需要等到按键释放后再按才再次触发这个音的播放。于是按键处理这一块就需要用到高级函数了，需要我们自己定义按键按下和释放的处理函数。 最简单的思路就是记录每一个按键的状态，记录是否已经被按下，如果被按下了，就不再播放这个音。于是整个过程是这样。首先所有按键的状态都是没有被按下。当有一个按键被按下的时候，先判断这个按键是否已经被按下了，如果已经被按下了，说明之前那次按键还没有释放，直接跳过，如果没有被按下，就播放声音，并将那个按键的标志设为按下。当某一按键释放的时候，将那个键的状态设为没有被按下。整个过程代码如下。 ``` for (var key in keymap) { key_state[key] = false; key_func_map.push({ "keys": key, "on_keydown": function(event) { var key = event.key.toLowerCase(); if (key_state[key] === false) { var cur_str = keymap[key]; var note = cur_str.split(" ")[0]; var oct = parseInt(cur_str.split(" ")[1]); Synth.play(instrument, note, oct + octave_base, note_span); key_state[key] = true; } }, "on_keyup": function(event) { var key = event.key.toLowerCase(); key_state[key] = false; } }); } ``` 其中`key_state`记录按键状态，`key_func_map`存储按键映射，`octave_base`表示当前的音高。 ### 4.音高以及乐器的调整 因为想让键盘能弹出多个八度，因此需要将整体音域平移，需要两个按键，一个上移，一个下移。用方向键上下即可。同时还希望能改乐器，同理使用左右来切换乐器。当然需要处理边界条件，比如音的上界和下界，乐器的编号的上界和下界。同样使用`key_func_map`来记录按键映射，代码如下。 ``` key_func_map.push({ "keys": 'up', "on_keydown": function() { if (octave_base <= 6) { octave_base++; } } }); key_func_map.push({ "keys": 'down', "on_keydown": function() { if (octave_base >= 2) { octave_base--; } } }); key_func_map.push({ "keys": 'left', "on_keydown": function() { if (instrument >= 1) { instrument--; } } }); key_func_map.push({ "keys": 'right', "on_keydown": function() { if (instrument <= 2) { instrument++; } } }); ``` 其中`octave_base`记录当前基准音高，`instrument`记录当前乐器的编号。 ### 5.钢琴键盘的开启和关闭 首先使用一个listener将刚才`key_func_map`记录的按键映射进行监听，并进行初始化，比如先停止监听，设定初始播放音量等，代码如下。 ``` var instrument_listener = null; instrument_listener = new window.keypress.Listener; Synth.setVolume(0.4); instrument_listener.register_many(key_func_map); instrument_listener.stop_listening(); ``` 然后再用另一个listener来启动或者关闭这个钢琴键盘。同样使用按键序列来实现。通过一个变量`instrument_active`来记录钢琴键盘是否已经被激活，再根据激活状态来判断下面是激活还是无效钢琴键盘，代码如下。 ``` function toggle_keyboard() { if (instrument_active === false) { instrument_active = true; instrument_listener.listen(); } else if (instrument_active === true) { instrument_active = false; instrument_listener.stop_listening(); } } key_listener.sequence_combo("! @ #", toggle_keyboard, true); ``` 这样一来钢琴键盘的实现也就全部完成了。 [1]: https://github.com/keithwhor/audiosynth

## 一、简介 在实现了网页键盘的处理后，下一步就是利用键盘快捷键实现一些功能了。如果还没有看过键盘快捷键的实现，请移步[这篇文章][1]。 这篇主要讲键盘快捷键实现网页背景切换的实现方法，最后顺便题一下只显示背景的方法。 ## 二、背景切换的实现方法 因为背景切换实现非常简单，因此放到第一个讲。所谓的背景切换就是指在静态背景（健全壁纸）和动态背景（可能不是很健全的壁纸）的切换。如果对动态壁纸实现方式感兴趣，请移步[这篇文章][2]。 实现的关键在于key的回调函数实现。这个函数要做的事情是判断现在是什么背景，然后接不接受这次切换请求。因为在小屏幕的时候是不显示动态背景的。具体的细节就是使用window的`max-width`属性来判断是否是小屏幕，然后用hidden-xs是否可见来判断是否是动态背景。因此很容易写出以下逻辑。 ``` function toggle_background() { if (!window.matchMedia('(max-width: 768px)').matches) { if ($(".hidden-xs").is(":visible")) { hide_background(); Cookies.set("animated_background", false, { expired: 14 }); } else { show_background(); Cookies.set("animated_background", true, { expired: 14 }); } } } ``` 值得注意的是切换背景的时候设置一个Cookie，来记录用户偏爱的背景模式，不用每次来都切换背景。每次加载页面的时候先读取这个cookie，代码如下。 ``` var is_animated_background = Cookies.get("animated_background"); if (is_animated_background === "true") { show_background(); } else { hide_background(); } ``` 使用`hide_background`来隐藏动态背景，使用`show_background`来显示动态背景。于是下面给出这两个函数的实现。 ``` function hide_background() { $(".hidden-xs").hide(); $(".simple-image-div").css('display', ''); } function show_background() { $(".hidden-xs").show(); $(".simple-image-div").css('display', 'none'); } ``` 其中静态壁纸装到`simple-image-div`当中，动态壁纸装到`hidden-xs`中。静态壁纸的构造和动态壁纸一样，也是采用100%高度和100%宽度覆盖屏幕的方式。但是有一个问题，就是静态背景在刷新的时候会闪一下，非常瞎眼。 瞎眼的原理这里稍微多说一下。在刷新的时候，这时你的屏幕是背景图片。刷新是需要过程的，可能是0.5秒的时间，这段时间，最先加载的是背景的颜色，也就是`background-color`，然后再是图片。因此整个过程你看到的是背景图片，纯色快，背景图片。如果你的背景图片是暗色的，背景颜色设置的是浅色，就会出现深色-浅色-深色的转换，而且中间过程很短，所以才会感觉眼睛被晃了一下。 解决这个问题我的确花了不少时间。最后比较好的解决方法是先将背景设置为黑色，然后给静态图片设置从黑到背景图片的过渡，这样就不会瞎眼了。整个过程采用css解决。 ``` @keyframes simpleImage { 0% { opacity: 0; } 8% { opacity: 0; } 17% { opacity: 1; } 25% { opacity: 1; } 100% { opacity: 1 } } .simple-image-div { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; color: transparent; background-image: url('/static/mysite/images/background-lg.png'); background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: -2; animation: simpleImage 6s linear 0s; animation-fill-mode: forwards; } ``` 以上代码看不懂可以先看[动态背景实现方法][2]，里面有讲`keyframe`之类的知识。 最后绑定一个按键listener即可，代码如下。 ``` var key_listener = new window.keypress.Listener; key_listener.sequence_combo("left up right down", toggle_background, true); ``` ## 三、只显示背景的实现方法 讲完背景的切换还是顺便讲一下只显示背景的方法。这个也就很简单了，将主页面的div隐藏，再隐藏标题栏就好了，随后将这个函数跟按键listener绑定即可实现。代码如下。 ``` function toggle_content() { $("#main-content").toggle(); $("#navigation-bar").toggle(); } key_listener.sequence_combo("up up down down left right left right b a", toggle_content, true); ``` [1]: https://chongliu.me/blogs/archive/136/ [2]: https://chongliu.me/blogs/archive/135/

## 一、前言 对于网页而言，加入快捷键可以提供一些额外功能，这些功能可能在某种原因下不太适合在网站明处提供入口（说的就是背景233）因此实现一个快捷键是比较有意思的事情。 同时我们希望快捷键就像开关一样，通过同样的键位可以随时打开随时关闭。 ## 二、实现概述 捕捉键盘的按键其实并不困难，在原生JavaScript就有`keydown`和`keypress`事件，只需要绑定这个事件，通过`event.keyCode`就能获得按下的到底是什么键。但是这样最大的问题就是不太方便处理连续按键的问题。比如按键组合`up up down down left right left right b a`，一个一个识别是不太好维护的，而且换一套组合又需要重写。所以通用的做法是根据按键自动构造一个自动机。而且还需要对监听可以随时移除随时添加。因此需要写一个类来专门实现这些功能。 因此，我选择用已有的库，自己写这个实在是太累了。我选择的是[keyPress][1]库，这个库的好处是无论是组合键还是按键组合都能处理，比较强大。 ## 三、keyPress库简介 首先需要在html文件里面引用这个js文件。然后进行初始化，代码如下。 ``` var listener = new window.keypress.Listener(); ``` 这样就得到一个listener对象，再对listener对象绑定一个按键规则即可实现监听。listener支持按键组合和组合键，下面都简要介绍一下。 对于组合键的支持，是通过`simple_combo`函数实现的，它的参数是按键组合的字串和回调函数。实例如下。 ``` listener.simple_combo("shift s", function() { console.log("You pressed shift and s"); }); ``` `shift s`代表的是按键组合是shift加上s，后面回调的函数用于显示信息。 对于按键组合的支持，是通过`sequence_combo`函数实现的，它的参数是按键序列和回调函数，示例如下。 ``` listener.sequence_combo("up up down down left right left right b a enter", function() { lives = 30; }); ``` 这是keypress最简单的用法，如果要定义比较复杂的逻辑，要精确到按下和释放操作，或者要增加例如互斥，只按一次等等的高级属性， 就需要用它的api，也就是`register_combo`函数了。它的参数及说明如下。 ``` listener.register_combo({ "keys" : null, "on_keydown" : null, "on_keyup" : null, "on_release" : null, "this" : undefined, "prevent_default" : false, "prevent_repeat" : false, "is_unordered" : false, "is_counting" : false, "is_exclusive" : false, "is_solitary" : false, "is_sequence" : false }); ``` `keys`就是按键的序列串，`on_keydown`就是按下的后执行的函数，`on_keyup`就是释放后执行的函数，`on_release`就是当所有按键按完后执行的函数。`this`是执行回调函数的域对象。`prevent_default`是指定对每一个按键是否要执行preventDefault，`prevent_repeat`是指定这个按键操作是否只监听一次，`is_unordered`指定监听的按键序列是否要按顺序进行敲击，`is_counting`指定是否记录组合键按键的次数，`is_exclusive`指定按键是否互斥，互斥组合之间序列较短的组合会被激活，长的会被抛弃，`is_solitary`指定当有额外的按键被按下的时候组合键是否被激活，`is_sequence`指定这个按键是否是序列按键。 同时keypress还提供了`register_many`方法，通过传入按键设定字典来注册一系列按键，以及`unregister_combo`来注销监听，以及`stop_listening`来暂停监听，`listen`来启用监听等方法。这些会在后面的网站功能实现模块来介绍具体用法。 [1]: https://github.com/dmauro/Keypress

## 一、简介 网页动态背景最早是在忧郁的弟弟的galgame网站上看到的，感觉效果很棒自己也想试一试。动态背景效果主要是动态地切换几张背景图片。图片之间的切换应该比较平滑和流畅。在研究他网页前端代码的时候，我总算了解它的实现方法。 ## 二、实现方法 首先背景要实现多张图片的切换，直接改body的background-image不是一个好的选择，因为这个属性只能绑定一张图片。在图片切换的时候只能是一张图片从有过滤到无，在换另一张图片从无到有，这样做会导致图片交替的时候中间出现一段时间的空层，无法做到两张图片同时存在通过不透明度来控制的切换，显得比较生硬。因此不能简单地通过改background-image来切换。 因此使用另外的方法，将图片放到一个div里的list里面，再写css控制切换显示。 因此代码结构是这样的。 ``` <section class="hidden-xs"> <ul class="cb-slideshow"> <li><span style="background-image: url('')"></span></li> <li><span style="background-image: url('')"></span></li> <li><span style="background-image: url('')"></span></li> <li><span style="background-image: url('')"></span></li> <li><span style="background-image: url('')"></span></li> <li><span style="background-image: url('')"></span></li> </ul> </section> ``` 只需将每个list的span里的background-image的属性填上就行了。 但是有一个非常重要的问题，就是每次我想给用户随机的图片，意思是每次的url地址都不一样。因此这个地址一定是服务器后端传给前端的。于是这里又有两个解决方案，一种是前端页面加载出来之后发一个ajax请求得到地址，这个解决方案很好，但是不知怎么的最近不太想写ajax请求，最要紧的是我希望页面刷出来的时候图片已经加载好了，所以ajax请求可能会出一点点问题。 第二种方案是在django的template层面上定义几个字段，每次在view层将地址传给template。但是这样做最大的问题是我所有view都需要写加载图片这个逻辑，显然这是非常糟糕的方法。 于是出现了第三种方法，就是定义template tag，将公共逻辑抽取到base.html，这个tag实现往base.html写入前端代码，因此就只用写一次逻辑就行了。 template tag逻辑如下。 ``` from django import template from django.utils.safestring import mark_safe from django.conf import settings import os import random register = template.Library() @register.simple_tag def load_background(): image_show_count = 6 # cannot be larger than the amount of images curdir = os.path.join(settings.MEDIA_ROOT, "background") items = os.listdir(curdir) selected = [items[i] for i in random.sample(range(len(items)), image_show_count)] urls = ["/media/background/{}".format(x) for x in selected] return mark_safe(""" <section class="hidden-xs"> <ul class="cb-slideshow"> <li><span style="background-image: url('{}')"></span></li> <li><span style="background-image: url('{}')"></span></li> <li><span style="background-image: url('{}')"></span></li> <li><span style="background-image: url('{}')"></span></li> <li><span style="background-image: url('{}')"></span></li> <li><span style="background-image: url('{}')"></span></li> </ul> </section> """.format(*urls)) ``` 这样就随机加载图片url，并返回一段html代码。 接着就需要在base.html里这么加载这个template tag。代码如下。 ``` {% load mysite_tags %} <body> {% load_background %} ...... </body> ``` 这样就在body之后加载了这段html，就能实现动态图片的加载了。 加载完图片后，剩下的问题就是如何实现动态背景的特效了。 由于不想使用JavaScript进行操作，因此写css样式进行加载。首先需要知道所有的动态都可以通过**`animation`**属性来定义。animation属性需要一个keyframe参数来指定这个元素怎么动，后面接持续时间，是否循环等等属性。而keyframe的定义是通过`@keyframe`字段，然后定义在整个动画过程的某几个关键点元素的属性是什么样的来实现。 首先是定义每个图片的animate属性，代码如下。 ``` .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: -2; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } ``` 最重要的属性是这几个。首先是width和height，这个都需要是100%，主要原因是需要所有的图片都充满全屏幕，然后是位置的三个属性，position top left，这几个定义了背景div是左上角开始，直接填充整个屏幕。background-position决定图片的位置在正中，background-repeat设为none避免图片被拼接。z-index使图片位于页面最底端避免遮住其他元素，最后animation定义了动画的keyframe是imageAnimation， 持续时间为36s，动画时间是线性流逝，重复次数为无限，初始相位为0。 下面是定义imageAnimation这个keyframe的动作，它控制图片的动画方式，代码如下。 ``` @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; transform: scale(1.05); animation-timing-function: ease-out; } 17% { opacity: 1; transform: scale(1.1) rotate(0deg); } 25% { opacity: 0; transform: scale(1.1) rotate(0deg); } 100% { opacity: 0 } } ``` 这个定义如下，首先在0%，也就是初始阶段，图片的透明度为0，也就是全透明，时间进入方式为缓缓进入。在8%的时候，透明度为1，也就是全显示，transfrom定义scale为1.05，相当于放大1.05倍，时间函数为缓缓退出。同理25%和100%。总体来说一张图片的动画是先快速从透明度为0转到1，然后缓缓放大，接着缓缓地消失。 所以每张图片的动画效果都是这个。到了这里你可能会问了，既然每张图片都是这样，那么这些图片不就在同一时间做同样的动作，这样第一张图会盖住其他所有的图片，如何实现动态切换？ 下面就是重点了，要让图片切换，就需要让它们在不同的时间点进行播放，也就是说，它们需要设置不同的延时，来错开彼此的播放时间。延时设置的代码如下。 ``` .cb-slideshow li:nth-child(1) span { } .cb-slideshow li:nth-child(2) span { animation-delay: 6s; } .cb-slideshow li:nth-child(3) span { animation-delay: 12s; } .cb-slideshow li:nth-child(4) span { animation-delay: 18s; } .cb-slideshow li:nth-child(5) span { animation-delay: 24s; } .cb-slideshow li:nth-child(6) span { animation-delay: 30s; } ``` 我们有6张图片要轮换显示，每个图片周期持续时间为36秒，结合上面的keyframe和animation的定义，也就是说，每张图片真正完整的显示时间为(17%-8%) * 36 = 3.24s，再加上0%到8%的过渡和17%到25%的过渡，我们在过渡中能看到的时间大概为9%，所以我们能看到图片的时间大概是6.48s，也就是说，设置时间间隔为6秒就能错开图片的显示。同时能有大概0.5s的时间来看到过渡（两张图片都是不完全显示，也就是说它们的透明度都在0和1之间）。所以上面的代码我们看到每个图片延时的间隔时间为6s，因此就能无限地动态显示图片。 至此动态图片的实现原理就全部讲完了，剩下需要注意的一点是装所有图片的div的class为`hidden-xs`，也就是说在小屏幕的时候这个div会消失，这时候背景就没有定义，默认情况下就是纯色，这不是我们想要的。设置`hidden-xs`的主要原因是小屏幕的时候背景图片根本就显示不全，没有任何意义，因此小屏幕就不显示动态背景了，于是需要在css文件里面定义小屏幕的背景。代码如下。 ``` @media (max-width: 768px) { body { background-color: #f0f0f0; background: url('/static/mysite/images/background.png'); background-attachment: fixed; } } ``` 至此背景这个功能才算真正完成了。

## 一、概述 扫雷是一个很经典游戏，从windows3.0就有了，这个游戏的魅力在于推理和运气。网页版的扫雷使用html5+css+js来开发，最大的好处是只要有一个现代的浏览器（对，我就是在黑IE6），就能愉快的玩耍。 先说需求分析，首先是能自由调节扫雷的棋盘大小，雷的个数能自由设置。第一次点的位置及其周围8个方格不能有雷。再设置作弊功能，比如时间暂停和显示所有雷的功能。 再谈整体的设计思路。首先是算法的流程。第一步是根据玩家设置的大小参数生成棋盘，然后玩家首次点击后生成雷。然后显示点击之后的棋盘。接着就是重复接收玩家的点击，包括左键和右键的点击。每次左键点击完成后，判断玩家是否碰到雷，碰到雷游戏结束，显示玩家标错的旗，剩余的雷位置以及所有的空方块以及数字方块。如果没死，就判断玩家是否获胜，获胜则显示通关画面。 ## 二、详细设计 ### 1. 图像的来源 显示的方块用什么显示比较好呢？最简单的想法是每个方块贴一张png图片。但是这样做的问题主要是当棋盘很大的时候，用户需要放大，或者缩小，png图片大小是定死的，如果随意放大缩小很可能失真。而什么样的图形能自由适应各种大小呢？没错，就是**`svg`**图像。 svg是矢量图形，它是算出来的，每次大小有更新都重新计算各个元素的位置。网络上有很多关于svg图像的写法。svg本质是一个文本文件，不过浏览器可以根据这些文本将图像加载出来。比如下图就是我所有的图像。无论你怎么放大缩小，图像都不会失真。 ![mine.svg][1] ![0.svg][2] ![1.svg][3] ![2.svg][4] ![3.svg][5] ![4.svg][6] ![5.svg][7] ![6.svg][8] ![7.svg][9] ![8.svg][10] ![clock.svg][11] ![dark.svg][12] ![flag.svg][13] ![mines.svg][14] ![smile.svg][15] ![un.svg][16] ![wrong flag.svg][17] ### 2. 初始化 利用几个二维数组来记录游戏信息。包括记录是否有雷的map，用户是否已经访问的数组disc，用户是否设置旗帜的数组flg，以及记录每一个方格周围8个方格的雷总数的数组num。另外还需要一个是否设置了雷的标志，以及记录用户鼠标按下的方格的位置。其中需要给每个方格绑定一个点击监听的函数来记录点击的位置，这个主要是避免用户鼠标释放的时候不在同一个方格的情况，这种情况下用户一般是发现自己不小心点到雷上了才会移开鼠标，避免一按就死。 ### 3. 用户输入的处理 因为棋盘大小以及雷的个数用户都能自己输入，因此需要对用户的输入进行处理。首先如果输入不是数字则自动设置一个最小值4，然后检查雷的个数，其中因为为了使雷都能装进格子里，而且扫雷的规则是点击的块以及周围8个格子不能有雷，因此雷最大数值是长乘宽再减去9。再根据这个数去生成棋盘。 ### 4. 雷的设置 雷的设置时间是用户在第一次点击后触发的。首先需要记录用户的点击位置。然后将棋盘位置作为一个二元变量加入一个数组，当然用户点击的位置以及它周围8个格子的位置不加入数组，这样就得到了雷能够生成的位置集合。然后随机选一个数组的下标，作为雷的方格，然后将这个元素从原数组中pop出去。 ### 5. 图像的更新 图像的更新主要是用disc数组，flg，num数组来绘制。用户所有标记过旗的位置将图片的src更新为旗帜的url，同理将用户已经访问的格子按照num数组进行更新图片，表示已经发现的格子中每一个格子周围雷的情况。 ### 6. 鼠标左键的处理 首先是鼠标点下的时候，记录用户点下的位置。然后是释放的时候判断是否和点击在同一个格子，是的情况才进行处理。 处理的过程首先是需要判断是在哪种格子点下的。对于已经访问过的格子，如果周围8个格子都是已经访问过的或者被置旗的，点击无意义，点击已经置旗的格子，也是无效的，点击周围有位置格子的方格，则触发chord操作，如果点击的是未探索的方格，那么就触发dig操作。 对于dig操作，需要判断这个格子是否有雷，如果有，直接结束游戏，如果没有，看这个方块是什么方格，如果是数组方块，就将数字方块翻开，如果这个方块是空格子，那对周围8个格子都进行dig操作。 以上两个操作完成之后，需要判断是否赢了，标准就是所有不是雷的方格都被探索了，相当于disc数组都被探索完毕了。 对于chord操作，首先需要判断点击的这个数字方块周围未知方格数和数字是否相等，在相等的情况下才进行操作，这个操作将这个数字方格周围的未知方格都进行一次dig操作。 ### 7. 鼠标右键的处理 同理先检测按下和释放的位置是否为同一个方格，如果是，再进行进一步判断。如果这个方格是未知方格，才进行置旗操作。 ### 8. 胜利及失败画面 这个就很简单了，失败了需要标注哪些地方用户置旗正确，哪些地方置旗错误，哪些地方有雷，其余的数字以及空白格在哪里。至于成功画面就比较简单了，只需要将所有雷的地方换成笑脸图就好了233 [1]: https://chongliu.me/static/minesweeper/mine.svg [2]: https://chongliu.me/static/minesweeper/0.svg [3]: https://chongliu.me/static/minesweeper/1.svg [4]: https://chongliu.me/static/minesweeper/2.svg [5]: https://chongliu.me/static/minesweeper/3.svg [6]: https://chongliu.me/static/minesweeper/4.svg [7]: https://chongliu.me/static/minesweeper/5.svg [8]: https://chongliu.me/static/minesweeper/6.svg [9]: https://chongliu.me/static/minesweeper/7.svg [10]: https://chongliu.me/static/minesweeper/8.svg [11]: https://chongliu.me/static/minesweeper/clock.svg [12]: https://chongliu.me/static/minesweeper/dark.svg [13]: https://chongliu.me/static/minesweeper/flag.svg [14]: https://chongliu.me/static/minesweeper/mines.svg [15]: https://chongliu.me/static/minesweeper/smile.svg [16]: https://chongliu.me/static/minesweeper/un.svg [17]: https://chongliu.me/static/minesweeper/wrong%20flag.svg

666666666

前些时段刚刚尝试通关秽翼的尤斯媞娅这部gal第二周目，依然感觉十分的感动和喜悦，在游戏中我有着对坚强的菲奥奈的钦佩，对痴爱男主的艾莉丝的心疼，对珍惜彼此的傲娇圣女组合的喜爱，对无力揽权的王女的怜惜，以及对圣心天使的媞娅所包含的浓浓喜爱与心疼。所以作为一个萌新司机我特来此进行游戏的评测报告以及来进行自己最爱游戏的安利，希望大家也能有机会去尝试这gal奠基的神作。 秽翼的尤斯媞娅是八月社的第七部作品，网上对这部作品的解读——“八月的转型之作”，在我看来是十分正确以及成功的。秽翼一改之前明亮欢笑的校园日常风，明显偏向了忧伤、阴郁、黯然、人性这样偏黑暗的剧情。在牢狱（后文介绍）中，丑恶的人性，生存的痛苦缠绕着每一个人，配合上阴郁的环境，低沉的BGM，在第一次玩游戏就会被故事背景所揪住心结，在这个黑暗的世界上，生存都变成了一个值得奢望的名词，但也正是在这样的世界下，男主的冷漠和中后期为了朋友爱人的付出更加的真实，更加的符合人性，让你能够真的的带入这个世界，感觉每个人都是有血有肉活生生存在的。而女主也在这样环境下的乐观，开朗，无时无刻不如同一簇小小的火苗，照亮这个阴暗的世界。而在这个世界下爆发而出的纯粹，真挚，超越生死的爱恋，就如同燎原之火，清扫过内心的每一片阴暗，不得不称为一部神作。 ![enter image description here][1] 背景知识： ----- 数百年前，人类的傲慢与肮脏惹怒了上苍，上帝降下神罚，人类赖以生存的土地顷刻间化为乌有。整个世界的土地已经无法生存，这个时候，一位善良的天使为了人类挺身而出，由于天使的求情，上帝留下了最后的一座城市——诺瓦斯·艾蒂尔，这座城市是漂浮于空中的，人类最后的希望之城。城市分为上中下三层，上层主要是王族成员，皇宫圣女殿都在这里，皇上负责着整个国家的运行，而城市的浮空之力是由圣女向上帝祷告，上帝鉴其真心，将城市浮动起来的，而中层则是各类贵族所居住的地方，还有些能力有钱的平民在这里生活，下层，是最底层人民生活的地方，这里黑暗，阴森，随处可见血迹，没有规矩，下层人民每天的生活都是一个巨大的问题，在这里，弱小就是原罪，没有能力，等待自己的只有饿死，怜悯和善良在这里是最大的奢侈品，所以，这里也被人们成为---牢狱。而在故事开始的20年前，城市下层的一部分，塌陷了…… 圣女因为没有认真祷告而被处死，而下层的人民也过上了更加水深火热的日子，直到不蚀金锁的建立，不蚀金锁的先代是一个很有能力和远见的人，他将人们集合，创造出了牢狱的规则，在这里，不蚀金锁才是这片地区的管控者。因为下层土地贫瘠，所以物资都需要去上层采购，不蚀金锁不得不和国家打交道，而在大蹦落之后，有一种奇怪的病开始在人群中传播，它会让人后背长出翅膀，被称为羽化病，国家成立了羽化病防疫局，来负责将这些人关起来治疗，这就促成了国家和不蚀金锁的合作，不蚀金锁负责帮忙管控这一地区，国家提供通过关口的权限递送物资给牢狱，而牢狱不干预羽狩（人们因防疫局人员的粗暴起的名字）的行动。不蚀金锁作为一个黑道，先代坚持不碰毒品，主要的收资来源于娼妇，而本作的开始，便是一个批上层送来的娼妇被杀害........ ![enter image description here][2] ![enter image description here][3] ![enter image description here][4] PS：后文将出现很严重的剧透，如果您不想剧透的话，请不要继续查看。 ## 第一章 初识缇娅，与菲奥奈不得不说的故事 ## ---------- - ## 出场人物介绍 ## **尤斯缇娅** 昵称缇娅，善良又纯朴，因为某个事件而被主人公收养，对外宣称为主人公的妹妹。后背生有羽翼的少女，该病被称为<羽化病>。既没有双亲也没有抚养的亲人，从懂事时开始，就已经作为下级仆人被使役着。即使拥有如此痛苦的人生，她还是非常的开朗，对周围的人很平和。但是，偶尔会被评论为“像是簇生的向日葵般的少女”，被爱丽丝称为“小动物”。由于至今为止的经验，家事全部无懈可击。 ![enter image description here][5] **菲奥奈** 为将患有「羽化病」的人半强引地送至牢狱般治疗院而成立的组织<羽狩>——她担任此部队的队长同时负责牢狱方面的管理。因为憧憬着哥哥而进入羽狩，认为进入羽狩是自己的命运。父亲曾经因为工作勤恳而被皇帝赐予御剑，家族都将之作为最大的光荣。对自己的家族感到无比自豪。曾与哥哥一同将感染羽化病的父亲送入治疗院。有着热心于工作的认真性格，但个人也有着喜欢可爱之物的女性的一面。由于有着死板不灵活的一面，经常跟周围起冲突。 ![enter image description here][6] **凯伊姆** 本故事里的主人公。 在《大崩落》中失去了母亲和哥哥而流落到牢狱的男人。 在心中深部所受的伤痕还未痊愈而依旧流着鲜红色的血滴。年幼时曾在娼馆《莉莉舞姆》里当男娼而被任意的使唤。之后被前一代《不蚀金锁》头领看上了其独特的运动性能力，而开始从事暗杀性的工作。从那以来，他一直在牢狱中挥动刀刃，以他人的生命为食粮来让自己继续生存。虽然自前一代头领死后就洗手不干了，但在他的周围还残留着血的味道。虽然外面冷漠无情，但内心十分的善良 ![enter image description here][7] **吉克** 全权支配着牢狱暗杀部队『不蚀金锁』的现任头领，也是カイム的旧相识。他并不像身处这混沌牢狱中的其他人般性格分明，随着站在他面前的人而异，他既会是神，也能是魔。置身于妓院街最深处俯瞰着整个牢狱，他随便动根手指都能轻易改变他人的一生。从上代头领那里接过这位子，也不知这究竟是幸运还是不幸。但不管如何，如今他还是操纵这牢狱中的黑暗组织行动着。但无论是组织还是牢狱的人都对他十分的崇敬。曾与主人公是共生死的好兄弟，至今也相当信任主人公，为主人公排忧解难。 ![enter image description here][8] **梅尔特** 独自一人掌管着娼馆街入口处的酒馆『菲诺列塔』。 她曾经是娼馆街最受欢迎的娼妇，之后被ジーク的父亲，亦即『不蚀金锁』的上代头领赎了 出来，并将酒馆交给她全权打理。 仿佛是为了反抗这席卷整个牢狱的不安和绝望般，她的脸上总少不了那开朗的笑容。 ![enter image description here][9] - ## 剧情介绍 ## 开篇以缇娅的角度，诉说了缇娅被截杀的过程，感受到的冰冷和恐惧，黑暗的环境，阴冷的气氛，瞬间让人感觉到心脏紧缩，玩gal的心态瞬间从轻松变到紧张，这是我感觉秽翼最赞的一点，他的剧情线十分的紧张，而感情和爱恋都是在紧张压抑的环境下，诞生的如金子一般闪耀，在跳过开篇后，进入正片。 ![enter image description here][10] 正文用男主的视角讲述酒吧菲诺列塔的钱被小偷偷走了，凯伊姆去追回银两，在这里遇到了羽狩（治疗院）队长-菲奥奈，这是两人的第一次见面。当晚，凯伊姆接到了不蚀金锁吉克的委托，去调查自己从上层购买的娼妇消失的事情，凯伊姆到达悬崖边上，在这里遇到了大量被杀害的娼妇，与一个满身伤痕活衣履破烂的缇娅。之后吉克发现缇娅是一个羽化病人，吉克希望通过让凯伊姆对她温柔体贴，来让缇娅说出真相后处理掉她，却不料缇娅此时还醒着偷听了二人的谈话。接下来缇娅一方面沉溺于凯伊姆的温柔一方面警醒自己要小心，以及凯伊姆一方面任务是套取情报却另一方面被缇娅天真笑容融化，二者就在这样复杂纠结的日常中过了很久，直到彼此坦白，凯伊姆也决定作为妹妹收养缇娅。 ![enter image description here][11] 紧接着震惊整个牢狱黑羽事件开始。黑羽是人们对于一个怪物的称呼，他四处寻找击杀羽化病人，有着人的外观，黑色的羽毛，巨大的翅膀，强壮的身体，给当地造成巨大危害和恐慌。治疗院决定和不蚀金锁联手解决这个问题，两方的代表恰好是凯伊姆和菲奥奈，两人就在工作中因为生存环境和观念的不同产生着冲突，在冲突之下彼此理解，发现对方的闪光点，在一次一次的追逐战中互相帮助，终于见到了黑羽的真正面目—被菲奥奈送去治疗院的哥哥。菲奥奈心神崩溃，男主死命保护，终于击退黑羽，凯伊姆送菲奥奈回到家中，听菲奥奈叙述了自己的事情—年少时兄长一直是他的榜样，然后父兄被发现了羽化病，菲奥奈将他们送进了治疗所，菲奥奈发现自己害了他们，痛苦而无能的哭泣，男主承受了菲奥奈的软弱，带她走出了深渊，菲奥奈去找寻黑羽巢穴，去给兄长留言，兄长在意识清醒时发现了留言去赴约，期间意识模糊打了起来，终于二人合力并且黑羽自残保持意识情况下，终于将黑羽杀死。凯伊姆接受了菲奥奈的爱意，在牢狱过着幸福的生活。 ![enter image description here][12] ![enter image description here][13] ## 第二章 智斗风情，与艾莉丝的爱恨情仇 ## ---------- - ## 出场人物介绍 ## **艾莉丝** 艾莉丝是牢狱里不可多得的医生，从小被父母囚禁在小屋里，如同人偶一般，每天只知道听从命令做事，父母死后差点被卖作妓女。在马上要变成娼妇时被主人公赎回来。将男主看做是生命中的光亮并且十分的依赖主人公，从那以后就一直以主人公的“物品”自称。虽然在娼馆街作为医生谋生，但本人主张「医生只是副业」，而对患者态度冷淡。虽然性格冷漠这点比较棘手，但偶尔会展现出其热情的一面。有点腹黑且傲娇，但关键时候却相当的乐于助人。 ![enter image description here][14] **鲁基乌斯** 作为改革派的领军人物而声名鹊起的年轻贵族。他拥有『羽狩』的指挥大权，牢狱中也有不少他的支持者。是个无论何时都只会做出正确的选择，即使为此牺牲数万人的性命也再所不惜的男人，是贯彻自己的意志到最后一刻的男人。 ![enter image description here][15] **希斯蒂娜** 作为鲁基乌斯的得力助手，总是跟在身后协助他。她的言行举止高雅，，很少情绪化，总是冷静沉着，有着冰山般的冷淡氛围。对鲁基乌斯很是忠诚，所有的工作都是在为他服务。为了鲁基乌斯可以上刀山下火海。 ![enter image description here][16] - ## 剧情介绍 ## 贝尔纳德和吉克同是先代的手下，在先代卸任不久，将不蚀金锁交给了吉克，贝尔纳德不久就带着一批手下离开了不蚀金锁，开创了另一个黑道组织--风情。风情背弃了先代的理念，把手伸向毒品。本来两个组织相安无事，但突然牢狱的一些底层人民，开始吸食一种全新的毒品后出现发病，甚至死亡。不蚀金锁立刻关注到了这一问题，开始对事情进行排查，而艾莉丝作为牢狱唯一的一个医生，同凯伊姆一同加入到调查中。艾莉丝接到这个任务是十分开心的，在凯伊姆拒绝了菲奥奈之后，艾莉丝察觉到凯伊姆是能够属于自己的，自己对他满满的爱意终于有了倾泻的空间。在进一步的调查下，他们发现大部分的毒品是不会致死的，只有其中参杂了一种黑色粉末的毒品，才会导致人死亡。不蚀金锁排查到了制造这种毒品的制药厂，恰好是风情的产业，虽然已经被废弃了，但还是将一切的矛头指向风情，与此同时，风情也伸出了獠牙，向不蚀金锁展开了攻势....... 不蚀金锁收拢了大量的力量，并且得到了上层某个大人的帮助，不论是高端战力（戈尔VS凯伊姆）还是低端战力，已经完全的碾压了不蚀金锁，不蚀金锁走投无路，向羽狩的管理者---鲁基乌斯发起了求助，二者多次会面，由凯伊姆和希丝蒂娜保证了会议安全的进行。与此同时，艾莉丝一直苦恼于凯伊姆不肯接受自己的爱意，而凯伊姆一方面被形式困扰，另一方面也被艾莉丝的感情纠葛。原来凯伊姆是喜欢艾莉丝的，但凯伊姆曾经是个杀手，在一次执行任务过程中，杀掉了一对夫妇以后，从他们家地下室找出了个小孩子，交给了娼妇馆，然后给艾莉丝赎身，并且一直照顾着艾莉丝，来弥补着内心的罪恶。所以他自认为没有资格和艾莉丝在一起。艾莉丝也因凯伊姆的屡次拒绝，开始体现了自己病娇的一面，她想哪怕不能嫁给你，也要让你亲手杀死她，所以艾莉丝追求不成，变成想让男主杀掉她，为此她叛逃到风情，当人质，然后通风报信，希望男主对她失望透顶来杀掉她。男主和吉克在基地被抓，在艾莉丝面前，男主道出了一切，但艾莉丝丝毫不在意，表达了一切都无所谓，只希望有凯伊姆的世界，同时吉克的计划运行，吉克将媞娜作为羽化病人藏了起来，然后栽赃给贝尔纳德，让官方的羽狩成功介入，终于取得了竞争的胜利，同时凯伊姆接受了艾莉丝的感情，不蚀金锁将毒品焚烧后，二者在牢狱安定的居住了下来。 ![enter image description here][17] ## 第三章 圣女真相，与柯雷特拉菲的相识相知 ## ---------- - ## 出场人物介绍 ## **柯蕾特** 代替承担<大崩落>的责任而被处刑的先代圣女，以祈祷之力将都市诺维斯·艾特尔留于上空的第29代圣女。因为失去了光明所以被称为<失明圣女>，在民众中人气非常大。能听到天使的声音。与拉菲利亚是患难姐妹，对她有无与伦比的信任和感情。虽然外表有时给人很冷漠的感觉，但完全是个天然的少女。 ![enter image description here][18] **拉菲莉亚** 和圣女柯蕾特共同居住于圣域，除了照顾她的起居生活外，还负责联络教会的神官们。和圣女达到今日的地位之前就和她有来往，两人情同姐妹，现在两人关系也很密切。性格稳健又表里如一，但因长期居住于圣域内，多少有点不懂世故、天真过头。 ![enter image description here][19] **纳达尔** 他是神官长，也就是居于众神官之首的人，教会的实质业务都由他职掌着。作为神官长，不仅负责对外的交涉谈判，还具备以圣职者的特权为基础的政治影响力。当然，普通的民众是不会知道这职位的重要性的。他经受住大崩落后的严峻形势而成为神官长，在教会内部有着极高的威望。 ![enter image description here][20] - ## 剧情介绍 ## 在上一章焚烧毒品的时候，一丢丢福音飞了出来，被媞娅翅膀吸收，发出了光亮，而盲眼圣女感觉到了这点世界的光亮，通知将牢狱的圣子带到圣城和她居住，凯伊姆陪同媞娅到了圣城，见到了圣女的侍从，拉菲莉亚以及圣女，二者对媞娅和凯伊姆十分尊敬，希望他们能在圣城住下，并且准备将圣子的身份告知世界，而与此同时，神官长纳达尔知道了这一事件，竭力阻止，但并没有成功只得做出短暂让步，并且警告圣女最近地震发生频繁，希望她能竭力祈祷，以保大家平安。 ![enter image description here][21] 凯伊姆和媞娅在圣城住下，开始了和圣女以及拉菲的日常，凯伊姆发现圣女对拉菲十分苛责严厉，经常责备拉菲，而拉菲一直没有任何怨言，一味的让步和忍让，十分的宠溺圣女。凯伊姆被拉菲认真一丝不苟的的样子所打动，所以开始给拉菲出各种小招，让她在与人交流时候用上，帮助很大，让拉菲成功达成目标。拉菲一度很感谢凯伊姆并对其暗生情愫，二者关系直线升温。于此同时，凯伊姆也和圣女有所交流，跟着观看了圣女一天的日常，每天祈祷，然后下棋打发时间，弹琴，休息，去面见众人给他们信心，告诉他们自己会坚持祈祷。 ![enter image description here][22] ![enter image description here][23] 在圣女面见大家准备告知他们圣子之事的时候，崩落，发生了......所以，圣女直接被囚禁起来，而凯伊姆也急急忙忙跑回牢狱查看情况，却发现，菲诺列塔已经消失了，同时那个爱笑的老板娘，也消失在了他的世界，吉克和凯伊姆悲伤欲绝，凯伊姆跑到圣城质问圣女为什么不好好祷告，得到了结论--圣女和漂浮没有任何关系，圣女的作用就是在崩落发生后，跳下浮空城，以泄民愤。在最后一晚，拉菲向凯伊姆讲述了自己二人的故事，她们本来是孤儿，在牢狱的最下层活着相依为命，二者被纳达尔看重。当时的圣女候补是拉菲，而拉菲得知了圣女的职责后退却了，柯雷特接替了拉菲的职责，所以拉菲一直对柯雷特怀着歉意，现在她觉得该自己履行圣女职责了，她让凯伊姆带走柯雷特，他来佯装圣女。凯伊姆见到柯雷特，柯雷特邀请其一起下棋，一步一步透露出自己的害怕，在凯伊姆的安慰下，表达了自己对凯伊姆的憧憬，希望最后能够献身凯伊姆，疲劳加上红酒中的安眠药，柯雷特沉沉睡去，被凯伊姆带出圣城。 ![enter image description here][24] 凯伊姆面前吉克，希望他们能救下圣女，吉克虽然怀疑并对圣女满含怒气，但还是相信了凯伊姆的决定，将跳下的圣女用网救下。拉菲从悬崖跳下，被醒来的柯雷特拦住，二人相拥跳下，被凯伊姆的设置救活，凯伊姆表达了他对柯雷特拉菲所说--圣女和悬浮没有关系这句话的信任，与吉克决裂，带着拉菲柯雷特在下层过上平民的生活。（若未接受柯雷特献身，则会与拉菲在一起） ![enter image description here][25] ## 第四章 王室纷争，与莉西娅的互帮互助 ## ---------- - ## 出场人物介绍 ## **莉西娅** 王家的首席公主，内心十分单纯。由于现今的国王卧病不起，她开始代理其管理政务。有的贵族为了揶揄她，将其奉为<无冕女王>，但本人却完全不予理睬。虽然贵为王家之人但却对世俗之事很感兴趣，经常从仆人那里抢些炊事和裁缝之类的工作，着实让人烦恼。为了追随父亲的理想而不断努力，自身又十分崇敬父亲，渴望得到父亲的认可和父爱。 ![enter image description here][26] **基尔巴鲁特** 担任着“执政”——一个负责支持国王进行日常政务的职位，贵族们基本都尊称他为「执政公」。家世一般，他是在无数激烈的权位之争中胜出，最终取得今日地位的。现任国王因病不起，王位第一继承人的莉西亚公主又还太年轻，身为「执政公」的他自然责任重大。很疼爱自己的妻子，为了复活自己的妻子可以把整个王国的人民置之不理。 ![enter image description here][27] **法利亚斯** 青年时代就被国王看重而提拔为骑士，论忠心的话无人能出其右。现在是统率着近卫兵的“近卫骑士团团长”。如今国王卧床不起，他一边祈祷国王早日康复，一边竭力维持城内秩序。像父亲一般的疼爱着莉西亚。 ![enter image description here][28] - ## 剧情介绍 ## 凯伊姆向吉克表达了自己也不是完全相信柯雷特所说之话，将二女作为人质交给吉克，自己决定去上层寻求答案。与此同时，鲁基乌斯表达了自己想要谋反的事情，准备推翻执政宫的统治，让王女执政，并且透露了自己的身份，他是凯伊姆的哥哥阿依姆，需要凯伊姆的帮助。凯伊姆同意了，作为护卫和鲁基乌斯一起去了王城，他独自在王城散步时候，遇到了女仆装扮的王女，王女对下层生活很感兴趣，于是命令他陪着他讲故事，给她讲讲下层人民的幸福生活。 ![enter image description here][29] 凯伊姆开始了同莉西亚的陪伴生活，陪着她一起玩闹，陪着她一起在王城乱来，并且在关键时候指点她应该怎么做，深得莉西亚信任。在执政宫探子不在的时候，像王女说明了下层的悲惨生活，并将王女偷偷带出了王城，王女见到了下层的生活，并且得知了执政官在欺骗她，并害死了她父亲的事实。王女试图反抗，但却发现执政官力量太过强大，陷入了悲伤与自我厌恶。男主将莉西亚从这种情绪中拉出，教他带着他一步一步，走上反抗的道路。得到了王女支持的鲁基乌斯也开始了自己计划的实行，并且在最后，由于莉西亚的坚决果敢打动了法利亚斯，法利亚斯选择为莉西亚而战，成功的集结大部分力量发起叛乱，凯伊姆和法利亚斯二人竭力，成功击杀使用福音实力暴增的戈尔，凯伊姆接受了莉西亚的求婚，并且用鲁基乌斯弟弟拿到了贵族身份，和莉西亚结合在王城生活下去。 ![enter image description here][30] ![enter image description here][31] ## 第五章 探知真相，与媞娅终成眷属 ## ---------- - ## 出场人物介绍 ## **天使·媞娅** 其真实身份是第一代圣女伊琳娜的女儿，也是天使的后代。具有净化一切羽化病以及“福音”（黑色的粉末）和“黑雾”的能力，净化之后可吸收那些能量使得自己的翅膀长大，但是每次使用净化的能力，身体就会变得痛苦，净化使用强度越大，痛苦就深。 ![enter image description here][32] - ## 剧情介绍 ## 凯伊姆拒绝王女的爱意时候，但并且在和戈尔的战斗中，选择跟随王女去追逐执政官，法利亚斯与戈尔同归于尽。同时也是他的战死前的举动开启了研究所之门，二人将执政宫打到后，得知了城市漂浮的真相---天使的力量。而羽化病人是因为执政官一次使用天使力量复活自己妻子失败，外泄而出，治疗院是为了收集这些天使的力量。而媞娅的身份也接晓，下一代的天使，尚未觉醒的天使，鲁基乌斯把持朝政，但他把能够解决城市的漂浮的问题放在一切问题之首。以万民福祉为由继续缇娅恢复天使力量的试验，而凯伊姆也同意了试验。媞娅一方面忍受着实验的痛苦，一方面忍受着对凯伊姆的思念，为了鉴定能拯救凯伊姆，媞娅忍着剧痛净化福音和羽化病，来增强自己的力量，媞娅发现随着自己力量的提升，自己的记忆也缓缓消退，一方面是痛苦与遗忘凯伊姆的悲伤，另一方面是凯伊姆的性命。媞娅在痛苦与绝望中为了凯伊姆，一步一步忍受着试验的安排。 ![enter image description here][33] ![enter image description here][34] 凯伊姆听从了鲁基乌斯的建议，从理性角度为了避免牢狱人恐慌进入下层而没有告诉牢狱众人真相。吉克因凯伊姆不告诉他所有的真实而怀疑凯伊姆站在了上层那一边，二者决裂。而后。吉克和柯雷特为了拯救牢狱，利用鲁基乌斯带缇娅去牢狱净化黑色液体散发的光亮，假称圣女复活，以此为精神支柱发动牢狱的起义。莉西亚因为不想流血发生决定投降，但被鲁基乌斯软禁，随后开始了上层下层与牢狱的战争。鲁基乌斯为了阻挠起义，故意制造了第三次崩塌。在这一过程中凯伊姆终于认识到自己的理性是那么得冷酷，鲁基乌斯是那么得只考虑结果而不在乎人命。凯伊姆放出了王女，莉西亚表示投降，两军和解。 ![enter image description here][35] 凯伊姆决定放弃悬浮，大家一起死亡，前去解救被捆绑到力量抽取台的缇娅，恰逢鲁基乌斯为了完成缇娅最后的觉醒拿剑刺向缇娅。兄弟二人决斗展开，凯伊姆战胜了鲁基乌斯，解救缇娅。浮空城直线下落，地底的黑色液体即将毁灭整个城市，最后凯伊姆唤醒了缇娅，向媞娅表达了自己对她的思念和爱意，准备与其一同迎接死亡，缇娅知道凯伊姆真心后却想让凯伊姆活下去，释放全部力量净化整个世界的黑色液体，浮空城落到地面，但大地早已被媞娅恢复，而天使媞娅也消散于天地间…… ![enter image description here][36] ## 剧情点评 ## ---------- 我认为这样树枝状分叉但又主干明显的剧情非常棒，尤其是这种精致的剧情之作上就更加值得推崇。虚构一个浮空城市的设想也很新颖，大崩落的悲剧背景也非常的吸引人眼球，因为已经发生的悲剧给人以很强的既视感。而且全作以以西方中世纪风格刻画，特色十足的同时更能够表达整个主题。算是我最喜欢的一部神作，也希望大家都玩玩看。 **全剧终** [1]: https://chongliu.me/media/user_67/2013101617291091113.jpg [2]: https://chongliu.me/media/user_67/a5c27d1ed21b0ef4f0da445addc451da81cb3e80.jpg [3]: https://chongliu.me/media/user_67/03087bf40ad162d9cec2be1811dfa9ec8a13cd82.jpg [4]: https://chongliu.me/media/user_67/79f0f736afc379311a475a2debc4b74543a91182.jpg [5]: https://chongliu.me/media/user_67/4bed2e738bd4b31c9e14556e82d6277f9e2ff83f.jpg [6]: https://chongliu.me/media/user_67/e850352ac65c10383b7b0f17b7119313b17e89da.jpg [7]: https://chongliu.me/media/user_67/bd315c6034a85edf29fa3ff64c540923dc5475f5.jpg [8]: https://chongliu.me/media/user_67/5bafa40f4bfbfbed515ff7aa7df0f736aec31fe5.jpg [9]: https://chongliu.me/media/user_67/0b7b02087bf40ad149d50636522c11dfa9ecce36.jpg [10]: https://chongliu.me/media/user_67/AMGI4_YC1150HRQQPU.png [11]: https://chongliu.me/media/user_67/9ICT_D2D8JTSTC8Y.png [12]: https://chongliu.me/media/user_67/9KVYV1C53XJU7_UD.jpg [13]: https://chongliu.me/media/user_67/8RVU5D0D1X3MI7M6J7U7.png [14]: https://chongliu.me/media/user_67/8326cffc1e178a82b017be75f303738da977e838.jpg [15]: https://chongliu.me/media/user_67/a8773912b31bb051f6e971fd337adab44bede012.jpg [16]: https://chongliu.me/media/user_67/38dbb6fd5266d016e90053fd922bd40734fa35ce.jpg [17]: https://chongliu.me/media/user_67/2EB0PVDY3DBXJ0.jpg [18]: https://chongliu.me/media/user_67/730e0cf3d7ca7bcb435106fabb096b63f624a839.jpg [19]: https://chongliu.me/media/user_67/48540923dd54564e377128ecb6de9c82d0584fcb.jpg [20]: https://chongliu.me/media/user_67/1b4c510fd9f9d72a3206ddc8d12a2834359bbb81.jpg [21]: https://chongliu.me/media/user_67/I9RLSULBHGSOTFYD8R.png [22]: https://chongliu.me/media/user_67/Z3Y6OZBAPL_ACMAK9DA.png [23]: https://chongliu.me/media/user_67/TNN8L706XGWOUJV8.png [24]: https://chongliu.me/media/user_67/UBL2Z2UBT_QP2JIKQD.png [25]: https://chongliu.me/media/user_67/7VNK_0FSD1VC38OY.png [26]: https://chongliu.me/media/user_67/7dd98d1001e93901a2874ceb7eec54e737d1965a.jpg [27]: https://chongliu.me/media/user_67/a686c9177f3e67090964882a3ec79f3df9dc55fb.jpg [28]: https://chongliu.me/media/user_67/9a504fc2d56285356f831ff495ef76c6a6ef6380.jpg [29]: https://chongliu.me/media/user_67/Q3K69FBP7EL59TJWK51FV.png [30]: https://chongliu.me/media/user_67/DI2XE_WNV1J3ECH6A.png [31]: https://chongliu.me/media/user_67/ZRAGI_7DFV20FLOY3.png [32]: https://chongliu.me/media/user_67/NVU5GW12C_5ECXPNI.png [33]: https://chongliu.me/media/user_67/YIQFOME_W3DTCXLFRXBY.png [34]: https://chongliu.me/media/user_67/I63Y8UG9XXZF8SDUP.png [35]: https://chongliu.me/media/user_67/44ZOR78WKET__X.png [36]: https://chongliu.me/media/user_67/VV__AXH80O4ENBA3.png

# 一、 综述 键盘快捷键是用户在浏览网页的时候通关键盘按出一些组合键来实现一些功能，能使页面更加简洁。、 # 二、按键规定 |符号|按键| |:-----:|:------:| |↑|键盘的向上按键| |↓|键盘的向上按键| |←|键盘的向左按键| |→|键盘的向右按键| |小写字母|对应字母的按键| |数字|对应数字的按键| ## 注意: **1. 小写字母在按的时候要注意大写锁定是关闭** **2. 数字键是字母键盘上面的数字键，不是键盘最右边的9宫格数字键** **3. 以下快捷键均不包含空格** # 三、参考 ## 1. 切换背景 ### 1. 介绍 切换背景主要用于在上班或者有**大人**在身边的时候用于遮人耳目用的。能瞬间切换到健全壁纸，毫无压力。重复按键能反复切换背景。 ### 2. 按键 ### ← ↑ → ↓ ## 2. 只显示背景 ### 1. 介绍 只显示背景就是隐藏所有页面上所有的元素，只剩背景，主要在屏幕脏的时候使用。 ### 2. 按键 ### ↑ ↑ ↓ ↓ ← → ← → b a ## 3. 浏览博客列表 ### 1. 介绍 浏览博客列表的时候，无需手动翻屏，使用vim键位即可实现快速定位，注意这个仅在博客列表页面有效。 ### 2. 按键 |按键|功能| |:-----:|:------:| |j|浏览下一个博客| |k|浏览上一个博客| |l|浏览下一页博客| |h|浏览上一页博客| ## 4. 浏览详情页 ### 1. 介绍 浏览博客详情页的时候，无需手动翻屏，使用vim键位即可实现快速浏览评论，注意这个仅在博客详情页面有效。 ### 2. 按键 |按键|功能| |:-----:|:------:| |j|浏览下一个评论| |k|浏览上一个评论| |l|浏览同层次下一个评论| |h|浏览同层次上一个评论| 说明一下，jk用于DOM树先序遍历的前后节点，hl用于DOM树遍历前后兄弟节点。实在不太明白可以自己试一试，很快就能有体会。 ## 4. 弹琴 ### 1. 介绍 在任意时候，想弹琴进行玩耍的时候，可以在键盘上敲击出音乐。提供4种音色，音域从C1到B8一共8个八度，可以说足够用了。默认状态下键盘上的c键演奏出来的是C5. 激活弹琴功能的按键是 ! @ \# 退出也是同样的按键操作。 ### 2. 按键 |按键|功能| |:-----:|:------:| |↑|整体提高一个八度| |↓|整体降低一个八度| |←|切换上一个音色| |→|切换下一个音色| |q|演奏C3| |2|演奏C\#3| |w|演奏D3| |3|演奏D\#3| |e|演奏E3| |r|演奏F3| |5|演奏F\#3| |t|演奏G3| |6|演奏G\#3| |y|演奏A3| |7|演奏A\#3| |u|演奏B3| |i|演奏C4| |9|演奏C\#4| |o|演奏D4| |0|演奏D\#4| |p|演奏E4| |[|演奏F4| |=|演奏F\#4| |]|演奏G4| |a|演奏G\#4| |z|演奏A4| |s|演奏A\#4| |x|演奏B4| |c|演奏C5| |f|演奏C\#5| |v|演奏D5| |g|演奏D\#5| |b|演奏E5| |n|演奏F5| |j|演奏F\#5| |m|演奏G5| |k|演奏G\#5| |,|演奏A5| |l|演奏A\#5| |.|演奏B5|

《白夜行》是《嫌疑人X的献身》后，我读的第二本东野圭吾的书。《白夜行》的叙事方式和《嫌疑人》不一样。前者是通过不同人的视角来讲述和推动整个故事，并设立两个看似毫无关系人物的视角，而后者是一开始就揭露了幕后黑手，不过隐匿了犯罪的核心，故事重心在石神和教授的各种斗智斗勇。如果说《嫌疑人》带给我的是在爱面前强烈的执行力和奉献精神的话，《白夜行》带给我的更多的是无奈和绝望。 先说说故事叙事方式带给我的惊喜，然后再谈谈整个故事带给我的一些感受。 《白夜行》主要由两条线展开的，对应故事的男女主角。故事是从一个命案开始的。男主亮司的父亲在一栋废弃的大楼里被发现杀害。他父亲是当铺的老板，警方从财产纠纷的角度来进行调查。在调查过程中，有几个细节我现在看来是很好的，首先是对命案的反应上来看，亮司异常冷静，读的书都是《汽车制造》这种一般小学生根本不会读的书。一般小学生要是知道自己父亲被杀了一般都吓傻了，但是亮司异常冷静，就隐性地暗示读者。在警察的调查中，描写了亮司的母亲在平时都装扮地很妖艳，桐原当铺的帮手松浦对于案件的某些问题极力回避，都为后期收尾做好了伏笔。同样，警方在调查过程中锁定当铺的顾客单身母亲西本文代，文代家很穷，事发当天最后亮司父亲提款一百万来文代家里，并带有蛋糕，怀疑他们两个有染，同样警方也查出了追求文代的另一个人忠夫。警方理所当然怀疑忠夫为了钱杀害了亮司父亲。但是不久后忠夫死于车祸意外，同时文代也死于煤气中毒。而文代的女儿正是女主西本雪穗。对雪穗的描写也很有意思。她很文静，案发调查雪穗在读《飘》。同样雪穗也是和亮司一样，读一般小学生根本不会碰的书，比起同龄人成熟很多。文代死亡现场是雪穗回家忘带钥匙，叫租房管理员来开门，发现家里窗户紧闭，煤气没关。最后死于煤气中毒。同样，雪穗对母亲的死也异常冷静，没有一滴泪，只在母亲的葬礼上哭得很厉害。当时叫管理员开门的时候，描写了钥匙串上的饰物。 前面就是第一章大致的描写。在我读完整个故事的时候，我觉得这种设计非常巧妙。前面描写亮司他父亲提款给文代，在没有后来的信息看来下手的多半是文代，或者是忠夫。但是误区就在这里，作者给读者一种“错误”的引导。他爸的目标根本不是文代，而是文代当时还在读小学五年级的女儿雪穗。文代因为缺钱，居然做出拿女儿去卖淫这种荒唐的事情。当时亮司他爸拿一百万是为了“买下”雪穗。亮司之前在那栋大楼里面玩耍的时候，时不时看到雪穗被侵犯，当时亮司和雪穗经常在图书馆里面读书，交流，可以说建立了感情。终于在父亲“买下”雪穗的那天，亲自杀害了自己的父亲，并从管道逃走。当然这件事情当时的母亲和松浦都不知道，但是神奇的是当时他们口供达成一致。可以说这里就知道他母亲和松浦是有一腿的。案发当天，亮司出门的时候，他们两个还在上面寻欢，当然要保守这个秘密，就说亮司和他母亲在楼上看电视，松浦负责看店。所以说男主和女主的家庭生活环境就非常畸形。亮司的父亲是恋童癖，经常和其他嫖客去侵犯自己最喜欢的女生，自己的母亲和员工通奸，做猥琐的事情。雪穗的母亲为了所谓“生活”，亲自把自己的女儿送出去卖淫。可以说他们根本就感受不到来自家庭的爱与关怀，因此为他们后来的悲剧做好了铺垫。 后面的章节里面雪穗和亮司自始自终都没有正面的交集，都是两个人的故事分别展开的，但是看似毫无关联的故事之间往往通过物品和事件相关联的。比如中学时代雪穗给自己的好朋友江利子说要送一个手袋给自己的养母礼子，上面绣有**RK**字样，自己养母的名字就是这个。但是后来又描写不在一个中学上学的亮司桌子上出现了RK字样的袋子，说明他们之间肯定是有联系的。而亮司的名字的缩写正好是KR。后来也发生过亮司的同班同学拍到的小学时候他家房子的照片，亮司也通过某些手段销毁了照片，同时雪穗也通过让自己的劲敌被“强暴”，然后去医院看望来瓦解自己的劲敌。 后来的章节中，亮司开始从事拉皮条的工作，凑了一笔钱，顺便拉了一个小弟友彦。因为之前在他们搞事情的时候，友彦不小心把客户搞死了，她丈夫是黑道上的要找麻烦。这时候亮司通过某种手法将警察糊弄了过去。因为当时友彦带了避孕套，后来一个人假扮客户，骗过了酒店管理员，并且制造了客户没死的假象，为友彦制造了不在场证明。然后在死者身体里找到了和友彦血型不符的精液，因此友彦就成功逃脱了。精液的血型和亮司的血型相同，所以发生了一些恐怖的事情。小说接近结尾说亮司性功能有障碍，在干事的时候是射不出来的。在后来跟他拉拢的一个女子做口x的时候，提到她的手比较小，暗示有其他女人帮他撸过，这只能是雪穗，相当于只有雪穗能让他射出来。当晚假扮客户，然后帮亮司撸出来，然后把精液装入死者的身体。不得不说这手法简直了，执行力很高。 当然在后面的章节里面，这种时隐时现的暗示和巧合比比皆是，比如亮司做出雪穗家教开发的游戏啊，雪穗结婚后炒股资金来源啊，跟踪雪穗的侦探莫名死亡啊等等，真的不得不佩服东野圭吾的写作方式和写作水平。 然后再谈谈我对这个故事的一些感想。亮司和雪穗从小都在非常畸形的环境下长大的，一个弑父，一个弑母，都是家庭问题的直接受害者。亮司是一个纯粹的技术人士，他热爱电脑， 并且赶上了电脑高速发展的背景，靠自己的技术狠狠赚了不少钱。雪穗主打优雅线路，学习插花和茶道，在外给人一种万人迷的感觉。但是做事的时候也很狠。中学为了自己的目的利用自己最好的朋友江利子，然后在她开始交往，对自己产生威胁的时候果断故伎重演让她强行分手，可谓手法非常阴。 撇开他们犯的罪不说，我感受到的是在自己阴暗的成长环境下相互依靠的那种纯粹的爱。雪穗光鲜亮丽，在明处收集各种信息和情报，亮司在暗处，对于这些信息进行分析，并直接转换成经济效益，同时铲除周围碍事的人。在明处他们丝毫没有交集，就靠暗地里一直相互扶持，一起跨过了十九年。对于对方，他们这么说。 > 雪穗：”我的天空里没有太阳，总是黑夜，但并不暗，因为有东西代替了太阳。虽然没有太阳那么明亮，但对我来说已经足够。凭借着这份光，我便能把黑夜当成白天。我从来就没有太阳，所以不怕失去。” >亮司：“想要在白天走路。” 对于他们两个来说，太阳应该就是生活，虽然他们的生活非常黑暗，但是因为有对方的存在而让自己的生活多了一丝光亮，这可以说是支撑他们的理由，为了避免一切暴露，他们只能在暗处在一起，根本不能公开场合见面，这也是亮司说的想要在白天走路的原因。 纵观整个故事，他们受害于家庭，但是之后也加害于别人，最后自己也吞下恶果，可以说是一种因果循环和罪与罚。在他们丑恶犯罪的背后依然有闪光的纯粹的爱情，就是这样的闪光点让我感到无比惋惜。要是他们没有生于这样的家庭，他们的结局会变吗？亮司能和雪穗正大光明，靠电脑软件开发挣大钱吗？一切都是未知的，也正是这种遗憾，让我深深的不能忘怀吧。

不知不觉就开始读研究生了，花了各种时间和金钱来报道，不得不说当年确实太年轻了，一下把所有东西全部都丢了，导致最后啥都没有剩，全部去买，花了不少钱，完全是重复消费。 而且体检也是相当水，很多项目根本就不检查，可以说完全就是应付一下，不过这样也好。 报道遇到了不少老面孔，可以说虽然宿舍换了，但是很多人还是经常碰到。新的学生宿舍很有意思，上床下桌，这种待遇还暂时没有碰到过。不过比较遗憾的是来得比较晚，选到一个靠近门的位置，导致做一些事情就不太方便。不过相对地也留有一个空间来放我其他的杂物。 环境变了，自身也应发生一点改变。