Merge pull request #244 from ckcz123/v2.0

V2.4.4

README.md

@@ -53,6 +53,15 @@ HTML5 canvas制作的魔塔样板，支持全平台游戏！
 
 ## 更新说明
 
+### 2018.10.27 V2.4.4
+
+* [x] tilesets可以设置图块属性（如可通行状态）
+* [x] 追加素材时可以更改图片色调
+* [x] 防作弊手段的进一步加强：打开控制台则禁止上传成绩
+* [x] 图块属性增加“是否可被破震”的选项
+* [x] 模仿怪物内置模仿临界计算器
+* [x] 部分其他细节优化
+
 ### 2018.10.14 V2.4.3
 
 * [x] 并行事件处理

_server/comment.js

@@ -228,14 +228,9 @@ comment_c456ea59_6018_45ef_8bcc_211a24c627dc =
                 },
                 "canBreak": {
                     "_leaf": true,
-                    "_type": "select",
+                    "_type": "checkbox",
-                    "_select": {
+                    "_bool": "bool",
-                        "values": [
+                    "_data": "该图块是否可被破墙或地震"
-                            true,
-                            false
-                        ]
-                    },
-                    "_data": "该图块是否可被破炸；true代表可以，false代表不可以"
                 }
             }
         },

_server/editor.js

