Merge pull request #175 from ckcz123/v2.0

V2.0

README.md

@@ -50,6 +50,7 @@ HTML5 canvas制作的魔塔样板，支持全平台游戏！
 │ └─ 伤害和临界值计算器.exe       # 一个能帮助计算怪物的伤害和临界值的小工具。 http://github.com/ckcz123/magic-tower-calculator/
 ├── /启动服务(mac版).app/        # 启动服务的mac版本。  
 ├── editor.html      # 可视化地图编辑工具
+├── editor-mobile.html      # 可视化地图编辑工具（手机版）
 ├── index.html       # 主程序，游戏的入口
 ├── main.js          # JS程序的入口，将动态对所需JS进行加载
 ├── style.css        # 游戏所需要用到的样式表
@@ -58,6 +59,21 @@ HTML5 canvas制作的魔塔样板，支持全平台游戏！
 
 ## 更新说明
 
+### 2018.7.9 V2.3.3
+
+* [x] 适配手机端的造塔页面
+* [x] 启动服务的多开版本
+* [x] 新增事件：跟随效果
+* [x] 怪物数据导出器
+* [x] RM动画导出器也能导出音效
+* [x] gif播放可随着分辨率自动放缩
+* [x] 状态栏可随文字长度自动调整放缩
+* [x] 也可以用status:exp来代替经验值的写法
+* [x] V键也可以打开快捷商店
+* [x] 破炸在周围只有一个目标时无需转向面对它
+* [x] 道具效果中，无需再将null改成""才能双击编辑了
+* [x] 各个已知Bug的修复，部分细节优化
+
 ### 2018.6.16 V2.3.1
 
 * [x] 存档采用高比率压缩，单个大小是原来的1/10！

_server/css/editor_mobile.css

@@ -1,5 +1,5 @@
 html{
-    font-size: 4vmin;
+    font-size: 4vw;
 }
 input, textarea, select, button {
     font-size: 1rem;
@@ -29,8 +29,8 @@ body {
     box-sizing: border-box;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); */
     background-color: #F5F5F5;
-    width: 100vmin;
+    width: 100vw;
-    height: 100vmin;
+    height: 100vw;
 }
 
 #left {
@@ -49,13 +49,13 @@ body {
 
 #pout {
     display: block;
-    width: 410px;
+    width: 95vw;
-    height: 100%;
+    height: 62vw;
     box-sizing: border-box;
-    margin-left: 22px;
+    margin-left: 5vw;
     margin-top: 23px;
-    line-height: 20px;
+    line-height: 5vw;
-    font-size: 12.3px;
+    font-size: 12px;
     font-family: 'Lucida Console', Monaco, monospace;
     white-space: pre;
     border: 1px solid #ddd;
@@ -84,14 +84,14 @@ body {
 
 .map {
     position: absolute;
-    left: 4vmin;
+    left: 4vw;
-    top: 4vmin;
+    top: 4vw;
-    width: 96vmin;
+    width: 96vw;
-    height: 96vmin;
+    height: 96vw;
 }
 .map canvas{
-    width: 96vmin;
+    width: 96vw;
-    height: 96vmin;
+    height: 96vw;
 }
 
 #mid .tools {
@@ -200,9 +200,8 @@ body {
 
 #iconLib {
     position: absolute;
-    width: 100vmin;
+    width: 100vw;
-    height: 100vmin;
+    height: 100vw;
-    left: 5px;
     top: 5px;
     overflow: auto;
 }
@@ -249,7 +248,7 @@ body {
 }
 
 td {
-    border: 0.230vmin solid #fff;
+    border: 0.230vw solid #fff;
     color: #fff;
     cursor: crosshair;
 }
@@ -271,23 +270,23 @@ table.col td {
 
 #arrColMark {
     top: 2px;
-    left: 36px;
+    left: 5vw;
-    width: 385px;
+    width: 95vw;
     height: 16px;
     font-size: 13px;
 }
 
 #mapColMark {
     top: 0;
-    left: 4vmin;
+    left: 4vw;
-    width: 96vmin;
+    width: 96vw;
-    height: 4vmin;
+    height: 4vw;
-    font-size: 3vmin;
+    font-size: 3vw;
 }
 
 
 #mapColMark td {
-    width: 7.15vmin;
+    width: 7.15vw;
     padding: 0;
     border-bottom-width: 0px;
     border-top-width: 0px;
@@ -295,9 +294,9 @@ table.col td {
 
 #mapColMark td:hover .colBlock {
     position: absolute;
-    top: 4vmin;
+    top: 4vw;
-    height: 96vmin;
+    height: 96vw;
-    width: 7.15vmin;
+    width: 7.15vw;
     z-index: 100;
     background-color: rgba(38, 166, 154, .5);
 }
@@ -315,22 +314,22 @@ table.row td {
 
 #arrRowMark {
     top: 5px;
-    left: 2px;
+    left: 0;
-    width: 16px;
+    width: 4vw;
-    height: 262px;
+    height: 62vw;
     font-size: 12px;
 }
 
 #mapRowMark {
     top: 0;
     left: 0;
-    width: 4vmin;
+    width: 4vw;
-    height: 96vmin;
+    height: 96vw;
-    font-size: 3vmin;
+    font-size: 3vw;
 }
 
 #mapRowMark td {
