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

把editor的代码拆分到单独的文件中

Browse Source
This commit is contained in:
YouWei Zhao 2018-01-08 19:28:11 +08:00
parent c0481b5e12
commit eb8a045816
5 changed files with 754 additions and 748 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
2.0diff.md
View File

@ -9,8 +9,11 @@
+ 设置了三个模式`play|editor|replay`在`editor`模式关闭了部分动画,并且角色无法行动
重构editor
+ 重命名为`editor.html`
* 需要相应的修改本地服务的按钮打开的网址,为了兼容,临时加了个内容为`<html><body><script>window.location='editor.html'</script></body></html>`的`drawMapGUI.html`
+ 不再独立的导入数据和画图,尽可能的通过`main.init('editor')`复用代码
+ 能够在本地服务器环境中直接修改`project`中的数据,目前只完成了文件操作的代码`editor_file.js`,前端尚未完成
+ 能够在本地服务器环境中直接修改`project`中的数据,目前只完成了文件操作的代码`_server/editor_file.js`,前端尚未完成
+ 把`editor`的代码拆到了`_server/editor.js`中
## 具体:
@ -48,37 +51,39 @@
提供了以下函数进行楼层`map`数组相关的操作
```javascript
editor.file.getFloorFileList
editor_file.loadFloorFile
editor_file.saveFloorFile
editor_file.saveFloorFileAs
editor.file.loadFloorFile
editor.file.saveFloorFile
editor.file.saveFloorFileAs
```
5个编辑模式有关的查询
```javascript
editor_file.editItem(editor,'redJewel',[],function(a){console.log(a)});
editor_file.editEnemy(editor,'redBat',[],function(a){console.log(a)});
editor_file.editLoc(editor,2,0,[],function(a){console.log(a)});
editor_file.editFloor(editor,[],function(a){console.log(a)});
editor.file.editItem(editor,'redJewel',[],function(a){console.log(a)});
editor.file.editEnemy(editor,'redBat',[],function(a){console.log(a)});
editor.file.editLoc(editor,2,0,[],function(a){console.log(a)});
editor.file.editFloor(editor,[],function(a){console.log(a)});
editor.file.editTower(editor,[],function(a){console.log(a)});
```
5个编辑模式有关的编辑
```javascript
editor.info={images: "terrains", y: 9};
editor.file.changeIdAndIdnum(editor,'yellowWall2',16,editor.info,function(a){console.log(a)});
editor_file.editItem(editor,'book',[["change","['items']['name']","怪物手册的新名字"]],function(a){console.log(a)});
editor_file.editEnemy(editor,'redBat',[['change',"['atk']",20]],function(a){console.log(a)});
editor_file.editLoc(editor,2,6,[["change","['afterBattle']",null]],function(a){console.log(a)});
editor_file.editFloor(editor,[["change","['title']",'样板 33 层']],function(a){console.log(a)});
editor.file.editItem(editor,'book',[["change","['items']['name']","怪物手册的新名字"]],function(a){console.log(a)});
editor.file.editEnemy(editor,'redBat',[['change',"['atk']",20]],function(a){console.log(a)});
editor.file.editLoc(editor,2,6,[["change","['afterBattle']",null]],function(a){console.log(a)});
editor.file.editFloor(editor,[["change","['title']",'样板 33 层']],function(a){console.log(a)});
editor.file.editTower(editor,[["change","['values']['lavaDamage']",200]],function(a){console.log(a)});
```
### drawMapGUI.html
把`editor`的代码拆到了`_server/editor.js`中
以`display:none`的形式引入了`index.html`的`dom`,修改了原来的`.gameCanvas #ui #data`等的名字以避免冲突
通过`main.init('editor')`加载数据,移除了原有的`editor.loadjs`等
背景层如果未设置`editor.bgY`则通过运行时中的代码画背景
`updateMap`中只画未定义快的报错,其他的由运行时中的代码完成
`editor.updateMap`中只画未定义快的报错,其他的由运行时中的代码完成
`editor.ids[0] = 0; editor.indexs[0]=[0];`

508
_server/editor.js Normal file
View File

