Merge pull request #238 from ckcz123/v2.0

V2.0
2018-10-16 23:41:10 +08:00 · 2018-10-16 23:41:10 +08:00 · 51acc7cabf
commit 51acc7cabf
parent fdb8d337e7 8ad043ad6c
16 changed files with 160 additions and 71 deletions
--- a/README.md
+++ b/README.md
@ -61,12 +61,13 @@ HTML5 canvas制作的魔塔样板，支持全平台游戏！
 * [x] 事件改变天气或画面色调，读档后仍有效
 * [x] Autotile自动元件的新增和注册
 * [x] 状态栏可以显示角色名字
+* [x] 浏览地图可以显伤
+* [x] 图片淡入淡出和移动图片可以将其保留
 * [x] 双击道具栏图标直接进入装备栏
 * [x] 可以设置剧情文本的字体大小
 * [x] 录像播放可以最高24倍速
 * [x] 1-6键快速设置录像播放速度；滚轮加减速
 * [x] 修复大地图的夹击Bug
-* [x] iOS设备默认关闭新版存档
 * [x] 部分其他细节优化

 ### 2018.9.28 V2.4.2
--- a/_server/blockly/MotaAction.g4
+++ b/_server/blockly/MotaAction.g4
@ -875,30 +875,32 @@ return code;
 */;

 animateImage_0_s
-    : '图片淡入' EvalString '起点像素位置' 'x' PosString 'y' PosString '动画时间' Int '不等待执行完毕' Bool Newline
+    : '图片淡入' EvalString '起点像素位置' 'x' PosString 'y' PosString '动画时间' Int '保留图片' Bool '不等待执行完毕' Bool Newline
    

 /* animateImage_0_s
 tooltip : animageImage：图片淡入
 helpUrl : https://ckcz123.github.io/mota-js/#/event?id=animateimage%EF%BC%9A%E5%9B%BE%E7%89%87%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BA
-default : ["bg.jpg","0","0",500,false]
+default : ["bg.jpg","0","0",500,true,false]
 colour : this.printColor
-var async = Bool_0?', "async": true':'';
-var code = '{"type": "animateImage", "action": "show", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "time": '+Int_0+async+'},\n';
+var keep = Bool_0?', "keep": true':'';
+var async = Bool_1?', "async": true':'';
+var code = '{"type": "animateImage", "action": "show", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "time": '+Int_0+keep+async+'},\n';
 return code;
 */;

 animateImage_1_s
-    : '图片淡出' EvalString '起点像素位置' 'x' PosString 'y' PosString '动画时间' Int '不等待执行完毕' Bool Newline
+    : '图片淡出' EvalString '起点像素位置' 'x' PosString 'y' PosString '动画时间' Int '清除图片' Bool '不等待执行完毕' Bool Newline
    

 /* animateImage_1_s
 tooltip : animageImage：图片淡出
 helpUrl : https://ckcz123.github.io/mota-js/#/event?id=animateimage%EF%BC%9A%E5%9B%BE%E7%89%87%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BA
-default : ["bg.jpg","0","0",500,false]
+default : ["bg.jpg","0","0",500,true,false]
 colour : this.printColor
-var async = Bool_0?', "async": true':'';
-var code = '{"type": "animateImage", "action": "hide", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "time": '+Int_0+async+'},\n';
+var keep = Bool_0?', "keep": true':'';
+var async = Bool_1?', "async": true':'';
+var code = '{"type": "animateImage", "action": "hide", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "time": '+Int_0+keep+async+'},\n';
 return code;
 */;

@ -929,16 +931,17 @@ return code;

 moveImage_0_s
    :   '图片移动' EvalString '起点像素位置' 'x' PosString 'y' PosString BGNL