-    height: 7.15vmin;
+    height: 7.15vw;
     padding: 0;
     border-left-width: 0px;
     border-right-width: 0px;
@@ -338,9 +337,9 @@ table.row td {
 
 #mapRowMark td:hover .rowBlock {
     position: absolute;
-    left: 4vmin;
+    left: 4vw;
-    height: 7.15vmin;
+    height: 7.15vw;
-    width: 96vmin;
+    width: 96vw;
     z-index: 100;
     background-color: rgba(76, 34, 27, .5);
 }
@@ -352,7 +351,7 @@ table.row td {
     border-style: solid;
     border-width: 1px;
     cursor: default;
-    font: normal 2.5vmin Arial, sans-serif;
+    font: normal 2.5vw Arial, sans-serif;
     margin: 0;
     outline: none;
     padding: 4px 0;
@@ -366,7 +365,7 @@ table.row td {
 }
 #midMenu .menuitem{
     color: #000;
-    font: normal 2.5vmin Arial, sans-serif;
+    font: normal 2.5vw Arial, sans-serif;
     list-style: none;
     margin: 0;
     padding: 4px 7em 4px 28px;
@@ -386,7 +385,7 @@ table.row td {
 }
 #midMenu .menuitem-content{
     color: #000;
-    font: normal 2.5vmin Arial, sans-serif;
+    font: normal 2.5vw Arial, sans-serif;
 }
 
 /* for vue dom */
@@ -397,7 +396,7 @@ table.row td {
 #down{
     position: absolute;
     left:0;
-    top:100vmin;
+    top:100vw;
     bottom: 0;
-    width: 100vmin;
+    width: 100vw;
 }

_server/css/editor_mode_mobile.css

@@ -3,14 +3,14 @@
     box-sizing: border-box;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); */
     background-color: #F5F5F5;
-    width: 100vmin;
+    width: 100vw;
-    height: 100vmin;
+    height: 100vw;
 }
 
 .leftTab {
     overflow: auto;
     position: absolute;
-    height: 100vmin;
+    height: 100vw;
 }
 
 .leftTab > * {
@@ -28,7 +28,7 @@
 .leftTab {
     left: 0;
     top: 0;
-    width: 100vmin;
+    width: 100vw;
 }
 
 .leftTab .leftTabHeader {
@@ -59,15 +59,15 @@
     overflow: hidden;
 }
 #left6 h3{
-    font-size: 3.5vh;
+    font-size: 6vw;
-    margin: 1vh 0;
+    margin: 1.77vw 0;
     
 }
 
 #left6 #blocklyArea {
 
-    width: 100vmin;
+    width: 100vw;
-    height: 60vh;
+    height: 100vw;
 }
 
 #left6 #blocklyDiv {
@@ -77,7 +77,7 @@
 #left6 .CodeMirror {
     border: 1px solid #eee;
 
-    height: 21vh;
+    height: 38vw;
     width: 100%;
 }
 
@@ -87,6 +87,13 @@
     overflow: y; /* resize:none; */
 }
 
+#left6 #blocklyDiv .blocklyToolboxDiv{
+    width:6vw;
+}
+#left6 #blocklyDiv .blocklyTreeLabel{
+    margin-left:-4vw;
+}
+
 #left7 {
     /* height: 440px; width: 375px;float:left; */
     left: 0;

_server/editor.js