@ -0,0 +1,508 @@
function editor() {
this.version = "1.2";
this.material = {};
}
editor.prototype.init = function(callback){
var afterCoreReset = function(){
main.editor.disableGlobalAnimate=false;//允许GlobalAnimate
/* core.setHeroMoveTriggerInterval(); */
editor.reset(function(){
editor.drawMapBg();
var mapArray = core.maps.getMapArray(core.status.maps, core.status.floorId);
editor.map = mapArray.map(function(v){return v.map(function(v){return editor.ids[[editor.indexs[v][0]]]})});
editor.updateMap();
editor.currentFloorId=core.status.floorId;
editor.currentFloorData = core.floors[core.status.floorId];
if (Boolean(callback))callback();
});
}
var afterMainInit = function(){
editor.main=main;
editor.core=core;
editor.fs=fs;
editor.file=editor_file;
editor.material.images=core.material.images;
editor.listen(); // 开始监听事件
var hard = 'Hard';
core.resetStatus(core.firstData.hero, hard, core.firstData.floorId, core.initStatus.maps);
//core.status.maps = core.clone(core.maps.initMaps(floorIds));
core.changeFloor(core.status.floorId, null, core.firstData.hero.loc, null, function() {
afterCoreReset();
});
core.events.setInitData(hard);
}
setTimeout(afterMainInit, 300);
}
editor.prototype.reset = function(callback){
editor.idsInit(core.maps, core.icons.icons); // 初始化图片素材信息
editor.drawInitData(core.icons.icons); // 初始化绘图
if(Boolean(callback))callback();
}
editor.prototype.idsInit = function(maps, icons){
editor.ids = [0];
editor.indexs = [];
var MAX_NUM = 400;
var getInfoById = function(id){
var block = maps.getBlock(0, 0, id);
if(hasOwnProp(block, 'event')){
return block;
}
}
var point = 0;
for(var i=0; i<MAX_NUM; i++){
var indexBlock = getInfoById(i);
editor.indexs[i] = [];
if(indexBlock){
var id = indexBlock.event.id;
var indexId = indexBlock.id;
var allCls = Object.keys(icons);
for(var j=0; j<allCls.length; j++){
if(id in icons[allCls[j]] ){
editor.ids.push({'idnum':indexId,'id':id,'images':allCls[j],'y':icons[allCls[j]][id]});
point++;
editor.indexs[i].push(point);
}
}
}
}
editor.indexs[0]=[0];
}
editor.prototype.drawInitData = function (icons) {
var ratio=1;
var images=editor.material.images;
var maxHeight=700;
var sumWidth=0;
editor.widthsX={};
// var imgNames = Object.keys(images); //还是固定顺序吧；
var imgNames = ["terrains", "animates", "enemys", "items", "npcs", "autotile"];
for(var ii=0; ii<imgNames.length; ii++){
var img=imgNames[ii], tempy = 0;
if(img == 'autotile'){
var autotiles = images[img];
for(var im in autotiles){
tempy += autotiles[im].height;
}
editor.widthsX[img]=[img, sumWidth/32, (sumWidth+3*32)/32, tempy];
sumWidth += 3*32;
maxHeight = Math.max(maxHeight, tempy);
continue;
}
if(img == 'terrains'){
editor.widthsX[img]=[img, sumWidth/32, (sumWidth+images[img].width)/32, images[img].height+32]
sumWidth += images[img].width;
maxHeight = Math.max(maxHeight, images[img].height+32);
continue;
}
editor.widthsX[img]=[img, sumWidth/32, (sumWidth+images[img].width)/32, images[img].height];
sumWidth += images[img].width;
maxHeight = Math.max(maxHeight, images[img].height);
}
var fullWidth=~~(sumWidth*ratio);
var fullHeight=~~(maxHeight*ratio);
if (fullWidth > edata.width) edata.style.width = (edata.width = fullWidth)/ratio + 'px';
edata.style.height = (edata.height = fullHeight)/ratio + 'px';
var dc = edata.getContext('2d');
var nowx = 0;
var nowy = 0;
for(var ii=0; ii<imgNames.length; ii++){
var img=imgNames[ii];
if(img == 'terrains'){
dc.drawImage(images[img], nowx, 32);
nowx += images[img].width;
continue;
}
if(img == 'autotile'){
var autotiles = images[img];
for(var im in autotiles){
dc.drawImage(autotiles[im], nowx, nowy);
nowy += autotiles[im].height;
}
continue;
}
dc.drawImage(images[img], nowx, 0)
nowx += images[img].width;
}
bgSelect.bgs = Object.keys(icons.terrains);
//editor.drawMapBg();
//editor.mapInit();
}
editor.prototype.mapInit = function(){
var ec = document.getElementById('event').getContext('2d');
ec.clearRect(0, 0, 416, 416);
editor.map = [];
for(var y=0; y<13; y++){
editor.map[y] = [];
for(var x = 0; x<13; x++){
editor.map[y][x] = 0;
}
}
}
editor.prototype.drawMapBg = function(img){
var bgc = bg.getContext('2d');
if (!core.isset(editor.bgY) || editor.bgY == 0){
editor.main.editor.drawMapBg();
return;
}
for (var ii = 0; ii < 13; ii++)
for (var jj = 0; jj < 13; jj++) {
bgc.clearRect(ii*32, jj*32, 32, 32);
bgc.drawImage(editor.material.images['terrains'], 0, 32*(editor.bgY||0), 32, 32, ii*32, jj*32, 32, 32);
}
if(img){
bgc.drawImage(img, 0, 0, 416, 416);
}
}
editor.prototype.updateMap = function(){
var blocks = main.editor.mapIntoBlocks(editor.map.map(function(v){return v.map(function(v){return v.idnum||v||0})}),{'events':{},'changeFloor':{}});
core.status.thisMap.blocks = blocks;
main.editor.updateMap();
var drawTile = function(ctx, x, y, tileInfo){ // 绘制一个普通块
//ctx.clearRect(x*32, y*32, 32, 32);
if(tileInfo == 0) return;
if(typeof(tileInfo) == typeof([][0]) || !hasOwnProp(tileInfo, 'idnum')) {//未定义块画红块
if(typeof(tileInfo) != typeof([][0]) && hasOwnProp(tileInfo, 'images')){
ctx.drawImage(editor.material.images[tileInfo.images], 0, tileInfo.y*32, 32, 32, x*32, y*32, 32, 32);
}
ctx.strokeStyle = 'red';
var OFFSET = 2;
ctx.lineWidth = OFFSET;
ctx.strokeRect(x*32+OFFSET, y*32+OFFSET, 32-OFFSET*2, 32-OFFSET*2);
ctx.font = "30px Verdana";
ctx.textAlign = 'center'
ctx.fillStyle = 'red';
ctx.fillText("?", x*32+16, y*32+27);
return;
}
//ctx.drawImage(editor.material.images[tileInfo.images], 0, tileInfo.y*32, 32, 32, x*32, y*32, 32, 32);
}
/*
// autotile的相关处理
var indexArrs = [ //16种组合的图块索引数组; // 将autotile分割成48块16*16的小块; 数组索引即对应各个小块
// +----+----+----+----+----+----+
[10, 9, 4, 3 ], //0 bin:0000 | 1 | 2 | 3 | 4 | 5 | 6 |
[10, 9, 4, 13], //1 bin:0001 +----+----+----+----+----+----+
[10, 9, 18, 3 ], //2 bin:0010 | 7 | 8 | 9 | 10 | 11 | 12 |
[10, 9, 16, 15], //3 bin:0011 +----+----+----+----+----+----+
[10, 43, 4, 3 ], //4 bin:0100 | 13 | 14 | 15 | 16 | 17 | 18 |
[10, 31, 4, 25], //5 bin:0101 +----+----+----+----+----+----+
[10, 7, 2, 3 ], //6 bin:0110 | 19 | 20 | 21 | 22 | 23 | 24 |
[10, 31, 16, 5 ], //7 bin:0111 +----+----+----+----+----+----+
[48, 9, 4, 3 ], //8 bin:1000 | 25 | 26 | 27 | 28 | 29 | 30 |
[ 8, 9, 4, 1 ], //9 bin:1001 +----+----+----+----+----+----+
[36, 9, 30, 3 ], //10 bin:1010 | 31 | 32 | 33 | 34 | 35 | 36 |
[36, 9, 6, 15], //11 bin:1011 +----+----+----+----+----+----+
[46, 45, 4, 3 ], //12 bin:1100 | 37 | 38 | 39 | 40 | 41 | 42 |
[46, 11, 4, 25], //13 bin:1101 +----+----+----+----+----+----+
[12, 45, 30, 3 ], //14 bin:1110 | 43 | 44 | 45 | 46 | 47 | 48 |
[34, 33, 28, 27] //15 bin:1111 +----+----+----+----+----+----+
];
var drawBlockByIndex = function(ctx, dx, dy, autotileImg, index){ //index为autotile的图块索引1-48
var sx = 16*((index-1)%6), sy = 16*(~~((index-1)/6));
ctx.drawImage(autotileImg, sx, sy, 16, 16, dx, dy, 16, 16);
}
var isAutotile = function(info){
if(typeof(info)=='object' && hasOwnProp(info, 'images') && info.images=='autotile') return true;
return false;
}
var getAutotileAroundId = function(currId, x, y){ //与autotile当前idnum一致返回1，否则返回0
if(x>=0 && y >=0 && x<13 && y<13 && isAutotile(editor.map[y][x]) && editor.map[y][x].idnum == currId)
return 1;
else if(x<0 || y<0 || x>12 || y>12) return 1; //边界外视为通用autotile，这样好看些
else
return 0;
}
var checkAround = function(x, y){ // 得到周围四个32*32块（周围每块都包含当前块的1/4，不清楚的话画下图你就明白）的数组索引
var currId = editor.map[y][x].idnum;
var pointBlock = [];
for(var i=0; i<4; i++){
var bsum = 0;
var offsetx = i%2, offsety = ~~(i/2);
for(var j=0; j<4; j++){
var mx = j%2, my = ~~(j/2);
var b = getAutotileAroundId(currId, x+offsetx+mx-1, y+offsety+my-1);
bsum += b*(Math.pow(2, 3-j));
}
pointBlock.push(bsum);
}
return pointBlock;
}
var addIndexToAutotileInfo = function(x, y){
var indexArr = [];
var pointBlocks = checkAround(x, y);
for(var i=0; i<4; i++){
var arr = indexArrs[pointBlocks[i]]
indexArr.push(arr[3-i]);
}
editor.map[y][x].blockIndex = indexArr;
}
var drawAutotile = function(ctx, x, y, info){ // 绘制一个autotile
ctx.clearRect(x*32, y*32, 32, 32);
//修正四个边角的固定搭配
if(info.blockIndex[0] == 13){
if(info.blockIndex[1] == 16) info.blockIndex[1] = 14;
if(info.blockIndex[2] == 31) info.blockIndex[2] = 19;
}
if(info.blockIndex[1] == 18){
if(info.blockIndex[0] == 15) info.blockIndex[0] = 17;
if(info.blockIndex[3] == 36) info.blockIndex[3] = 24;
}
if(info.blockIndex[2] == 43){
if(info.blockIndex[0] == 25) info.blockIndex[0] = 37;
if(info.blockIndex[3] == 46) info.blockIndex[3] = 44;
}
if(info.blockIndex[3] == 48){
if(info.blockIndex[1] == 30) info.blockIndex[1] = 42;
if(info.blockIndex[2] == 45) info.blockIndex[2] = 47;
}
for(var i=0; i<4; i++){
var index = info.blockIndex[i];
var dx = x*32 + 16*(i%2), dy = y*32 + 16*(~~(i/2));
drawBlockByIndex(ctx, dx, dy, editor.material.images[info.images][info.id], index);
}
}
*/
// 绘制地图 start
var eventCtx = document.getElementById('event').getContext("2d");
for(var y=0; y<13; y++)
for(var x=0; x<13; x++){
var tileInfo = editor.map[y][x];
if(false && isAutotile(tileInfo)){
addIndexToAutotileInfo(x, y);
drawAutotile(eventCtx, x, y, tileInfo);
}else drawTile(eventCtx, x, y, tileInfo);
}
// 绘制地图 end
}
editor.prototype.changeFloor = function(floorId,callback) {
core.changeFloor(floorId, null, core.firstData.hero.loc, null, function(){
editor.drawMapBg();
var mapArray = core.maps.getMapArray(core.status.maps, core.status.floorId);
editor.map = mapArray.map(function(v){return v.map(function(v){return editor.ids[[editor.indexs[v][0]]]})});
editor.updateMap();
editor.currentFloorId=core.status.floorId;
editor.currentFloorData = core.floors[core.status.floorId];
if (core.isset(callback))callback();
});
}
editor.prototype.listen = function() {
var uc = eui.getContext('2d');
function fillPos(pos) {
uc.fillStyle = '#' + ~~(Math.random() * 8) + ~~(Math.random() * 8) + ~~(Math.random() * 8);
uc.fillRect(pos.x * 32 + 12, pos.y * 32 + 12, 8, 8);
}//在格子内画一个随机色块
function eToLoc(e) {
editor.loc = {
'x': document.documentElement.scrollLeft+e.clientX - mid.offsetLeft-mapEdit.offsetLeft,
'y': document.documentElement.scrollTop+e.clientY - mid.offsetTop-mapEdit.offsetTop,
'size': 32
};
return editor.loc; }//返回可用的组件内坐标
function locToPos(loc) {
editor.pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
return editor.pos;
}
var holdingPath = 0;
var stepPostfix = null;//用于存放寻路检测的第一个点之后的后续移动
var mouseOutCheck = 2;
function clear1() {
if (mouseOutCheck > 1) {
mouseOutCheck--;
setTimeout(clear1, 1000);
return;
}
holdingPath = 0;
stepPostfix = [];
uc.clearRect(0, 0, 416, 416);
}//用于鼠标移出canvas时的自动清除状态
eui.onmousedown = function (e) {
if(!selectBox.isSelected) {
tip.whichShow = 1;
return;
}
holdingPath = 1;
mouseOutCheck = 2;
setTimeout(clear1);
e.stopPropagation();
uc.clearRect(0, 0, 416, 416);
var loc = eToLoc(e);
var pos = locToPos(loc)
stepPostfix = [];
stepPostfix.push(pos);
fillPos(pos);
}
eui.onmousemove = function (e) {
if(!selectBox.isSelected) {
// tip.whichShow = 1;
return;
}
if (holdingPath == 0) { return; }
mouseOutCheck = 2;
e.stopPropagation();
var loc = eToLoc(e);
var pos = locToPos(loc);
var pos0 = stepPostfix[stepPostfix.length - 1]
var directionDistance = [pos.y - pos0.y, pos0.x - pos.x, pos0.y - pos.y, pos.x - pos0.x]
var max = 0, index = 4;
for (var i = 0; i < 4; i++) {
if (directionDistance[i] > max) {
index = i;
max = directionDistance[i];
}
}
var pos = [{ 'x': 0, 'y': 1 }, { 'x': -1, 'y': 0 }, { 'x': 0, 'y': -1 }, { 'x': 1, 'y': 0 }, false][index]
if (pos) {
pos.x += pos0.x;
pos.y += pos0.y;
stepPostfix.push(pos);
fillPos(pos);
}
}
eui.onmouseup = function (e) {
if(!selectBox.isSelected) {
tip.whichShow = 1;
return;
}
holdingPath = 0;
e.stopPropagation();
var loc = eToLoc(e);
if (stepPostfix.length) {
preMapData = JSON.parse(JSON.stringify(editor.map));
currDrawData.pos = JSON.parse(JSON.stringify(stepPostfix));
currDrawData.info = JSON.parse(JSON.stringify(editor.info));
reDo = null;
// console.log(stepPostfix);
for (var ii = 0; ii < stepPostfix.length; ii++)
editor.map[stepPostfix[ii].y][stepPostfix[ii].x] = editor.info;
// console.log(editor.map);
editor.updateMap();
holdingPath = 0;
stepPostfix = [];
uc.clearRect(0, 0, 416, 416);
}
}
var preMapData = {};
var currDrawData = {
pos: [],
info: {}
};
var reDo = null;
document.body.onkeydown = function(e) {
// 禁止快捷键的默认行为
if( e.ctrlKey && ( e.keyCode == 90 || e.keyCode == 89 ) )
e.preventDefault();
//Ctrl+z 撤销上一步undo
if(e.keyCode == 90 && e.ctrlKey && preMapData && currDrawData.pos.length){
editor.map = JSON.parse(JSON.stringify(preMapData));
editor.updateMap();
reDo = JSON.parse(JSON.stringify(currDrawData));
currDrawData = {pos: [],info: {}};
preMapData = null;
}
//Ctrl+y 重做一步redo
if(e.keyCode == 89 && e.ctrlKey && reDo && reDo.pos.length){
preMapData = JSON.parse(JSON.stringify(editor.map));
for(var j=0; j<reDo.pos.length;j++)
editor.map[reDo.pos[j].y][reDo.pos[j].x] = JSON.parse(JSON.stringify(reDo.info));
editor.updateMap();
currDrawData = JSON.parse(JSON.stringify(reDo));
reDo = null;
}
}
edata.onmousedown = function (e) {
e.stopPropagation();
var loc = {
'x': document.documentElement.scrollLeft + e.clientX + iconLib.scrollLeft - right.offsetLeft-iconLib.offsetLeft,
'y': document.documentElement.scrollTop + e.clientY + iconLib.scrollTop - right.offsetTop-iconLib.offsetTop,
'size': 32
};
editor.loc = loc;
var pos = locToPos(loc);
for (var spriter in editor.widthsX){
if(pos.x>=editor.widthsX[spriter][1] && pos.x<editor.widthsX[spriter][2]){
pos.x=editor.widthsX[spriter][1];
pos.images = editor.widthsX[spriter][0];
var autotiles = editor.material.images['autotile'];
if(pos.images=='autotile'){
var imNames = Object.keys(autotiles);
if((pos.y+1)*32 > editor.widthsX[spriter][3])
pos.y = ~~(editor.widthsX[spriter][3]/32)-4;
else{
for(var i=0; i<imNames.length; i++){
if(pos.y >= 4*i && pos.y < 4*(i+1)){
pos.images = imNames[i];
pos.y = 4*i;
}
}
}
}else if((pos.y+1)*32 > editor.widthsX[spriter][3])
pos.y = ~~(editor.widthsX[spriter][3]/32)-1;
selectBox.isSelected = true;
// console.log(pos,editor.material.images[pos.images].height)
dataSelection.style.left = pos.x*32 +'px';
dataSelection.style.top = pos.y*32 +'px';
if(pos.x==0&&pos.y==0){
// editor.info={idnum:0, id:'empty','images':'清除块', 'y':0};
editor.info=0;
}else{
if(hasOwnProp(autotiles, pos.images)) editor.info={'images':pos.images, 'y':0};
else if(pos.images == 'terrains') editor.info={'images':pos.images, 'y':pos.y-1};
else editor.info={'images':pos.images, 'y':pos.y};
for (var ii=0;ii<editor.ids.length;ii++){
if( ( editor.info.images==editor.ids[ii].images
&& editor.info.y==editor.ids[ii].y )
|| (hasOwnProp(autotiles, pos.images) && editor.info.images==editor.ids[ii].id
&& editor.info.y==editor.ids[ii].y)){
editor.info = editor.ids[ii];
break;
}
}
}
tip.infos = JSON.parse(JSON.stringify(editor.info));
}
}
}
}//绑定事件
/*
editor.loc
editor.pos
editor.info
始终是最后一次点击的结果
注意editor.info可能因为点击其他地方而被清空
*/
editor = new editor();