@@ -81,7 +81,12 @@ editor.prototype.init = function (callback) {
 editor.prototype.idsInit = function (maps, icons) {
     editor.ids = [0];
     editor.indexs = [];
-    var MAX_NUM = Math.max.apply(null,Object.keys(maps_90f36752_8815_4be8_b32b_d7fad1d0542e));
+    var MAX_NUM = 0;
+    var keys=Object.keys(maps_90f36752_8815_4be8_b32b_d7fad1d0542e);
+    for(var ii=0;ii<keys.length;ii++){
+        var v=~~keys[ii];
+        if(v>MAX_NUM && v<core.icons.tilesetStartOffset)MAX_NUM=v;
+    }
     editor.MAX_NUM=MAX_NUM;
     var getInfoById = function (id) {
         var block = maps.initBlock(0, 0, id);

_server/editor_file.js

@@ -476,15 +476,25 @@ editor_file = function (editor, callback) {
         }
         ;
         if (isset(actionList) && actionList.length > 0) {
-            actionList.forEach(function (value) {
+            var tempmap=[];
+            for(var ii=0;ii<actionList.length;ii++){
+                var value=actionList[ii];
+                // 是tilesets 且未定义 且在这里是第一次定义
+                if(idnum>=editor.core.icons.tilesetStartOffset && !isset(editor.core.maps.blocksInfo[idnum]) && tempmap.indexOf(idnum)===-1){
+                    actionList.splice(ii,0,["add","['" + idnum + "']",{"cls": "tileset", "id": "X"+idnum, "noPass": true}]);
+                    tempmap.push(idnum);
+                    ii++;
+                }
                 value[1] = "['" + idnum + "']" + value[1];
-            });
+            }
             saveSetting('maps', actionList, function (err) {
                 callback([
                     (function () {
-                        var locObj = Object.assign({}, editor.core.maps.blocksInfo[idnum]);
+                        var sourceobj=editor.core.maps.blocksInfo[idnum];
+                        if(!isset(sourceobj) && idnum>=editor.core.icons.tilesetStartOffset)sourceobj={"cls": "tileset", "id": "X"+idnum, "noPass": true}
+                        var locObj = Object.assign({}, sourceobj);
                         Object.keys(editor_file.comment._data.maps._data).forEach(function (v) {
-                            if (!isset(editor.core.maps.blocksInfo[idnum][v]))
+                            if (!isset(sourceobj[v]))
                                 locObj[v] = null;
                         });
                         locObj.idnum = idnum;
@@ -496,9 +506,11 @@ editor_file = function (editor, callback) {
         } else {
             callback([
                 (function () {
-                    var locObj = Object.assign({}, editor.core.maps.blocksInfo[idnum]);
+                    var sourceobj=editor.core.maps.blocksInfo[idnum];
+                    if(!isset(sourceobj) && idnum>=editor.core.icons.tilesetStartOffset)sourceobj={"cls": "tileset", "id": "X"+idnum, "noPass": true}
+                    var locObj = Object.assign({}, sourceobj);
                     Object.keys(editor_file.comment._data.maps._data).forEach(function (v) {
-                        if (!isset(editor.core.maps.blocksInfo[idnum][v]))
+                        if (!isset(sourceobj[v]))
                             locObj[v] = null;
                     });
                     locObj.idnum = idnum;

_server/editor_mode.js

@@ -320,18 +320,11 @@ editor_mode = function (editor) {
         if (!core.isset(editor_mode.info.id)) {
             // document.getElementById('table_a3f03d4c_55b8_4ef6_b362_b345783acd72').innerHTML = '';
             document.getElementById('enemyItemTable').style.display = 'none';
-            document.getElementById('tilesetsDiv').style.display = 'none';
             document.getElementById('newIdIdnum').style.display = 'block';
             return;
         }
-        if (editor_mode.info.isTile) {
+
-            document.getElementById('enemyItemTable').style.display = 'none';
-            document.getElementById('tilesetsDiv').style.display = 'block';
-            document.getElementById('newIdIdnum').style.display = 'none';
-            return;
-        }
         document.getElementById('newIdIdnum').style.display = 'none';
-        document.getElementById('tilesetsDiv').style.display = 'none';
         document.getElementById('enemyItemTable').style.display = 'block';
 
         var objs = [];
@@ -506,9 +499,18 @@ editor_mode = function (editor) {
         var appendPicCanvas = document.getElementById('appendPicCanvas');
         var bg = appendPicCanvas.children[0];
         var source = appendPicCanvas.children[1];
+        var source_ctx=source.getContext('2d');
         var picClick = appendPicCanvas.children[2];
         var sprite = appendPicCanvas.children[3];
+        var sprite_ctx=sprite.getContext('2d');
         var appendPicSelection = document.getElementById('appendPicSelection');
+        
+        [source_ctx,sprite_ctx].forEach(function(ctx){
+            ctx.mozImageSmoothingEnabled = false;
+            ctx.webkitImageSmoothingEnabled = false;
+            ctx.msImageSmoothingEnabled = false;
+            ctx.imageSmoothingEnabled = false;
+        })
 
         var selectAppend = document.getElementById('selectAppend');
         var selectAppend_str = [];
@@ -526,8 +528,8 @@ editor_mode = function (editor) {
                 if (editor_mode.appendPic.img) {
                     sprite.style.width = (sprite.width = editor_mode.appendPic.img.width) / ratio + 'px';
                     sprite.style.height = (sprite.height = editor_mode.appendPic.img.height) / ratio + 'px';
-                    sprite.getContext('2d').clearRect(0, 0, sprite.width, sprite.height);
+                    sprite_ctx.clearRect(0, 0, sprite.width, sprite.height);
-                    sprite.getContext('2d').drawImage(editor_mode.appendPic.img, 0, 0);
+                    sprite_ctx.drawImage(editor_mode.appendPic.img, 0, 0);
                 }
                 return;
             }
@@ -550,7 +552,7 @@ editor_mode = function (editor) {
             }
             sprite.style.width = (sprite.width = img.width) / ratio + 'px';
             sprite.style.height = (sprite.height = img.height + ysize) / ratio + 'px';
-            sprite.getContext('2d').drawImage(img, 0, 0);
+            sprite_ctx.drawImage(img, 0, 0);
         }
         selectAppend.onchange();
 
@@ -581,8 +583,8 @@ editor_mode = function (editor) {
                     if (selectAppend.value == 'autotile') {
                         sprite.style.width = (sprite.width = image.width) / ratio + 'px';
                         sprite.style.height = (sprite.height = image.height) / ratio + 'px';
-                        sprite.getContext('2d').clearRect(0, 0, sprite.width, sprite.height);
+                        sprite_ctx.clearRect(0, 0, sprite.width, sprite.height);
-                        sprite.getContext('2d').drawImage(image, 0, 0);
+                        sprite_ctx.drawImage(image, 0, 0);
                     }
                     else {
                         var ysize = selectAppend.value.indexOf('48') === -1 ? 32 : 48;
@@ -608,7 +610,8 @@ editor_mode = function (editor) {
                     }
 
                     //把导入的图片画出
-                    source.getContext('2d').drawImage(image, 0, 0);
+                    source_ctx.drawImage(image, 0, 0);
+                    editor_mode.appendPic.sourceImageData=source_ctx.getImageData(0,0,image.width,image.height);
 
                     //重置临时变量
                     selectAppend.onchange();
@@ -618,6 +621,151 @@ editor_mode = function (editor) {
             return;
         }
 
+        var changeColorInput=document.getElementById('changeColorInput')
+        changeColorInput.oninput=function(){
+            var delta=(~~changeColorInput.value)*30;
+            var imgData=editor_mode.appendPic.sourceImageData;
+            var nimgData=new ImageData(imgData.width,imgData.height);
+            // ImageData .data 形如一维数组,依次排着每个点的 R(0~255) G(0~255) B(0~255) A(0~255)
+            var getPixel=function(imgData, x, y) {
+                var offset = (x + y * imgData.width) * 4;
+                var r = imgData.data[offset+0];
+                var g = imgData.data[offset+1];
+                var b = imgData.data[offset+2];
+                var a = imgData.data[offset+3];
+                return [r,g,b,a];
+            }
+            var setPixel=function(imgData, x, y, rgba) {
+                var offset = (x + y * imgData.width) * 4;
+                imgData.data[offset+0]=rgba[0];
+                imgData.data[offset+1]=rgba[1];
+                imgData.data[offset+2]=rgba[2];
+                imgData.data[offset+3]=rgba[3];
+            }
+            var convert=function(rgba,delta){
+                var round=Math.round;
+                // rgbToHsl hue2rgb hslToRgb from https://github.com/carloscabo/colz.git
+                //--------------------------------------------
+                // The MIT License (MIT)
+                //
+                // Copyright (c) 2014 Carlos Cabo
+                //
+                // Permission is hereby granted, free of charge, to any person obtaining a copy
+                // of this software and associated documentation files (the "Software"), to deal
+                // in the Software without restriction, including without limitation the rights
+                // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+                // copies of the Software, and to permit persons to whom the Software is
+                // furnished to do so, subject to the following conditions:
+                //
+                // The above copyright notice and this permission notice shall be included in all
+                // copies or substantial portions of the Software.
+                //
+                // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+                // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+                // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+                // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+                // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+                // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+                // SOFTWARE.
+                //--------------------------------------------
+                // https://github.com/carloscabo/colz/blob/master/public/js/colz.class.js
+                var rgbToHsl = function (rgba) {
+                    var arg, r, g, b, h, s, l, d, max, min;
+                
+                    arg = rgba;
+                
+                    if (typeof arg[0] === 'number') {
+                      r = arg[0];
+                      g = arg[1];
+                      b = arg[2];
+                    } else {
+                      r = arg[0][0];
+                      g = arg[0][1];
+                      b = arg[0][2];
+                    }
+                
+                    r /= 255;
+                    g /= 255;
+                    b /= 255;
+                
+                    max = Math.max(r, g, b);
+                    min = Math.min(r, g, b);
+                    l = (max + min) / 2;
+                
+                    if (max === min) {
+                      h = s = 0; // achromatic
+                    } else {
+                      d = max - min;
+                      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+                
+                      switch (max) {
+                      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+                      case g: h = (b - r) / d + 2; break;
+                      case b: h = (r - g) / d + 4; break;
+                      }
+                
+                      h /= 6;
+                    }
+                
+                    //CARLOS
+                    h = round(h * 360);
+                    s = round(s * 100);
+                    l = round(l * 100);
+                
+                    return [h, s, l];
+                }
+                //
+                var hue2rgb = function (p, q, t) {
+                    if (t < 0) { t += 1; }
+                    if (t > 1) { t -= 1; }
+                    if (t < 1 / 6) { return p + (q - p) * 6 * t; }
+                    if (t < 1 / 2) { return q; }
+                    if (t < 2 / 3) { return p + (q - p) * (2 / 3 - t) * 6; }
+                    return p;
+                }
+                var hslToRgb = function (hsl) {
+                    var arg, r, g, b, h, s, l, q, p;
+                
+                    arg = hsl;
+                
+                    if (typeof arg[0] === 'number') {
+                      h = arg[0] / 360;
+                      s = arg[1] / 100;
+                      l = arg[2] / 100;
+                    } else {
+                      h = arg[0][0] / 360;
+                      s = arg[0][1] / 100;
+                      l = arg[0][2] / 100;
+                    }
+                
+                    if (s === 0) {
+                      r = g = b = l; // achromatic
+                    } else {
+                
+                      q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+                      p = 2 * l - q;
+                      r = hue2rgb(p, q, h + 1 / 3);
+                      g = hue2rgb(p, q, h);
+                      b = hue2rgb(p, q, h - 1 / 3);
+                    }
+                    return [round(r * 255), round(g * 255), round(b * 255)];
+                }
+                //
+                var hsl=rgbToHsl(rgba)
+                hsl[0]=(hsl[0]+delta)%360
+                var nrgb=hslToRgb(hsl)
+                nrgb.push(rgba[3])
+                return nrgb
+            }
+            for(var x=0; x<imgData.width; x++){
+                for(var y=0 ; y<imgData.height; y++){
+                    setPixel(nimgData,x,y,convert(getPixel(imgData,x,y),delta))
+                }
+            }
+            source_ctx.clearRect(0, 0, imgData.width, imgData.height);
+            source_ctx.putImageData(nimgData, 0, 0);
+        }
+
         var left1 = document.getElementById('left1');
         var eToLoc = function (e) {
             var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
@@ -660,7 +808,7 @@ editor_mode = function (editor) {
                     printe("不合法的Autotile图片！");
                     return;
                 }
-                var imgbase64 = sprite.toDataURL().split(',')[1];
+                var imgbase64 = source.toDataURL().split(',')[1];
 
                 // Step 1: List文件名
                 fs.readdir('./project/images', function (err, data) {
@@ -703,14 +851,11 @@ editor_mode = function (editor) {
             }
 
             var ysize = selectAppend.value.indexOf('48') === -1 ? 32 : 48;
-            var sprited = sprite.getContext('2d');
-            //sprited.drawImage(img, 0, 0);
             var height = editor_mode.appendPic.toImg.height;
-            var sourced = source.getContext('2d');
             for (var ii = 0, v; v = editor_mode.appendPic.selectPos[ii]; ii++) {
-                // var imgData = sourced.getImageData(v.x * 32, v.y * ysize, 32, ysize);
+                var imgData = source_ctx.getImageData(v.x * 32, v.y * ysize, 32, ysize);
-                // sprited.putImageData(imgData, ii * 32, height);
+                sprite_ctx.putImageData(imgData, ii * 32, height);
-                sprited.drawImage(editor_mode.appendPic.img, v.x * 32, v.y * ysize, 32, ysize,  ii * 32, height,  32, ysize)
+                // sprite_ctx.drawImage(editor_mode.appendPic.img, v.x * 32, v.y * ysize, 32, ysize,  ii * 32, height,  32, ysize)
             }
             var imgbase64 = sprite.toDataURL().split(',')[1];
             fs.writeFile('./project/images/' + editor_mode.appendPic.imageName + '.png', imgbase64, 'base64', function (err, data) {

docs/V2.0.md

@@ -1,6 +1,6 @@
 # V2.0版本介绍
 
-?> 目前版本**v2.4.3**，上次更新时间：* {docsify-updated} *
+?> 目前版本**v2.4.4**，上次更新时间：* {docsify-updated} *
 
 目前样板已经更新到V2.0版本以上，本章将对V2.0的一些内容进行介绍。
 

docs/api.md

@@ -1,6 +1,6 @@
 # 附录: API列表
 
-?> 目前版本**v2.4.3**，上次更新时间：* {docsify-updated} *
+?> 目前版本**v2.4.4**，上次更新时间：* {docsify-updated} *
 
 **这里只列出所有可能会被造塔者用到的常用API，更多的有关内容请在代码内进行查询。**
 

docs/element.md

@@ -1,6 +1,6 @@
 # 元件说明
 
-?> 目前版本**v2.4.3**，上次更新时间：* {docsify-updated} *
+?> 目前版本**v2.4.4**，上次更新时间：* {docsify-updated} *
 
 在本章中，将对样板里的各个元件进行说明。各个元件主要包括道具、门、怪物、楼梯等等。
 

docs/event.md

@@ -1,6 +1,6 @@
 # 事件
 
-?> 目前版本**v2.4.3**，上次更新时间：* {docsify-updated} *
+?> 目前版本**v2.4.4**，上次更新时间：* {docsify-updated} *
 
 本章内将对样板所支持的事件进行介绍。
 

docs/index.md

@@ -1,6 +1,6 @@
 # HTML5 魔塔样板说明文档
 
-?> 目前版本**v2.4.3**，上次更新时间：* {docsify-updated} *
+?> 目前版本**v2.4.4**，上次更新时间：* {docsify-updated} *
 
 众所周知，魔塔的趋势是向移动端发展，贴吧中也常常能见到“求手机魔塔”的帖子。然而现有的工具中，NekoRPG有着比较大的局限性，游戏感较差，更是完全没法在iOS上运行。而一些APP的魔塔虽然可用，但是必须要下载安装，对于Android和iOS还必须开发不同的版本，非常麻烦。
 

docs/personalization.md

@@ -1,6 +1,6 @@
 # 个性化
 
-?> 目前版本**v2.4.3**，上次更新时间：* {docsify-updated} *
+?> 目前版本**v2.4.4**，上次更新时间：* {docsify-updated} *
 
 有时候只靠样板本身可能是不够的。我们需要一些个性化、自定义的素材，道具效果，怪物属性，等等。
 

docs/start.md

@@ -1,6 +1,6 @@
 # 快速上手
 
-?> 目前版本**v2.4.3**，上次更新时间：* {docsify-updated} *
+?> 目前版本**v2.4.4**，上次更新时间：* {docsify-updated} *
 
 在这一节中，将详细介绍做一部塔的流程。现在，让我们来做一部单层塔！
 

editor-mobile.html

@@ -56,6 +56,15 @@
                 <!-- ["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48"] -->
                 <input id="appendConfirm" type="button" value="追加"/>
             </p>
+            <p>
+                色相:<input id='changeColorInput' type="range" min="0" max="12" step="1" value="0" list="huelists" style="width: 60%;margin-left: 3%;vertical-align: middle">
+                <datalist id="huelists" style="display: none">
+                    <option value="0"/><option value="1"/><option value="2"/>
+                    <option value="3"/><option value="4"/><option value="5"/>
+                    <option value="6"/><option value="7"/><option value="8"/>
+                    <option value="9"/><option value="10"/><option value="11"/><option value="12"/>
+                </datalist>
+            </p>
             <div id="appendPicCanvas" style="position:relative;overflow: auto;height:470px;">
                 <canvas style="position:absolute"></canvas><!-- 用于画出灰白相间背景 -->
                 <canvas style="position:absolute"></canvas><!-- 用于画出选中文件 -->
@@ -92,9 +101,6 @@
         <h3 class="leftTabHeader">图块属性&nbsp;&nbsp;<button onclick="editor.mode.onmode('save')">保存</button>
         </h3>
         <div class="leftTabContent">
-            <div id='tilesetsDiv'><!-- tilesets -->
-                <p>tilesets不允许编辑图块属性</p>
-            </div>
             <div id='newIdIdnum'><!-- id and idnum -->
                 <input placeholder="新id（唯一标识符）"/>
                 <input placeholder="新idnum（1000以内数字）"/>

editor.html

@@ -55,6 +55,15 @@
                 <!-- ["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48"] -->
                 <input id="appendConfirm" type="button" value="追加"/>
             </p>
+            <p>
+                色相:<input id='changeColorInput' type="range" min="0" max="12" step="1" value="0" list="huelists" style="width: 60%;margin-left: 3%;vertical-align: middle">
+                <datalist id="huelists" style="display: none">
+                    <option value="0"/><option value="1"/><option value="2"/>
+                    <option value="3"/><option value="4"/><option value="5"/>
+                    <option value="6"/><option value="7"/><option value="8"/>
+                    <option value="9"/><option value="10"/><option value="11"/><option value="12"/>
+                </datalist>
+            </p>
             <div id="appendPicCanvas" style="position:relative;overflow: auto;height:470px;">
                 <canvas style="position:absolute"></canvas><!-- 用于画出灰白相间背景 -->
                 <canvas style="position:absolute"></canvas><!-- 用于画出选中文件 -->
@@ -91,9 +100,6 @@
         <h3 class="leftTabHeader">图块属性&nbsp;&nbsp;<button onclick="editor.mode.onmode('save')">保存</button>
         </h3>
         <div class="leftTabContent">
-            <div id='tilesetsDiv'><!-- tilesets -->
-                <p>tilesets不允许编辑图块属性</p>
-            </div>
             <div id='newIdIdnum'><!-- id and idnum -->
                 <input placeholder="新id（唯一标识符）"/>
                 <input placeholder="新idnum（1000以内数字）"/>

main.js

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

project/data.js

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

更新说明.txt

@@ -1,4 +1,15 @@
-HTML5魔塔样板V2.4.3
+HTML5魔塔样板V2.4.4
+
+tilesets可以设置图块属性（如可通行状态）
+追加素材时可以更改图片色调
+防作弊手段的进一步加强：打开控制台则禁止上传成绩
+图块属性增加“是否可被破震”的选项
+模仿怪物内置模仿临界计算器
+部分其他细节优化
+
+-----------------------------------------------------------------------
+
+HTML5魔塔样板V2.4.3
 
 并行事件处理
 事件：设置楼层属性