@@ -388,7 +388,7 @@ editor.prototype.HTMLescape = function (str_) {
 }
 
 editor.prototype.listen = function () {
-
+    var eui=document.getElementById('eui');
     var uc = eui.getContext('2d');
 
     function fillPos(pos) {
@@ -399,9 +399,11 @@ editor.prototype.listen = function () {
     function eToLoc(e) {
         var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+        var xx=e.clientX,yy=e.clientY
+        if(editor.isMobile){xx=e.touches[0].clientX,yy=e.touches[0].clientY}
         editor.loc = {
-            'x': scrollLeft + e.clientX - mid.offsetLeft - mapEdit.offsetLeft,
+            'x': scrollLeft + xx - mid.offsetLeft - mapEdit.offsetLeft,
-            'y': scrollTop + e.clientY - mid.offsetTop - mapEdit.offsetTop,
+            'y': scrollTop + yy - mid.offsetTop - mapEdit.offsetTop,
             'size': editor.isMobile?(32*innerWidth*0.96/416):32
         };
         return editor.loc;
@@ -499,7 +501,6 @@ editor.prototype.listen = function () {
         }
         holdingPath = 0;
         e.stopPropagation();
-        var loc = eToLoc(e);
         if (stepPostfix && stepPostfix.length) {
             preMapData = JSON.parse(JSON.stringify(editor.map));
             currDrawData.pos = JSON.parse(JSON.stringify(stepPostfix));
@@ -681,7 +682,15 @@ editor.prototype.listen = function () {
         moveLoc.children[0].innerHTML='交换事件'+locStr+'与此事件的位置';
         midMenu.style='top:'+(y+scrollTop)+'px;left:'+(x+scrollLeft)+'px;';
     }
-    editor.hideMidMenu=function(){midMenu.style='display:none';}
+    editor.hideMidMenu=function(){
+        if(editor.isMobile){
+            setTimeout(function(){
+                midMenu.style='display:none';
+            },200)
+        } else {
+            midMenu.style='display:none';
+        }
+    }
 
     var chooseThis = document.getElementById('chooseThis');
     chooseThis.onmousedown = function(e){
@@ -693,6 +702,7 @@ editor.prototype.listen = function () {
         editor_mode.onmode('loc');
         //editor_mode.loc();
         //tip.whichShow = 1;
+        if(editor.isMobile)editor.showdataarea(false);
     }
 
     var chooseInRight = document.getElementById('chooseInRight');

_server/editor_blockly.js

@@ -250,7 +250,7 @@ var onresize = function(e) {
   blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
   Blockly.svgResize(workspace);
 };
-window.addEventListener('resize', onresize, false);
+if(typeof editor !== "undefined" && !editor.isMobile)window.addEventListener('resize', onresize, false);
 onresize();
 //Blockly.svgResize(workspace);
 

_server/editor_mode.js

@@ -118,13 +118,20 @@ editor_mode = function (editor) {
                         printe(field + ' : 输入的值不合要求,请鼠标放置在注释上查看说明');
                     }
                 }
-                input.ondblclick = function () {
+                var dblclickfunc=function () {
                     if (cobj._type === 'event') editor_blockly.import(guid, {type: cobj._event});
                     if (cobj._type === 'textarea') editor_multi.import(guid, {lint: cobj._lint, string: cobj._string});
                 }
-                // thisTr.onclick = function(){
+                input.ondblclick = dblclickfunc
-                //     editor.lastClickId=guid;
+                var doubleClickCheck=[0];
-                // }
+                thisTr.onclick = function(){
+                    var newClick = new Date().getTime();
+                    var lastClick = doubleClickCheck.shift();
+                    doubleClickCheck.push(newClick);
+                    if(newClick-lastClick<500){
+                        dblclickfunc()
+                    }
+                }
             });
         }
         return {"HTML": outstr.join(''), "guids": guids, "listen": listen};
@@ -632,6 +639,7 @@ editor_mode = function (editor) {
         editModeSelect.onchange = function () {
             editor_mode.onmode('nextChange');
             editor_mode.onmode(editModeSelect.value);
+            if(editor.isMobile)editor.showdataarea(false);
         }
 
         if (Boolean(callback)) callback();

editor-mobile.html

@@ -22,7 +22,7 @@
                 <textarea cols="10" rows="10" id="pout" v-model="mapArr"></textarea>
                 <p class="warnText" v-if="error">{{ errors[error-1] }}</p>
             </div>
-            <div id="editTip" style="position: absolute;width: 100%;margin-bottom: 20%;bottom: 0;left: 10px;">
+            <div id="editTip" style="position: absolute; width: 95vw;margin-bottom: 10%;bottom: 0;left: 4vw;">
                 <input type="button" value="新建空白地图" id='newMap'/>
                 <input id='newFileName' placeholder="输入新楼层id" style="width: 120px"/>
                 <input type="checkbox" id='newMapStatus' checked='checked' style='vertical-align: bottom'/>
@@ -271,6 +271,7 @@
                     <input type="button" value="显示完整名称"/>
                     <input type="button" value="显示完整注释"/>
                 </span>
+                <input type="button" value="前往游戏" onclick="window.location='./index.html'"/>
                 <!--  -->
                 <div id="bgSelect" v-cloak style="display:none">
                     <span>当前地板: </span>
@@ -453,13 +454,17 @@ var editor_mobile_listen=function(){
     var right=document.getElementById('right');
     var mobileeditdata=document.getElementById('mobileeditdata');
 
-    mobileview.children[0].onclick=function(){
+    
+    editor.showdataarea=function(callShowMode){
         mid.style='z-index:-1;opacity: 0;';
         right.style='z-index:-1;opacity: 0;';
         mobileeditdata.style='';
-        editor.mode.showMode(editModeSelect.value);
+        if(callShowMode)editor.mode.showMode(editModeSelect.value);
         editor.hideMidMenu();
     }
+    mobileview.children[0].onclick=function(){
+        editor.showdataarea(true)
+    }
     mobileview.children[1].onclick=function(){
         mid.style='';
         right.style='z-index:-1;opacity: 0;';
@@ -498,10 +503,20 @@ var editor_mobile_listen=function(){
         printf(info[0].children[1].getAttribute('title'))
     }
 
+    //=====
+
     document.body.ontouchstart=document.body.onmousedown;
     document.body.onmousedown=null;
 
-    //=====
+
+    var eui=document.getElementById('eui');
+    eui.ontouchstart=eui.onmousedown
+    eui.onmousedown=null
+    eui.ontouchmove=eui.onmousemove
+    eui.onmousemove=null
+    eui.ontouchend=eui.onmouseup
+    eui.onmouseup=null
+
 
     var chooseThis = document.getElementById('chooseThis');
     chooseThis.ontouchstart=chooseThis.onmousedown

main.js

@@ -2,7 +2,7 @@ function main() {
 
     //------------------------ 用户修改内容 ------------------------//
 
-    this.version = "2.3.1"; // 游戏版本号；如果更改了游戏内容建议修改此version以免造成缓存问题。
+    this.version = "2.3.2"; // 游戏版本号；如果更改了游戏内容建议修改此version以免造成缓存问题。
 
     this.useCompress = false; // 是否使用压缩文件
     // 当你即将发布你的塔时，请使用“JS代码压缩工具”将所有js代码进行压缩，然后将这里的useCompress改为true。

project/data.js

@@ -26,7 +26,7 @@ data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
 	"firstData" : {
 		"title": "魔塔样板",
 		"name": "template",
-		"version": "Ver 2.3.1",
+		"version": "Ver 2.3.2",
 		"floorId": "sample0",
 		"hero": { 
 			"name": "阳光",

更新说明.txt

@@ -1,16 +1,17 @@
 HTML5魔塔样板V2.3.2
 
-启动服务的多开版本  √
+适配手机端的造塔页面
-跟随效果  √
+启动服务的多开版本
+事件：跟随效果
 怪物数据导出器
-RM动画导出器也能导出音效  √
+RM动画导出器也能导出音效
-gif播放可随着分辨率自动放缩  √
+gif播放可随着分辨率自动放缩
-状态栏可随文字长度自动调整放缩  √
+状态栏可随文字长度自动调整放缩
-也可以用status:exp来代替经验值的写法  √
+也可以用status:exp来代替经验值的写法
-V键也可以打开快捷商店  √
+V键也可以打开快捷商店
-破炸在周围只有一个目标时无需转向面对它  √
+破炸在周围只有一个目标时无需转向面对它
-道具效果中，无需再将null改成""才能双击编辑了  √
+道具效果中，无需再将null改成""才能双击编辑了
-各个已知Bug的修复，部分细节优化  √
+各个已知Bug的修复，部分细节优化
 
 -----------------------------------------------------------------------