735
drawMapGUI.html
View File

@ -1,734 +1 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="_server/css/editor.css" rel="stylesheet">
</head>
<body>
<div class="main">
<div id="left">
<div id="arrEditor">
<table class="col" id='arrColMark'></table>
<table class="row" id='arrRowMark'></table>
<div id="editArea" v-cloak>
<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" v-cloak>
<input class='btn' type="button" value="复制地图" v-on:click="copyMap"/>
</div>
</div>
<div id="objDataEditor">
</div>
<div id="eventEditor">
</div>
</div>
<div id="mid">
<table class="col" id='mapColMark'></table>
<table class="row" id='mapRowMark'></table>
<div class="map" id="mapEdit">
<canvas class='gameCanvas' id='bg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
<canvas class='egameCanvas' id='eui' width='416' height='416' style='z-index:100'></canvas>
</div>
<div class="tools">
<div id="tip" v-cloak >
<div v-if="isSelectedBlock" >
<p v-if="isClearBlock" class="infoText">当前选择为清除块，可擦除地图上块</p>
<div v-else>
<p v-if="hasId">图块编号：<span class="infoText">{{ infos['idnum'] }}</span></p>
<p v-if="hasId">图块ID：<span class="infoText">{{ infos['id'] }}</span></p>
<p v-else class="warnText">该图块无对应的数字或ID存在，请先前往icons.js和maps.js中进行定义！</p>
<p>图块所在素材：<span class="infoText">{{ infos['images'] + (isAutotile ? '( '+infos['id']+' )' : '') }}</span></p>
<p>图块索引：<span class="infoText">{{ infos['y'] }}</span></p>
</div>
</div>
<div v-else>
<p v-if="whichShow" v-bind:class="[ (whichShow%2) ? 'warnText' : 'successText']">{{ mapMsg }}</p>
</div>
</div>
<input class='btn' id='clear' type="button" value="清除地图" v-on:click="clearMap"/>
<input class='btn' type="button" value="导出地图" id="exportM" v-on:click="exportMap"/>
<div id="bgSelect" v-cloak>
<span>当前地板: </span>
<select v-model="selectedBg">
<option disabled value="">请选择地板</option>
<option v-for="bg in bgs" v-bind:value="bg">
{{ bg }}
</option>
</select>
<div class="selectpng">
<input class='input' id='pin' v-model="imgname" placeholder="请输入自定义背景文件名"/>
<input class='btn' type="button" value="确定" v-on:click="updatebg"/>
</div>
</div>
</div>
</div>
<div id="right">
<div id="iconLib">
<canvas class='egameCanvas' id='edata' width='416' height='416' style='z-index:0'></canvas>
<div id="selectBox">
<div id='dataSelection' v-show="isSelected" v-cloak></div>
</div>
</div>
</div>
</div>
<!-- <script>/* -->
<div id='gameGroup' style='display:none'>
<p id='mainTips'>请稍后...</p>
<div id='startPanel'>
<div id='startTop'>
<div id='startTopProgressBar'>
<div id='startTopProgress'></div>
</div>
<p id='startTopLoadTips'>资源即将开始加载</p>
</div>
<img id='startBackground' src='project/images/bg.png'>
<!-- 标题界面；可以改style的color使标题改变颜色 -->
<p id='startLogo' style="color: black"></p>
<div id='startButtonGroup'>
<div id='startButtons'>
<span class='startButton' id='playGame'>开始游戏</span>
<span class='startButton' id='loadGame'>载入游戏</span>
<span class='startButton' id='aboutGame'>关于本塔</span>
</div>
<div id='levelChooseButtons'>
<span class='startButton' id='easyLevel'>简单</span>
<span class='startButton' id='normalLevel'>普通</span>
<span class='startButton' id='hardLevel'>困难</span>
</div>
</div>
</div>
<div id='floorMsgGroup'>
<p id='logoLabel'></p>
<p id='versionLabel'></p>
<p id='floorNameLabel'></p>
</div>
<div id='statusBar' class="clearfix">
<div class="status" id="floorCol">
<img src='project/images/floor.png' id="img-floor">
<p class='statusLabel' id='floor'></p>
</div>
<div class="status" id="lvCol">
<img src='project/images/lv.png' id="img-lv">
<p class='statusLabel' id='lv'></p>
</div>
<div class="status">
<img src='project/images/hp.png' id="img-hp">
<p class='statusLabel' id='hp'></p>
</div>
<div class="status">
<img src='project/images/atk.png' id="img-atk">
<p class='statusLabel' id='atk'></p>
</div>
<div class="status">
<img src='project/images/def.png' id="img-def">
<p class='statusLabel' id='def'></p>
</div>
<div class="status" id="mdefCol">
<img src='project/images/mdef.png' id="img-mdef">
<p class='statusLabel' id='mdef'></p>
</div>
<div class="status" id="moneyCol">
<img src='project/images/money.png' id="img-money">
<p class='statusLabel' id='money'></p>
</div>
<div class="status" id="expCol">
<img src='project/images/experience.png' id="img-experience">
<p class='statusLabel' id='experience'></p>
</div>
<div class="status" id="upCol">
<img src='project/images/up.png' id="img-up">
<p class='statusLabel' id='up'></p>
</div>
<div class="status">
<span class='statusLabel' id='yellowKey' style="color:#FFCCAA"></span>
<span class='statusLabel' id='blueKey' style="color:#AAAADD"></span>
<span class='statusLabel' id='redKey' style="color:#FF8888"></span>
</div>
<div class="status" id="debuffCol">
<span class='statusLabel' id='poison' style="color: #AFFCA8;"></span>
<span class='statusLabel' id='weak' style="color: #FECCD0;"></span>
<span class='statusLabel' id='curse' style="color: #C2F4E7;"></span>
</div>
</div>
<div id="toolBar" class="clearfix">
<img src="project/images/book.png" class="tools" id='img-book'>
<img src="project/images/fly.png" class="tools" id='img-fly'>
<img src="project/images/toolbox.png" class="tools" id='img-toolbox'>
<img src="project/images/shop.png" class="tools" id='img-shop'>
<img src="project/images/save.png" class="tools" id='img-save'>
<img src="project/images/load.png" class="tools" id='img-load'>
<img src="project/images/settings.png" class="tools" id='img-settings'>
<p class="statusLabel tools" id="hard"></p>
</div>
<div id="curtain"></div>
<!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> -->
<!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
</div>
<!-- */</script> -->
<script>
// 生成定位编号
(function(){
var colNum = ' ';
for(var i=0; i<13; i++){
var tpl = '<td>'+i+'<div class="colBlock" style="left:'+(i*32+1)+'px;"></div></td>';
colNum += tpl;
}
arrColMark.innerHTML = '<tr>'+colNum+'</tr>';
mapColMark.innerHTML = '<tr>'+colNum+'</tr>';
var rowNum = ' ';
for(var i=0; i<13; i++){
var tpl = '<tr><td>'+i+'<div class="rowBlock" style="top:'+(i*32+1)+'px;"></div></td></tr>';
rowNum += tpl;
}
arrRowMark.innerHTML = rowNum;
mapRowMark.innerHTML = rowNum;
})();
</script>
<!-- =========================================================== -->
<script src='_server/vendor/vue.min.js'></script>
<!-- <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script> -->
<script src='_server/fs.js'></script>
<script src='_server/editor_file.js'></script>
<script src='_server/vm.js'></script>
<script id='mainScript' src='main.js'></script>
<script>
//所有全局量
__all__=['Vue','fs','editor_file','printf','editor','main','core'];
__id__=['printOut','arrRowMark','mapRowMark','data','bg','dataSelection'];
__Vue__=['exportM','editArea','editTip','clear','tip','selectBox'];
//var event = document.getElementById('event');
var hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwnProp (obj, key) {
return hasOwnProperty.call(obj, key)
}
function editor() {
this.version = "1.2";
this.material = {};
}
editor.prototype.init = function(callback){
editor.main=main;
editor.core=core;
editor.fs=fs;
editor.file=editor_file;
editor.material.images=core.material.images;
editor.idsInit(core.maps, core.icons.icons); // 初始化图片素材信息
editor.drawInitData(core.icons.icons); // 初始化绘图
editor.listen(); // 开始监听事件
if(Boolean(callback))callback();
}
editor.prototype.idsInit = function(maps, icons){
editor.ids = [0];
editor.indexs = [];
var MAX_NUM = 400;
var getInfoById = function(id){
var block = maps.getBlock(0, 0, id);
if(hasOwnProp(block, 'event')){
return block;
}
}
var point = 0;
for(var i=0; i<MAX_NUM; i++){
var indexBlock = getInfoById(i);
editor.indexs[i] = [];
if(indexBlock){
var id = indexBlock.event.id;
var indexId = indexBlock.id;
var allCls = Object.keys(icons);
for(var j=0; j<allCls.length; j++){
if(id in icons[allCls[j]] ){
editor.ids.push({'idnum':indexId,'id':id,'images':allCls[j],'y':icons[allCls[j]][id]});
point++;
editor.indexs[i].push(point);
}
}
}
}
editor.indexs[0]=[0];
}
editor.prototype.drawInitData = function (icons) {
var ratio=1;
var images=editor.material.images;
var maxHeight=700;
var sumWidth=0;
editor.widthsX={};
// var imgNames = Object.keys(images); //还是固定顺序吧；
var imgNames = ["terrains", "animates", "enemys", "items", "npcs", "autotile"];
for(var ii=0; ii<imgNames.length; ii++){
var img=imgNames[ii], tempy = 0;
if(img == 'autotile'){
var autotiles = images[img];
for(var im in autotiles){
tempy += autotiles[im].height;
}
editor.widthsX[img]=[img, sumWidth/32, (sumWidth+3*32)/32, tempy];
sumWidth += 3*32;
maxHeight = Math.max(maxHeight, tempy);
continue;
}
if(img == 'terrains'){
editor.widthsX[img]=[img, sumWidth/32, (sumWidth+images[img].width)/32, images[img].height+32]
sumWidth += images[img].width;
maxHeight = Math.max(maxHeight, images[img].height+32);
continue;
}
editor.widthsX[img]=[img, sumWidth/32, (sumWidth+images[img].width)/32, images[img].height];
sumWidth += images[img].width;
maxHeight = Math.max(maxHeight, images[img].height);
}
var fullWidth=~~(sumWidth*ratio);
var fullHeight=~~(maxHeight*ratio);
if (fullWidth > edata.width) edata.style.width = (edata.width = fullWidth)/ratio + 'px';
edata.style.height = (edata.height = fullHeight)/ratio + 'px';
var dc = edata.getContext('2d');
var nowx = 0;
var nowy = 0;
for(var ii=0; ii<imgNames.length; ii++){
var img=imgNames[ii];
if(img == 'terrains'){
dc.drawImage(images[img], nowx, 32);
nowx += images[img].width;
continue;
}
if(img == 'autotile'){
var autotiles = images[img];
for(var im in autotiles){
dc.drawImage(autotiles[im], nowx, nowy);
nowy += autotiles[im].height;
}
continue;
}
dc.drawImage(images[img], nowx, 0)
nowx += images[img].width;
}
bgSelect.bgs = Object.keys(icons.terrains);
editor.drawMapBg();
editor.mapInit();
}
editor.prototype.mapInit = function(){
var ec = document.getElementById('event').getContext('2d');
ec.clearRect(0, 0, 416, 416);
editor.map = [];
for(var y=0; y<13; y++){
editor.map[y] = [];
for(var x = 0; x<13; x++){
editor.map[y][x] = 0;
}
}
}
editor.prototype.drawMapBg = function(img){
var bgc = bg.getContext('2d');
if (!core.isset(editor.bgY) || editor.bgY == 0){
editor.main.editor.drawMapBg();
return;
}
for (var ii = 0; ii < 13; ii++)
for (var jj = 0; jj < 13; jj++) {
bgc.clearRect(ii*32, jj*32, 32, 32);
bgc.drawImage(editor.material.images['terrains'], 0, 32*(editor.bgY||0), 32, 32, ii*32, jj*32, 32, 32);
}
if(img){
bgc.drawImage(img, 0, 0, 416, 416);
}
}
editor.prototype.updateMap = function(){
var blocks = main.editor.mapIntoBlocks(editor.map.map(function(v){return v.map(function(v){return v.idnum||v||0})}),{'events':{},'changeFloor':{}});
core.status.thisMap.blocks = blocks;
main.editor.updateMap();
var drawTile = function(ctx, x, y, tileInfo){ // 绘制一个普通块
//ctx.clearRect(x*32, y*32, 32, 32);
if(tileInfo == 0) return;
if(typeof(tileInfo) == typeof([][0]) || !hasOwnProp(tileInfo, 'idnum')) {//未定义块画红块
if(typeof(tileInfo) != typeof([][0]) && hasOwnProp(tileInfo, 'images')){
ctx.drawImage(editor.material.images[tileInfo.images], 0, tileInfo.y*32, 32, 32, x*32, y*32, 32, 32);
}
ctx.strokeStyle = 'red';
var OFFSET = 2;
ctx.lineWidth = OFFSET;
ctx.strokeRect(x*32+OFFSET, y*32+OFFSET, 32-OFFSET*2, 32-OFFSET*2);
ctx.font = "30px Verdana";
ctx.textAlign = 'center'
ctx.fillStyle = 'red';
ctx.fillText("?", x*32+16, y*32+27);
return;
}
//ctx.drawImage(editor.material.images[tileInfo.images], 0, tileInfo.y*32, 32, 32, x*32, y*32, 32, 32);
}
/*
// autotile的相关处理
var indexArrs = [ //16种组合的图块索引数组; // 将autotile分割成48块16*16的小块; 数组索引即对应各个小块
// +----+----+----+----+----+----+
[10, 9, 4, 3 ], //0 bin:0000 | 1 | 2 | 3 | 4 | 5 | 6 |
[10, 9, 4, 13], //1 bin:0001 +----+----+----+----+----+----+
[10, 9, 18, 3 ], //2 bin:0010 | 7 | 8 | 9 | 10 | 11 | 12 |
[10, 9, 16, 15], //3 bin:0011 +----+----+----+----+----+----+
[10, 43, 4, 3 ], //4 bin:0100 | 13 | 14 | 15 | 16 | 17 | 18 |
[10, 31, 4, 25], //5 bin:0101 +----+----+----+----+----+----+
[10, 7, 2, 3 ], //6 bin:0110 | 19 | 20 | 21 | 22 | 23 | 24 |
[10, 31, 16, 5 ], //7 bin:0111 +----+----+----+----+----+----+
[48, 9, 4, 3 ], //8 bin:1000 | 25 | 26 | 27 | 28 | 29 | 30 |
[ 8, 9, 4, 1 ], //9 bin:1001 +----+----+----+----+----+----+
[36, 9, 30, 3 ], //10 bin:1010 | 31 | 32 | 33 | 34 | 35 | 36 |
[36, 9, 6, 15], //11 bin:1011 +----+----+----+----+----+----+
[46, 45, 4, 3 ], //12 bin:1100 | 37 | 38 | 39 | 40 | 41 | 42 |
[46, 11, 4, 25], //13 bin:1101 +----+----+----+----+----+----+
[12, 45, 30, 3 ], //14 bin:1110 | 43 | 44 | 45 | 46 | 47 | 48 |
[34, 33, 28, 27] //15 bin:1111 +----+----+----+----+----+----+
];
var drawBlockByIndex = function(ctx, dx, dy, autotileImg, index){ //index为autotile的图块索引1-48
var sx = 16*((index-1)%6), sy = 16*(~~((index-1)/6));
ctx.drawImage(autotileImg, sx, sy, 16, 16, dx, dy, 16, 16);
}
var isAutotile = function(info){
if(typeof(info)=='object' && hasOwnProp(info, 'images') && info.images=='autotile') return true;
return false;
}
var getAutotileAroundId = function(currId, x, y){ //与autotile当前idnum一致返回1，否则返回0
if(x>=0 && y >=0 && x<13 && y<13 && isAutotile(editor.map[y][x]) && editor.map[y][x].idnum == currId)
return 1;
else if(x<0 || y<0 || x>12 || y>12) return 1; //边界外视为通用autotile，这样好看些
else
return 0;
}
var checkAround = function(x, y){ // 得到周围四个32*32块（周围每块都包含当前块的1/4，不清楚的话画下图你就明白）的数组索引
var currId = editor.map[y][x].idnum;
var pointBlock = [];
for(var i=0; i<4; i++){
var bsum = 0;
var offsetx = i%2, offsety = ~~(i/2);
for(var j=0; j<4; j++){
var mx = j%2, my = ~~(j/2);
var b = getAutotileAroundId(currId, x+offsetx+mx-1, y+offsety+my-1);
bsum += b*(Math.pow(2, 3-j));
}
pointBlock.push(bsum);
}
return pointBlock;
}
var addIndexToAutotileInfo = function(x, y){
var indexArr = [];
var pointBlocks = checkAround(x, y);
for(var i=0; i<4; i++){
var arr = indexArrs[pointBlocks[i]]
indexArr.push(arr[3-i]);
}
editor.map[y][x].blockIndex = indexArr;
}
var drawAutotile = function(ctx, x, y, info){ // 绘制一个autotile
ctx.clearRect(x*32, y*32, 32, 32);
//修正四个边角的固定搭配
if(info.blockIndex[0] == 13){
if(info.blockIndex[1] == 16) info.blockIndex[1] = 14;
if(info.blockIndex[2] == 31) info.blockIndex[2] = 19;
}
if(info.blockIndex[1] == 18){
if(info.blockIndex[0] == 15) info.blockIndex[0] = 17;
if(info.blockIndex[3] == 36) info.blockIndex[3] = 24;
}
if(info.blockIndex[2] == 43){
if(info.blockIndex[0] == 25) info.blockIndex[0] = 37;
if(info.blockIndex[3] == 46) info.blockIndex[3] = 44;
}
if(info.blockIndex[3] == 48){
if(info.blockIndex[1] == 30) info.blockIndex[1] = 42;
if(info.blockIndex[2] == 45) info.blockIndex[2] = 47;
}
for(var i=0; i<4; i++){
var index = info.blockIndex[i];
var dx = x*32 + 16*(i%2), dy = y*32 + 16*(~~(i/2));
drawBlockByIndex(ctx, dx, dy, editor.material.images[info.images][info.id], index);
}
}
*/
// 绘制地图 start
var eventCtx = document.getElementById('event').getContext("2d");
for(var y=0; y<13; y++)
for(var x=0; x<13; x++){
var tileInfo = editor.map[y][x];
if(false && isAutotile(tileInfo)){
addIndexToAutotileInfo(x, y);
drawAutotile(eventCtx, x, y, tileInfo);
}else drawTile(eventCtx, x, y, tileInfo);
}
// 绘制地图 end
}
editor.prototype.listen = function() {
var uc = eui.getContext('2d');
function fillPos(pos) {
uc.fillStyle = '#' + ~~(Math.random() * 8) + ~~(Math.random() * 8) + ~~(Math.random() * 8);
uc.fillRect(pos.x * 32 + 12, pos.y * 32 + 12, 8, 8);
}//在格子内画一个随机色块
function eToLoc(e) {
editor.loc = {
'x': document.documentElement.scrollLeft+e.clientX - mid.offsetLeft-mapEdit.offsetLeft,
'y': document.documentElement.scrollTop+e.clientY - mid.offsetTop-mapEdit.offsetTop,
'size': 32
};
return editor.loc; }//返回可用的组件内坐标
function locToPos(loc) {
editor.pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
return editor.pos;
}
var holdingPath = 0;
var stepPostfix = null;//用于存放寻路检测的第一个点之后的后续移动
var mouseOutCheck = 2;
function clear1() {
if (mouseOutCheck > 1) {
mouseOutCheck--;
setTimeout(clear1, 1000);
return;
}
holdingPath = 0;
stepPostfix = [];
uc.clearRect(0, 0, 416, 416);
}//用于鼠标移出canvas时的自动清除状态
eui.onmousedown = function (e) {
if(!selectBox.isSelected) {
tip.whichShow = 1;
return;
}
holdingPath = 1;
mouseOutCheck = 2;
setTimeout(clear1);
e.stopPropagation();
uc.clearRect(0, 0, 416, 416);
var loc = eToLoc(e);
var pos = locToPos(loc)
stepPostfix = [];
stepPostfix.push(pos);
fillPos(pos);
}
eui.onmousemove = function (e) {
if(!selectBox.isSelected) {
// tip.whichShow = 1;
return;
}
if (holdingPath == 0) { return; }
mouseOutCheck = 2;
e.stopPropagation();
var loc = eToLoc(e);
var pos = locToPos(loc);
var pos0 = stepPostfix[stepPostfix.length - 1]
var directionDistance = [pos.y - pos0.y, pos0.x - pos.x, pos0.y - pos.y, pos.x - pos0.x]
var max = 0, index = 4;
for (var i = 0; i < 4; i++) {
if (directionDistance[i] > max) {
index = i;
max = directionDistance[i];
}
}
var pos = [{ 'x': 0, 'y': 1 }, { 'x': -1, 'y': 0 }, { 'x': 0, 'y': -1 }, { 'x': 1, 'y': 0 }, false][index]
if (pos) {
pos.x += pos0.x;
pos.y += pos0.y;
stepPostfix.push(pos);
fillPos(pos);
}
}
eui.onmouseup = function (e) {
if(!selectBox.isSelected) {
tip.whichShow = 1;
return;
}
holdingPath = 0;
e.stopPropagation();
var loc = eToLoc(e);
if (stepPostfix.length) {
preMapData = JSON.parse(JSON.stringify(editor.map));
currDrawData.pos = JSON.parse(JSON.stringify(stepPostfix));
currDrawData.info = JSON.parse(JSON.stringify(editor.info));
reDo = null;
// console.log(stepPostfix);
for (var ii = 0; ii < stepPostfix.length; ii++)
editor.map[stepPostfix[ii].y][stepPostfix[ii].x] = editor.info;
// console.log(editor.map);
editor.updateMap();
holdingPath = 0;
stepPostfix = [];
uc.clearRect(0, 0, 416, 416);
}
}
var preMapData = {};
var currDrawData = {
pos: [],
info: {}
};
var reDo = null;
document.body.onkeydown = function(e) {
// 禁止快捷键的默认行为
if( e.ctrlKey && ( e.keyCode == 90 || e.keyCode == 89 ) )
e.preventDefault();
//Ctrl+z 撤销上一步undo
if(e.keyCode == 90 && e.ctrlKey && preMapData && currDrawData.pos.length){
editor.map = JSON.parse(JSON.stringify(preMapData));
editor.updateMap();
reDo = JSON.parse(JSON.stringify(currDrawData));
currDrawData = {pos: [],info: {}};
preMapData = null;
}
//Ctrl+y 重做一步redo
if(e.keyCode == 89 && e.ctrlKey && reDo && reDo.pos.length){
preMapData = JSON.parse(JSON.stringify(editor.map));
for(var j=0; j<reDo.pos.length;j++)
editor.map[reDo.pos[j].y][reDo.pos[j].x] = JSON.parse(JSON.stringify(reDo.info));
editor.updateMap();
currDrawData = JSON.parse(JSON.stringify(reDo));
reDo = null;
}
}
edata.onmousedown = function (e) {
e.stopPropagation();
var loc = {
'x': document.documentElement.scrollLeft + e.clientX + iconLib.scrollLeft - right.offsetLeft-iconLib.offsetLeft,
'y': document.documentElement.scrollTop + e.clientY + iconLib.scrollTop - right.offsetTop-iconLib.offsetTop,
'size': 32
};
editor.loc = loc;
var pos = locToPos(loc);
for (var spriter in editor.widthsX){
if(pos.x>=editor.widthsX[spriter][1] && pos.x<editor.widthsX[spriter][2]){
pos.x=editor.widthsX[spriter][1];
pos.images = editor.widthsX[spriter][0];
var autotiles = editor.material.images['autotile'];
if(pos.images=='autotile'){
var imNames = Object.keys(autotiles);
if((pos.y+1)*32 > editor.widthsX[spriter][3])
pos.y = ~~(editor.widthsX[spriter][3]/32)-4;
else{
for(var i=0; i<imNames.length; i++){
if(pos.y >= 4*i && pos.y < 4*(i+1)){
pos.images = imNames[i];
pos.y = 4*i;
}
}
}
}else if((pos.y+1)*32 > editor.widthsX[spriter][3])
pos.y = ~~(editor.widthsX[spriter][3]/32)-1;
selectBox.isSelected = true;
// console.log(pos,editor.material.images[pos.images].height)
dataSelection.style.left = pos.x*32 +'px';
dataSelection.style.top = pos.y*32 +'px';
if(pos.x==0&&pos.y==0){
// editor.info={idnum:0, id:'empty','images':'清除块', 'y':0};
editor.info=0;
}else{
if(hasOwnProp(autotiles, pos.images)) editor.info={'images':pos.images, 'y':0};
else if(pos.images == 'terrains') editor.info={'images':pos.images, 'y':pos.y-1};
else editor.info={'images':pos.images, 'y':pos.y};
for (var ii=0;ii<editor.ids.length;ii++){
if( ( editor.info.images==editor.ids[ii].images
&& editor.info.y==editor.ids[ii].y )
|| (hasOwnProp(autotiles, pos.images) && editor.info.images==editor.ids[ii].id
&& editor.info.y==editor.ids[ii].y)){
editor.info = editor.ids[ii];
break;
}
}
}
tip.infos = JSON.parse(JSON.stringify(editor.info));
}
}
}
}//绑定事件
/*
editor.updateMap
editor.loc
editor.pos
editor.info
始终是最后一次点击的结果
注意editor.info可能因为点击其他地方而被清空
*/
editor = new editor();
main.init('editor');
editor.changeFloor = function(floorId,callback) {
core.changeFloor(floorId, null, core.firstData.hero.loc, null, function(){
editor.drawMapBg();
var mapArray = core.maps.getMapArray(core.status.maps, core.status.floorId);
editor.map = mapArray.map(function(v){return v.map(function(v){return editor.ids[[editor.indexs[v][0]]]})});
editor.updateMap();
editor.currentFloorId=core.status.floorId;
editor.currentFloorData = core.floors[core.status.floorId];
if (core.isset(callback))callback();
});
}
//main.listen();
var afterMainInit = function(){
main.editor.disableGlobalAnimate=false;
//core.status.maps = core.clone(core.maps.initMaps(floorIds));
editor.init(function(){
//core.changeFloor('sample1')
//editor.drawMapBg()
var mapArray = core.maps.getMapArray(core.status.maps, core.status.floorId);
editor.map = mapArray.map(function(v){return v.map(function(v){return editor.ids[[editor.indexs[v][0]]]})});
editor.updateMap();
editor.currentFloorId=core.status.floorId;
editor.currentFloorData = core.floors[core.status.floorId];
});
}
var startgame = function(){
var hard = 'Hard';
core.resetStatus(core.firstData.hero, hard, core.firstData.floorId, core.initStatus.maps);
core.changeFloor(core.status.floorId, null, core.firstData.hero.loc, null, function() {
/* core.setHeroMoveTriggerInterval(); */
afterMainInit();
});
core.events.setInitData(hard);
}
setTimeout(startgame, 300);
</script>
</body>
</html>
<html><body><script>window.location='editor.html'</script></body></html>