-        '终点像素位置' 'x' PosString 'y' PosString '移动时间' Int '不等待执行完毕' Bool Newline
+        '终点像素位置' 'x' PosString 'y' PosString '移动时间' Int '保留图片' Bool '不等待执行完毕' Bool Newline
    

 /* moveImage_0_s
 tooltip : moveImage：图片移动
 helpUrl : https://ckcz123.github.io/mota-js/#/event?id=moveimage%EF%BC%9A%E5%9B%BE%E7%89%87%E7%A7%BB%E5%8A%A8
-default : ["bg.jpg","0","0","0","0",500,false]
+default : ["bg.jpg","0","0","0","0",500,true,false]
 colour : this.printColor
-var async = Bool_0?', "async": true':'';
-var code = '{"type": "moveImage", "name": "'+EvalString_0+'", "from": ['+PosString_0+','+PosString_1+'], "to": ['+PosString_2+','+PosString_3+'], "time": '+Int_0+async+'},\n';
+var keep = Bool_0?', "keep": true':'';
+var async = Bool_1?', "async": true':'';
+var code = '{"type": "moveImage", "name": "'+EvalString_0+'", "from": ['+PosString_0+','+PosString_1+'], "to": ['+PosString_2+','+PosString_3+'], "time": '+Int_0+keep+async+'},\n';
 return code;
 */;

@ -1836,10 +1839,10 @@ ActionParser.prototype.parseAction = function() {
    case "animateImage": // 显示图片
      if(data.action == 'show'){
        this.next = MotaActionBlocks['animateImage_0_s'].xmlText([
-          data.name,data.loc[0],data.loc[1],data.time,data.async||false,this.next]);
+          data.name,data.loc[0],data.loc[1],data.time,data.keep||false,data.async||false,this.next]);
      } else if (data.action == 'hide') {
        this.next = MotaActionBlocks['animateImage_1_s'].xmlText([
-          data.name,data.loc[0],data.loc[1],data.time,data.async||false,this.next]);
+          data.name,data.loc[0],data.loc[1],data.time,data.keep||false,data.async||false,this.next]);
      }
      break;
    case "showGif": // 显示动图
