jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Merge pull request #244 from ckcz123/v2.0

Browse Source 
V2.4.4
This commit is contained in:
Zhang Chen 2018-10-27 00:20:31 +08:00 committed by GitHub
commit 5d8225a03f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 241 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -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] 并行事件处理

11
_server/comment.js
View File

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

7
_server/editor.js
View File

@ -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);

24
_server/editor_file.js
View File

@ -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;

187
_server/editor_mode.js
View File

@ -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.getContext('2d').drawImage(editor_mode.appendPic.img, 0, 0);
sprite_ctx.clearRect(0, 0, sprite.width, sprite.height);
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.getContext('2d').drawImage(image, 0, 0);
sprite_ctx.clearRect(0, 0, sprite.width, sprite.height);
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);
// sprited.putImageData(imgData, ii * 32, height);
sprited.drawImage(editor_mode.appendPic.img, v.x * 32, v.y * ysize, 32, ysize, ii * 32, height, 32, ysize)
var imgData = source_ctx.getImageData(v.x * 32, v.y * ysize, 32, ysize);
sprite_ctx.putImageData(imgData, ii * 32, height);
// 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) {

2
docs/V2.0.md
View File

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

2
docs/api.md
View File

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

2
docs/element.md
View File

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

2
docs/event.md
View File

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

2
docs/index.md
View File

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

2
docs/personalization.md
View File

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

2
docs/start.md
View File

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

12
editor-mobile.html
View File

@ -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以内数字）"/>

12
editor.html
View File

@ -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以内数字）"/>

2
main.js
View File

@ -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。

2
project/data.js
View File

@ -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": "阳光",

13
更新说明.txt
View File

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