227
editor.html Normal file
View File

@ -0,0 +1,227 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="_server/css/editor.css" rel="stylesheet">
</head>
<body>
<div class="main">
<div id="left">
<div id="arrEditor">
<table class="col" id='arrColMark'></table>
<table class="row" id='arrRowMark'></table>
<div id="editArea" v-cloak>
<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" v-cloak>
<input class='btn' type="button" value="复制地图" v-on:click="copyMap"/>
</div>
</div>
<div id="objDataEditor">
</div>
<div id="eventEditor">
</div>
</div>
<div id="mid">
<table class="col" id='mapColMark'></table>
<table class="row" id='mapRowMark'></table>
<div class="map" id="mapEdit">
<canvas class='gameCanvas' id='bg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
<canvas class='egameCanvas' id='eui' width='416' height='416' style='z-index:100'></canvas>
</div>
<div class="tools">
<div id="tip" v-cloak >
<div v-if="isSelectedBlock" >
<p v-if="isClearBlock" class="infoText">当前选择为清除块，可擦除地图上块</p>
<div v-else>
<p v-if="hasId">图块编号：<span class="infoText">{{ infos['idnum'] }}</span></p>
<p v-if="hasId">图块ID：<span class="infoText">{{ infos['id'] }}</span></p>
<p v-else class="warnText">该图块无对应的数字或ID存在，请先前往icons.js和maps.js中进行定义！</p>
<p>图块所在素材：<span class="infoText">{{ infos['images'] + (isAutotile ? '( '+infos['id']+' )' : '') }}</span></p>
<p>图块索引：<span class="infoText">{{ infos['y'] }}</span></p>
</div>
</div>
<div v-else>
<p v-if="whichShow" v-bind:class="[ (whichShow%2) ? 'warnText' : 'successText']">{{ mapMsg }}</p>
</div>
</div>
<input class='btn' id='clear' type="button" value="清除地图" v-on:click="clearMap"/>
<input class='btn' type="button" value="导出地图" id="exportM" v-on:click="exportMap"/>
<div id="bgSelect" v-cloak>
<span>当前地板: </span>
<select v-model="selectedBg">
<option disabled value="">请选择地板</option>
<option v-for="bg in bgs" v-bind:value="bg">
{{ bg }}
</option>
</select>
<div class="selectpng">
<input class='input' id='pin' v-model="imgname" placeholder="请输入自定义背景文件名"/>
<input class='btn' type="button" value="确定" v-on:click="updatebg"/>
</div>
</div>
</div>
</div>
<div id="right">
<div id="iconLib">
<canvas class='egameCanvas' id='edata' width='416' height='416' style='z-index:0'></canvas>
<div id="selectBox">
<div id='dataSelection' v-show="isSelected" v-cloak></div>
</div>
</div>
</div>
</div>
<!-- <script>/* -->
<div id='gameGroup' style='display:none'>
<p id='mainTips'>请稍后...</p>
<div id='startPanel'>
<div id='startTop'>
<div id='startTopProgressBar'>
<div id='startTopProgress'></div>
</div>
<p id='startTopLoadTips'>资源即将开始加载</p>
</div>
<img id='startBackground' src='project/images/bg.png'>
<!-- 标题界面；可以改style的color使标题改变颜色 -->
<p id='startLogo' style="color: black"></p>
<div id='startButtonGroup'>
<div id='startButtons'>
<span class='startButton' id='playGame'>开始游戏</span>
<span class='startButton' id='loadGame'>载入游戏</span>
<span class='startButton' id='aboutGame'>关于本塔</span>
</div>
<div id='levelChooseButtons'>
<span class='startButton' id='easyLevel'>简单</span>
<span class='startButton' id='normalLevel'>普通</span>
<span class='startButton' id='hardLevel'>困难</span>
</div>
</div>
</div>
<div id='floorMsgGroup'>
<p id='logoLabel'></p>
<p id='versionLabel'></p>
<p id='floorNameLabel'></p>
</div>
<div id='statusBar' class="clearfix">
<div class="status" id="floorCol">
<img src='project/images/floor.png' id="img-floor">
<p class='statusLabel' id='floor'></p>
</div>
<div class="status" id="lvCol">
<img src='project/images/lv.png' id="img-lv">
<p class='statusLabel' id='lv'></p>
</div>
<div class="status">
<img src='project/images/hp.png' id="img-hp">
<p class='statusLabel' id='hp'></p>
</div>
<div class="status">
<img src='project/images/atk.png' id="img-atk">
<p class='statusLabel' id='atk'></p>
</div>
<div class="status">
<img src='project/images/def.png' id="img-def">
<p class='statusLabel' id='def'></p>
</div>
<div class="status" id="mdefCol">
<img src='project/images/mdef.png' id="img-mdef">
<p class='statusLabel' id='mdef'></p>
</div>
<div class="status" id="moneyCol">
<img src='project/images/money.png' id="img-money">
<p class='statusLabel' id='money'></p>
</div>
<div class="status" id="expCol">
<img src='project/images/experience.png' id="img-experience">
<p class='statusLabel' id='experience'></p>
</div>
<div class="status" id="upCol">
<img src='project/images/up.png' id="img-up">
<p class='statusLabel' id='up'></p>
</div>
<div class="status">
<span class='statusLabel' id='yellowKey' style="color:#FFCCAA"></span>
<span class='statusLabel' id='blueKey' style="color:#AAAADD"></span>
<span class='statusLabel' id='redKey' style="color:#FF8888"></span>
</div>
<div class="status" id="debuffCol">
<span class='statusLabel' id='poison' style="color: #AFFCA8;"></span>
<span class='statusLabel' id='weak' style="color: #FECCD0;"></span>
<span class='statusLabel' id='curse' style="color: #C2F4E7;"></span>
</div>
</div>
<div id="toolBar" class="clearfix">
<img src="project/images/book.png" class="tools" id='img-book'>
<img src="project/images/fly.png" class="tools" id='img-fly'>
<img src="project/images/toolbox.png" class="tools" id='img-toolbox'>
<img src="project/images/shop.png" class="tools" id='img-shop'>
<img src="project/images/save.png" class="tools" id='img-save'>
<img src="project/images/load.png" class="tools" id='img-load'>
<img src="project/images/settings.png" class="tools" id='img-settings'>
<p class="statusLabel tools" id="hard"></p>
</div>
<div id="curtain"></div>
<!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> -->
<!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
</div>
<!-- */</script> -->
<script>
// 生成定位编号
(function(){
var colNum = ' ';
for(var i=0; i<13; i++){
var tpl = '<td>'+i+'<div class="colBlock" style="left:'+(i*32+1)+'px;"></div></td>';
colNum += tpl;
}
arrColMark.innerHTML = '<tr>'+colNum+'</tr>';
mapColMark.innerHTML = '<tr>'+colNum+'</tr>';
var rowNum = ' ';
for(var i=0; i<13; i++){
var tpl = '<tr><td>'+i+'<div class="rowBlock" style="top:'+(i*32+1)+'px;"></div></td></tr>';
rowNum += tpl;
}
arrRowMark.innerHTML = rowNum;
mapRowMark.innerHTML = rowNum;
})();
</script>
<!-- =========================================================== -->
<script src='_server/vendor/vue.min.js'></script>
<!-- <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script> -->
<script src='_server/fs.js'></script>
<script src='_server/editor_file.js'></script>
<script src='_server/vm.js'></script>
<script id='mainScript' src='main.js'></script>
<script>
//所有全局量
__all__=['Vue','fs','editor_file','main','core','hasOwnProp','editor'];
__id__=['editArea','arrRowMark','mapRowMark','data','bg','dataSelection'];
__Vue__=['exportM','editArea','editTip','clear','tip','selectBox'];
//var event = document.getElementById('event');
var hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwnProp (obj, key) {
return hasOwnProperty.call(obj, key)
}
</script>
<script src='_server/editor.js'></script>
<script>
main.init('editor');
editor.init();
//main.listen();
//core.setHeroMoveTriggerInterval();
</script>
</body>
</html>

1
libs/core.js
View File

@ -79,7 +79,6 @@ function core() {
'mouseOutCheck': 1,
'moveStepBeforeStop': [],
// 勇士状态；中心对称飞行器
// event事件
'saveIndex': null,