@ -1853,7 +1856,7 @@ ActionParser.prototype.parseAction = function() {
        break;
    case "moveImage": // 移动图片
      this.next = MotaActionBlocks['moveImage_0_s'].xmlText([
-        data.name, data.from[0], data.from[1], data.to[0], data.to[1], data.time, data.async||false, this.next
+        data.name, data.from[0], data.from[1], data.to[0], data.to[1], data.time, data.keep||false, data.async||false, this.next
      ]);
      break;
    case "setFg": // 颜色渐变
--- a/docs/element.md
+++ b/docs/element.md
@ -390,10 +390,11 @@ HTML5魔塔一大亮点就是存在录像系统，可以很方便进行录像回
 - **[G]** 打开/关闭楼层传送器
 - **[A]** 读取自动存档
 - **[S/D]** 打开/关闭存/读档页面
- **[K]** 打开/关闭快捷商店选择列表
+- **[K/V]** 打开/关闭快捷商店选择列表
 - **[T]** 打开/关闭工具栏
 - **[Q]** 打开/关闭装备栏
 - **[ESC]** 打开/关闭系统菜单
+- **[B]** 打开数据统计
 - **[H]** 打开帮助页面
 - **[R]** 回放录像
 - **[SPACE]** 轻按（仅在轻按开关打开时有效）
--- a/docs/event.md
+++ b/docs/event.md
@ -800,7 +800,7 @@ loc为图片左上角坐标，以像素为单位进行计算。

 ``` js
 "x,y": [ // 实际执行的事件列表
-    {"type": "animateImage", "action": "show", "name": "bg.jpg", "loc": [231,297], "time": 500}, // 在(231,297)淡入bg.jpg，动画时间500ms
+    {"type": "animateImage", "action": "show", "name": "bg.jpg", "loc": [231,297], "time": 500, "keep": true}, // 在(231,297)淡入bg.jpg，动画时间500ms
    {"type": "animateImage", "action": "hide", "name": "1.png", "loc": [109,167], "time": 300, "async": true}, // 在(109,167)淡出1.png，动画时间300ms，异步执行
 ]
 ```
@ -813,9 +813,9 @@ loc为图片左上角坐标，以像素为单位进行计算。

 time为淡入淡出的时间，如果是0则忽略此项。

-async可选，如果为true则会异步执行（即不等待当前事件执行完毕，立刻执行下一个事件）。
+keep可选，如果为true则在淡入图片后立刻调用showImage以保留图片，在淡出图片前先清除再动画。

-!> 淡入淡出图片只是会在顶层绘制“淡入”和“淡出”效果，动画结束即消失，并不会实际对图片的显示造成影响。请与showImage事件合用。
+async可选，如果为true则会异步执行（即不等待当前事件执行完毕，立刻执行下一个事件）。

 如果多张图片的淡入淡出可以采用以下方式（仅供参考）：

@ -846,7 +846,7 @@ loc为动图左上角坐标，以像素为单位进行计算。

 ``` js
 "x,y": [ // 实际执行的事件列表
-    {"type": "moveImage", "name": "bg.jpg", "from": [231,297], "to": [22,333], "time": 500, "async": true},
+    {"type": "moveImage", "name": "bg.jpg", "from": [231,297], "to": [22,333], "time": 500, "keep": true, "async": true},
 ]
 ```

@ -858,9 +858,9 @@ to为终点图片左上角坐标，以像素为单位进行计算。

 time为总移动的时间。

-async可选，如果为true则会异步执行（即不等待当前事件执行完毕，立刻执行下一个事件）。
+keep可选，如果为true则在移动结束后立刻调用showImage以保留图片。

-!> 移动图片只是会在顶层绘制“移动”效果，动画结束即消失，并不会实际对图片的显示造成影响。请与showImage事件合用。
+async可选，如果为true则会异步执行（即不等待当前事件执行完毕，立刻执行下一个事件）。

 ### setFg：更改画面色调

--- a/docs/personalization.md
+++ b/docs/personalization.md
@ -17,6 +17,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们
 - fg：前景层；绘制前景图层素材fgmap，和前景贴图
 - damage：显伤层；主要用来绘制怪物显伤和领域显伤
 - animate：动画层；主要用来绘制动画。showImage事件绘制的图片也是在这一层。
+- image：图片层；主要用来绘制显示图片
 - weather：天气层；主要用来绘制天气（雨/雪）
 - route：路线层；主要用来绘制勇士的行走路线图，也用来绘制图块的淡入/淡出效果，图块的移动等。
 - curtain：色调层；用来控制当前楼层的画面色调
--- a/editor-mobile.html
+++ b/editor-mobile.html
@ -409,6 +409,7 @@
        <!-- <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> -->
        <canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
        <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='image' width='416' height='416'></canvas>
        <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
        <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
        <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>
--- a/editor.html
+++ b/editor.html
@ -395,6 +395,7 @@
        <!-- <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> -->
        <canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
        <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='image' width='416' height='416'></canvas>
        <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
        <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
        <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>
--- a/index.html
+++ b/index.html
@ -122,6 +122,7 @@
        <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
        <canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
        <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='image' width='416' height='416'></canvas>
        <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
        <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
        <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>
--- a/libs/actions.js
+++ b/libs/actions.js
@ -309,6 +309,10 @@ actions.prototype.keyUp = function(keyCode) {
            if (core.status.heroStop)
                core.doSL("autoSave", "load");
            break;
+        case 66: // B
+            if (core.status.heroStop)
+                core.ui.drawStatistics();
+            break;
        case 83: // S
            if (core.status.heroStop)
                core.save(true);
@ -1018,6 +1022,12 @@ actions.prototype.clickViewMaps = function (x,y) {
    var cx = core.status.event.data.x, cy = core.status.event.data.y;
    var floorId = core.floorIds[index], mw = core.floors[floorId].width||13, mh = core.floors[floorId].height||13;

+    if (x==0 && y==0) {
+        core.status.event.data.damage = !core.status.event.data.damage;
+        core.ui.drawMaps(index, cx, cy);
+        return;
+    }
+
    if (x>=2 && x<=10 && y<=1 && mh>13) {
        core.ui.drawMaps(index, cx, cy-1);
        return;
@ -1083,6 +1093,10 @@ actions.prototype.keyUpViewMaps = function (keycode) {
        core.setOpacity('data', 1);
        core.ui.closePanel();
    }
+    if (keycode==86) {
+        core.status.event.data.damage = !core.status.event.data.damage;
+        core.ui.drawMaps(core.status.event.data.index, core.status.event.data.x, core.status.event.data.y);
+    }
    if (keycode==88 || (core.status.replay.replaying && keycode==67)) {
        if (core.isset(core.status.replay)&&core.status.replay.replaying) {
            core.bookReplay();
--- a/libs/control.js
+++ b/libs/control.js
@ -288,6 +288,7 @@ control.prototype.resetStatus = function(hero, hard, floorId, route, maps, value
            'totalTime': totalTime,
            'currTime': 0,
            'hp': 0,
+            "battle": 0,
            'battleDamage': 0,
            'poisonDamage': 0,
            'extraDamage': 0,
@ -1500,18 +1501,24 @@ control.prototype.setFg = function(color, time, callback) {
 }

 ////// 更新全地图显伤 //////
-control.prototype.updateDamage = function () {
+control.prototype.updateDamage = function (floorId, canvas) {

-    if (!core.isset(core.status.thisMap) || !core.isset(core.status.thisMap.blocks)) return;
+    if (!core.isset(floorId)) floorId = core.status.floorId;
+    if (!core.isset(canvas)) {
+        canvas = core.canvas.damage;
+        core.clearMap('damage');
+    }
+
+    // if (!core.isset(core.status.thisMap) || !core.isset(core.status.thisMap.blocks)) return;
    // 更新显伤
-    var mapBlocks = core.status.thisMap.blocks;
-    core.clearMap('damage');
+    var mapBlocks = core.status.maps[floorId].blocks;
    // 没有怪物手册
    if (!core.hasItem('book')) return;
-    core.setFont('damage', "bold 11px Arial");
+    canvas.font = "bold 11px Arial";
+
    var hero_hp = core.status.hero.hp;
    if (core.flags.displayEnemyDamage || core.flags.displayCritical) {
-        core.canvas.damage.textAlign = 'left';
+        canvas.textAlign = 'left';
        for (var b = 0; b < mapBlocks.length; b++) {
            var x = mapBlocks[b].x, y = mapBlocks[b].y;
            if (core.isset(mapBlocks[b].event) && mapBlocks[b].event.cls.indexOf('enemy')==0
@ -1520,7 +1527,7 @@ control.prototype.updateDamage = function () {
                // 非系统默认的战斗事件（被覆盖）
                if (mapBlocks[b].event.trigger != 'battle') {
                    // 判断显伤
-                    var event = core.floors[core.status.floorId].events[x+","+y];
+                    var event = core.floors[floorId].events[x+","+y];
                    if (core.isset(event) && !(event instanceof Array)) {
                        if (event.displayDamage === false)
                            continue;
@ -1550,14 +1557,14 @@ control.prototype.updateDamage = function () {
                            damage += "-";
                    }

-                    core.setFillStyle('damage', '#000000');
-                    core.canvas.damage.fillText(damage, 32 * x + 2, 32 * (y + 1) - 2);
-                    core.canvas.damage.fillText(damage, 32 * x, 32 * (y + 1) - 2);
-                    core.canvas.damage.fillText(damage, 32 * x + 2, 32 * (y + 1));
-                    core.canvas.damage.fillText(damage, 32 * x, 32 * (y + 1));
+                    canvas.fillStyle = '#000000';
+                    canvas.fillText(damage, 32 * x + 2, 32 * (y + 1) - 2);
+                    canvas.fillText(damage, 32 * x, 32 * (y + 1) - 2);
+                    canvas.fillText(damage, 32 * x + 2, 32 * (y + 1));
+                    canvas.fillText(damage, 32 * x, 32 * (y + 1));

-                    core.setFillStyle('damage', color);
-                    core.canvas.damage.fillText(damage, 32 * x + 1, 32 * (y + 1) - 1);
+                    canvas.fillStyle = color;
+                    canvas.fillText(damage, 32 * x + 1, 32 * (y + 1) - 1);
                }

                // 临界显伤
@ -1566,13 +1573,13 @@ control.prototype.updateDamage = function () {
                    if (critical.length>0) critical=critical[0];
                    critical = core.formatBigNumber(critical[0]);
                    if (critical == '???') critical = '?';
-                    core.setFillStyle('damage', '#000000');
-                    core.canvas.damage.fillText(critical, 32 * x + 2, 32 * (y + 1) - 2 - 10);
-                    core.canvas.damage.fillText(critical, 32 * x, 32 * (y + 1) - 2 - 10);
-                    core.canvas.damage.fillText(critical, 32 * x + 2, 32 * (y + 1) - 10);
-                    core.canvas.damage.fillText(critical, 32 * x, 32 * (y + 1) - 10);
-                    core.setFillStyle('damage', '#FFFFFF');
-                    core.canvas.damage.fillText(critical, 32 * x + 1, 32 * (y + 1) - 1 - 10);
+                    canvas.fillStyle = '#000000';
+                    canvas.fillText(critical, 32 * x + 2, 32 * (y + 1) - 2 - 10);
+                    canvas.fillText(critical, 32 * x, 32 * (y + 1) - 2 - 10);
+                    canvas.fillText(critical, 32 * x + 2, 32 * (y + 1) - 10);
+                    canvas.fillText(critical, 32 * x, 32 * (y + 1) - 10);
+                    canvas.fillStyle = '#FFFFFF';
+                    canvas.fillText(critical, 32 * x + 1, 32 * (y + 1) - 1 - 10);
                }

            }
@ -1580,23 +1587,41 @@ control.prototype.updateDamage = function () {
    }
    // 如果是领域&夹击
    if (core.flags.displayExtraDamage) {
-        core.canvas.damage.textAlign = 'center';
+        canvas.textAlign = 'center';
+
+        // 临时改变
+        var tempCheckBlock = null;
+        if (floorId != core.status.floorId) {
+            tempCheckBlock = core.clone(core.status.checkBlock);
+            core.status.thisMap = core.status.maps[floorId];
+            core.bigmap.width = core.floors[floorId].width || 13;
+            core.bigmap.height = core.floors[floorId].height || 13;
+            core.updateCheckBlock();
+        }
+
        for (var x=0;x<core.bigmap.width;x++) {
            for (var y=0;y<core.bigmap.height;y++) {
                var damage = core.status.checkBlock.damage[x+core.bigmap.width*y];
                if (damage>0) {
                    damage = core.formatBigNumber(damage);
-                    core.setFillStyle('damage', '#000000');
-                    core.canvas.damage.fillText(damage, 32 * x + 17, 32 * (y + 1) - 13);
-                    core.canvas.damage.fillText(damage, 32 * x + 15, 32 * (y + 1) - 15);
-                    core.canvas.damage.fillText(damage, 32 * x + 17, 32 * (y + 1) - 15);
-                    core.canvas.damage.fillText(damage, 32 * x + 15, 32 * (y + 1) - 13);
+                    canvas.fillStyle = '#000000';
+                    canvas.fillText(damage, 32 * x + 17, 32 * (y + 1) - 13);
+                    canvas.fillText(damage, 32 * x + 15, 32 * (y + 1) - 15);
+                    canvas.fillText(damage, 32 * x + 17, 32 * (y + 1) - 15);
+                    canvas.fillText(damage, 32 * x + 15, 32 * (y + 1) - 13);

-                    core.setFillStyle('damage', '#FF7F00');
-                    core.canvas.damage.fillText(damage, 32 * x + 16, 32 * (y + 1) - 14);
+                    canvas.fillStyle = '#FF7F00';
+                    canvas.fillText(damage, 32 * x + 16, 32 * (y + 1) - 14);
                }
            }
        }
+
+        if (floorId!=core.status.floorId) {
+            core.status.thisMap = core.status.maps[core.status.floorId];
+            core.status.checkBlock = tempCheckBlock;
+            core.bigmap.width = core.floors[core.status.floorId].width || 13;
+            core.bigmap.height = core.floors[core.status.floorId].height || 13;
+        }
    }
 }

--- a/libs/core.js
+++ b/libs/core.js
@ -233,8 +233,7 @@ core.prototype.init = function (coreData, callback) {
    core.platform.isSafari = /Safari/i.test(navigator.userAgent) && !/Chrome/i.test(navigator.userAgent);
    core.platform.isQQ = /QQ/i.test(navigator.userAgent);
    core.platform.isWeChat = /MicroMessenger/i.test(navigator.userAgent);
-    core.platform.useLocalForage = core.getLocalStorage('useLocalForage', true);
-    if (core.platform.isIOS) core.platform.useLocalForage=false;
+    core.platform.useLocalForage = core.getLocalStorage('useLocalForage', !core.platform.isIOS);
    if (core.platform.useLocalForage) {
        try {
            core.setLocalForage("__test__", LZString.compress("__test__"), function() {
--- a/libs/events.js
+++ b/libs/events.js
@ -132,8 +132,9 @@ events.prototype.gameOver = function (ending, fromReplay, norank) {

    // 清空图片和天气
    core.clearMap('animate');
-    core.dom.gif2.innerHTML = "";
+    core.clearMap('image');
    core.clearMap('weather')
+    core.dom.gif2.innerHTML = "";
    core.animateFrame.weather.type = null;
    core.animateFrame.weather.level = 0;
    core.animateFrame.weather.nodes = [];
@ -587,10 +588,10 @@ events.prototype.doAction = function() {
            break;
        case "showImage": // 显示图片
            if (core.isset(data.loc) && core.isset(core.material.images.images[data.name])) {
-                core.canvas.animate.drawImage(core.material.images.images[data.name],
+                core.canvas.image.drawImage(core.material.images.images[data.name],
                    core.calValue(data.loc[0]), core.calValue(data.loc[1]));
            }
-            else core.clearMap('animate');
+            else core.clearMap('image');
            this.doAction();
            break;
        case "animateImage": // 淡入淡出图片
@ -600,11 +601,11 @@ events.prototype.doAction = function() {
            else {
                if (core.isset(data.loc) && core.isset(core.material.images.images[data.name]) && (data.action=="show" || data.action=="hide")) {
                    if (data.async) {
-                        core.events.animateImage(data.action, core.material.images.images[data.name], data.loc, data.time);
+                        core.events.animateImage(data.action, core.material.images.images[data.name], data.loc, data.time, data.keep);
                        this.doAction();
                    }
                    else {
-                        core.events.animateImage(data.action, core.material.images.images[data.name], data.loc, data.time, function() {
+                        core.events.animateImage(data.action, core.material.images.images[data.name], data.loc, data.time, data.keep, function() {
                            core.events.doAction();
                        });
                    }
@ -637,11 +638,11 @@ events.prototype.doAction = function() {
            else {
                if (core.isset(data.from) && core.isset(data.to) && core.isset(core.material.images.images[data.name])) {
                    if (data.async) {
-                        core.events.moveImage(core.material.images.images[data.name], data.from, data.to, data.time);
+                        core.events.moveImage(core.material.images.images[data.name], data.from, data.to, data.time, data.keep);
                        this.doAction();
                    }
                    else {
-                        core.events.moveImage(core.material.images.images[data.name], data.from, data.to, data.time, function() {
+                        core.events.moveImage(core.material.images.images[data.name], data.from, data.to, data.time, data.keep, function() {
                            core.events.doAction();
                        });
                    }
@ -1355,7 +1356,7 @@ events.prototype.changeFloor = function (floorId, stair, heroLoc, time, callback
 }

 ////// 图片淡入/淡出 //////
-events.prototype.animateImage = function (type, image, loc, time, callback) {
+events.prototype.animateImage = function (type, image, loc, time, keep, callback) {
    time = time||0;
    if ((type!='show' && type!='hide') || time<=0) {
        if (core.isset(callback)) callback();
@ -1368,8 +1369,13 @@ events.prototype.animateImage = function (type, image, loc, time, callback) {
    var opacityVal = 0;
    if (type == 'hide') opacityVal = 1;

+    if (type == 'hide' && keep) {
+        core.clearMap('image');
+    }
+
    core.setOpacity('data', opacityVal);
-    core.canvas.data.drawImage(image, core.calValue(loc[0]), core.calValue(loc[1]));
+    var x = core.calValue(loc[0]), y = core.calValue(loc[1]);
+    core.canvas.data.drawImage(image, x, y);
    core.status.replay.animate=true;
    var animate = setInterval(function () {
        if (type=='show') opacityVal += 0.1;
@ -1377,6 +1383,8 @@ events.prototype.animateImage = function (type, image, loc, time, callback) {
        core.setOpacity('data', opacityVal);
        if (opacityVal >=1 || opacityVal<=0) {
            clearInterval(animate);
+            if (type == 'show' && keep)
+                core.canvas.image.drawImage(image, x, y);
            core.clearMap('data');
            core.setOpacity('data', 1);
            core.status.replay.animate=false;
@ -1386,12 +1394,14 @@ events.prototype.animateImage = function (type, image, loc, time, callback) {
 }

 ////// 移动图片 //////
-events.prototype.moveImage = function (image, from, to, time, callback) {
+events.prototype.moveImage = function (image, from, to, time, keep, callback) {
    time = time || 1000;
    clearInterval(core.interval.tipAnimate);
    core.setAlpha('data', 1);
    core.setOpacity('data', 1);

+    if (keep) core.clearMap('image');
+
    core.status.replay.animate=true;
    var fromX = core.calValue(from[0]), fromY = core.calValue(from[1]),
        toX = core.calValue(to[0]), toY = core.calValue(to[1]);
@ -1411,6 +1421,7 @@ events.prototype.moveImage = function (image, from, to, time, callback) {
            clearInterval(animate);
            core.clearMap('data');
            core.status.replay.animate=false;
+            if (keep) core.canvas.data.drawImage(image, toX, toY);
            if (core.isset(callback)) callback();
        }
    }, time / 64);
--- a/libs/ui.js
+++ b/libs/ui.js
@ -1440,10 +1440,31 @@ ui.prototype.drawBookDetail = function (index) {
    var enemyId=enemy.id;
    var hints=core.enemys.getSpecialHint(core.material.enemys[enemyId]);

-
    if (hints.length==0)
        hints.push("该怪物无特殊属性。");

+    // 吸血怪的最低生命值
+    if (core.enemys.hasSpecial(core.material.enemys[enemyId].special, 11)) {
+        var damage = core.getDamage(enemyId);
+        if (damage != null) {
+            // 二分HP
+            var start = 1, end = 100 * damage;
+            var nowHp = core.status.hero.hp;
+            while (start<end) {
+                var mid = Math.floor((start+end)/2);
+                core.status.hero.hp = mid;
+                if (core.canBattle(enemyId)) end = mid;
+                else start = mid+1;
+            }
+            core.status.hero.hp = start;
+            if (core.canBattle(enemyId)) {
+                hints.push("");
+                hints.push("打死该怪物最低需要生命值："+core.formatBigNumber(start));
+            }
+            core.status.hero.hp = nowHp;
+        }
+    }
+
    hints.push("");
    var criticals = core.enemys.nextCriticals(enemyId, 10).map(function (v) {
        return v[0]+":"+v[1];
@ -1594,7 +1615,7 @@ ui.prototype.drawMaps = function (index, x, y) {
    if (y<6) y=6;
    if (y>mh-7) y=mh-7;

-    core.status.event.data = {"index": index, "x": x, "y": y};
+    core.status.event.data = {"index": index, "x": x, "y": y, "damage": (core.status.event.data||{"damage":false}).damage};

    clearTimeout(core.interval.tipAnimate);
    core.clearMap('ui');
@ -2101,6 +2122,10 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, cente
        }
    })

+    // draw damage
+    if (core.status.event.id=='viewMaps' && (core.status.event.data||{}).damage)
+        core.control.updateDamage(floorId, tempCanvas);
+
    // draw to canvas
    core.clearMap(canvas, x, y, size, size);
    if (!core.isset(centerX)) centerX=parseInt(mw/2);
@ -2296,7 +2321,7 @@ ui.prototype.drawStatistics = function () {
        +"，总游戏时长"+formatTime(statistics.totalTime)
        +"。\n瞬间移动次数："+statistics.moveDirectly+"，共计少走"+statistics.ignoreSteps+"步。"
        +"\n\n总计通过血瓶恢复生命值为"+core.formatBigNumber(statistics.hp)+"点。\n\n"
-        +"总计受到的伤害为"+core.formatBigNumber(statistics.battleDamage+statistics.poisonDamage+statistics.extraDamage)
+        +"总计打死了"+statistics.battle+"个怪物，受到的伤害为"+core.formatBigNumber(statistics.battleDamage+statistics.poisonDamage+statistics.extraDamage)
        +"，其中战斗伤害"+core.formatBigNumber(statistics.battleDamage)+"点"
        +(core.flags.enableDebuff?("，中毒伤害"+core.formatBigNumber(statistics.poisonDamage)+"点"):"")
        +"，领域/夹击/阻击/血网伤害"+core.formatBigNumber(statistics.extraDamage)+"点。",
@ -2323,9 +2348,10 @@ ui.prototype.drawHelp = function () {
        "[G] 打开/关闭楼层传送器\n" +
        "[A] 读取自动存档（回退）\n" +
        "[S/D] 打开/关闭存/读档页面\n" +
-        "[K] 打开/关闭快捷商店选择列表\n" +
+        "[K/V] 打开/关闭快捷商店选择列表\n" +
        "[T] 打开/关闭工具栏\n" +
        "[ESC] 打开/关闭系统菜单\n" +
+        "[B] 打开数据统计\n" +
        // "[E] 显示光标\n" +
        "[H] 打开帮助页面\n"+
        "[R] 回放\n"+
--- a/project/functions.js
+++ b/project/functions.js
@ -137,6 +137,7 @@ functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =

 	// 记录
 	core.status.hero.statistics.battleDamage += damage;
+	core.status.hero.statistics.battle++;

 	if (core.status.hero.hp<=0) {
 		core.status.hero.hp=0;
@ -366,7 +367,7 @@ functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
 		[8, "反击", "战斗时，怪物每回合附加角色攻击的"+Math.floor(100*core.values.counterAttack||0)+"%作为伤害，无视角色防御"],
 		[9, "净化", "战斗前，怪物附加勇士魔防的"+core.values.purify+"倍作为伤害"],
 		[10, "模仿", "怪物的攻防和勇士攻防相等"],
-		[11, "吸血", function (enemy) {return "战斗前，怪物首先吸取角色的"+Math.floor(100*enemy.value||0)+"%生命作为伤害"+(enemy.add?"，并把伤害数值加到自身生命上":"");}],
+		[11, "吸血", function (enemy) {return "战斗前，怪物首先吸取角色的"+Math.floor(100*enemy.value||0)+"%生命（约" + Math.floor((enemy.value||0)*core.getStatus('hp')) + "点）作为伤害"+(enemy.add?"，并把伤害数值加到自身生命上":"");}],
 		[12, "中毒", "战斗后，勇士陷入中毒状态，每一步损失生命"+core.values.poisonDamage+"点"],
 		[13, "衰弱", "战斗后，勇士陷入衰弱状态，攻防暂时下降"+(core.values.weakValue>=1?core.values.weakValue+"点":parseInt(core.values.weakValue*100)+"%")],
 		[14, "诅咒", "战斗后，勇士陷入诅咒状态，战斗无法获得金币和经验"],
--- a/styles.css
+++ b/styles.css
@ -285,6 +285,10 @@ p#name {
    z-index: 70;
 }

+#image {
+    z-index: 75;
+}
+
 #weather {
    z-index: 80;
 }
--- a/更新说明.txt
+++ b/更新说明.txt
@ -7,12 +7,12 @@
 事件改变天气或画面色调，读档后仍有效
 Autotile自动元件的新增和注册
 状态栏可以显示角色名字
+浏览地图可以显伤
+图片淡入淡出和移动图片可以将其保留
 双击道具栏图标直接进入装备栏
 可以设置剧情文本的字体大小
 录像播放可以最高24倍速
 1-6键快速设置录像播放速度；滚轮加减速
-修复大地图的夹击Bug
-iOS设备默认关闭新版存档
 部分其他细节优化

 -----------------------------------------------------------------------