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

Merge pull request #23 from zhaouv/drawMapGUI

Browse Source 
重构drawMapGui
This commit is contained in:
Zhang Chen 2017-12-26 09:38:29 +08:00 committed by GitHub
commit 458c6a6498
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 367 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
_server/fs.js Normal file
View File

@ -0,0 +1,101 @@
(function(){
fs = {};
var postsomething = function (data,_ip,callback) {
//callback:function(err, data)
//data:字符串
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
switch(xhr.readyState){
case 4 :
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
if (Boolean(callback)){
if (xhr.responseText.slice(0,6)=='error:'){
callback(xhr.responseText,null);
} else {
callback(null,xhr.responseText);
}
}
//printf(xhr.responseText)
}else{
if (Boolean(callback))callback(xhr.status,null);
//printf('error:' + xhr.status+'<br>'+(xhr.responseText||''));
}
break;
}
}
xhr.open('post',_ip);
xhr.setRequestHeader('Content-Type','text/plain');
if(typeof(data)==typeof([][0]) || data==null)data=JSON.stringify({1:2});
xhr.send(data);
}
fs.readFile = function (filename,encoding,callback) {
if (typeof(filename)!=typeof(''))
throw 'Type Error in fs.readFile';
if (encoding=='utf-8'){
//读文本文件
//filename:支持"/"做分隔符
//callback:function(err, data)
//data:字符串
var data='';
data+='type=utf8&';
data+='name='+filename;
postsomething(data,'/readFile',callback);
return;
}
if (encoding=='base64'){
//读二进制文件
//filename:支持"/"做分隔符
//callback:function(err, data)
//data:base64字符串
var data='';
data+='type=base64&';
data+='name='+filename;
postsomething(data,'/readFile',callback);
return;
}
throw 'Type Error in fs.readFile';
}
fs.writeFile = function (filename,datastr,encoding,callback) {
if (typeof(filename)!=typeof('') || typeof(datastr)!=typeof(''))
throw 'Type Error in fs.writeFile';
if (encoding=='utf-8'){
//写文本文件
//filename:支持"/"做分隔符
//callback:function(err)
//datastr:字符串
var data='';
data+='type=utf8&';
data+='name='+filename;
data+='&value='+datastr;
postsomething(data,'/writeFile',callback);
return;
}
if (encoding=='base64'){
//写二进制文件
//filename:支持"/"做分隔符
//callback:function(err)
//datastr:base64字符串
var data='';
data+='type=base64&';
data+='name='+filename;
data+='&value='+datastr;
postsomething(data,'/writeFile',callback);
return;
}
throw 'Type Error in fs.writeFile';
}
fs.readdir = function (path, callback) {
//callback:function(err, data)
//path:支持"/"做分隔符,不以"/"结尾
//data:[filename1,filename2,..] filename是字符串,只包含文件不包含目录
if (typeof(path)!=typeof(''))
throw 'Type Error in fs.readdir';
var data='';
data+='name='+path;
postsomething(data,'/listFile',function(err, data){callback(err,JSON.parse(data))});
return;
}
})();

104
_server/fsTest_cs.html
View File

@ -2,109 +2,7 @@
<html> <html>
<head><meta charset="utf-8"></head> <head><meta charset="utf-8"></head>
<body> <body>
<script> <script src="./fs.js"></script>
(function(){
fs = {};
var postsomething = function (data,_ip,callback) {
//callback:function(err, data)
//data:字符串
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
switch(xhr.readyState){
case 4 :
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
if (Boolean(callback)){
if (xhr.responseText.slice(0,6)=='error:'){
callback(xhr.responseText,null);
} else {
callback(null,xhr.responseText);
}
}
//printf(xhr.responseText)
}else{
if (Boolean(callback))callback(xhr.status,null);
//printf('error:' + xhr.status+'<br>'+(xhr.responseText||''));
}
break;
}
}
xhr.open('post',_ip);
xhr.setRequestHeader('Content-Type','text/plain');
if(typeof(data)==typeof([][0]) || data==null)data=JSON.stringify({1:2});
xhr.send(data);
}
fs.readFile = function (filename,encoding,callback) {
if (typeof(filename)!=typeof(''))
throw 'Type Error in fs.readFile';
if (encoding=='utf-8'){
//读文本文件
//filename:支持"/"做分隔符
//callback:function(err, data)
//data:字符串
var data='';
data+='type=utf8&';
data+='name='+filename;
postsomething(data,'/readFile',callback);
return;
}
if (encoding=='base64'){
//读二进制文件
//filename:支持"/"做分隔符
//callback:function(err, data)
//data:base64字符串
var data='';
data+='type=base64&';
data+='name='+filename;
postsomething(data,'/readFile',callback);
return;
}
throw 'Type Error in fs.readFile';
}
fs.writeFile = function (filename,datastr,encoding,callback) {
if (typeof(filename)!=typeof('') || typeof(datastr)!=typeof(''))
throw 'Type Error in fs.writeFile';
if (encoding=='utf-8'){
//写文本文件
//filename:支持"/"做分隔符
//callback:function(err)
//datastr:字符串
var data='';
data+='type=utf8&';
data+='name='+filename;
data+='&value='+datastr;
postsomething(data,'/writeFile',callback);
return;
}
if (encoding=='base64'){
//写二进制文件
//filename:支持"/"做分隔符
//callback:function(err)
//datastr:base64字符串
var data='';
data+='type=base64&';
data+='name='+filename;
data+='&value='+datastr;
postsomething(data,'/writeFile',callback);
return;
}
throw 'Type Error in fs.writeFile';
}
fs.readdir = function (path, callback) {
//callback:function(err, data)
//path:支持"/"做分隔符,不以"/"结尾
//data:[filename1,filename2,..] filename是字符串,只包含文件不包含目录
if (typeof(path)!=typeof(''))
throw 'Type Error in fs.readdir';
var data='';
data+='name='+path;
postsomething(data,'/listFile',function(err, data){callback(err,JSON.parse(data))});
return;
}
})();
</script>
<script> <script>
fs.writeFile('_test.txt','123中a文bc','utf-8',function(e,d){console.log(e);console.log(d);}) fs.writeFile('_test.txt','123中a文bc','utf-8',function(e,d){console.log(e);console.log(d);})
setTimeout(function() { setTimeout(function() {

500
drawMapGUI.html
View File

@ -348,44 +348,9 @@
</div> </div>
<script>main={'instance':{}}</script>
<script src='libs/icons.js'></script>
<script src='libs/maps.js'></script>
<script src='_server/vendor/vue.min.js'></script>
<!-- <script src="https://unpkg.com/vue"></script> -->
<script> <script>
main.instance.icons.init();//不知道为什么,需要手动init,明明maps是正常的 // 生成定位编号
icons=main.instance.icons.getIcons(); (function(){
var ids = [], indexs = []
ids.push({'idnum':0,'id':'ground','images':'terrains','y':0});
var point = 0
for(var i=0; i<400; i++){
var indexBlock = main.instance.maps.getBlock(0,0,i);
indexs[i] = [];
if('event' in indexBlock){
var id = indexBlock.event.id;
var indexId = indexBlock.id;
if(id=='autotile'){
ids.push({'idnum':indexId,'id':'autotile','images':'autotile','y':0});
point++;
indexs[i].push(point);
continue;
}
var allCls = Object.keys(icons);
for(var j=0; j<allCls.length; j++){
if(id in icons[allCls[j]] ){
ids.push({'idnum':indexId,'id':id,'images':allCls[j],'y':icons[allCls[j]][id]});
point++;
indexs[i].push(point);
}
}
}
}
// 生成定位编号
var colNum = ' '; var colNum = ' ';
for(var i=0; i<13; i++){ for(var i=0; i<13; i++){
var tpl = '<td>'+i+'<div class="colBlock" style="left:'+(i*32+1)+'px;"></div></td>'; var tpl = '<td>'+i+'<div class="colBlock" style="left:'+(i*32+1)+'px;"></div></td>';
@ -400,11 +365,111 @@
} }
arrRowMark.innerHTML = rowNum; arrRowMark.innerHTML = rowNum;
mapRowMark.innerHTML = rowNum; mapRowMark.innerHTML = rowNum;
})();
</script> </script>
<!-- =========================================================== -->
<script src='_server/vendor/vue.min.js'></script>
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src='_server/fs.js'></script>
<script> <script>
(function(){ printf = function(str,weak) {
var prefix='<span class="result">',postfix='</span>';
if (weak){prefix='<span class="weakresult">';}
if (typeof(str)==="undefined")str='';
printOut.innerHTML=prefix+String(str)+postfix;
}
//所有全局量
__all__=['Vue','fs','printf','editor','main','core','fullX','fullY'];
__id__=['printOut','arrRowMark','mapRowMark','data','bg','dataSelection'];
__Vue__=['exportM','editArea','editTip','clear','tip','selectBox'];
var main={'instance':{}};
var core={};
function editor() {
this.version = "0.1";
}
editor.prototype.init = function() {
var loadedNum=0;
var tmp_callback = function () {
loadedNum++;
if (loadedNum==2)
editor.drawInitData(function(){
editor.listen();
});
}
editor.loadMod(function(){
editor.afterLoadMod(function(){
tmp_callback();
});
});
editor.loadImage(function(){
editor.importGrass(function(){
editor.afterImportGrass(function(){
tmp_callback();
});
});
});
}
editor.prototype.loadMod = function (callback) {
main={'instance':{}};
var loadedNum=0;
['libs/icons.js','libs/maps.js'].forEach( function (value,ii,aa) {
var script = document.createElement('script');
script.src = value + '?' + editor.version;
document.body.appendChild(script);
script.onload = function () {
loadedNum++;
if (loadedNum==aa.length)
callback();
}
})
}//main 加载['libs/icons.js','libs/maps.js']
editor.prototype.afterLoadMod = function (callback) {
main.instance.icons.init();
var icons=main.instance.icons.getIcons();
editor.ids = [];
editor.indexs = [];
editor.ids.push({'idnum':0,'id':'ground','images':'terrains','y':0});
var point = 0
for(var i=0; i<400; i++){
var indexBlock = main.instance.maps.getBlock(0,0,i);
editor.indexs[i] = [];
if('event' in indexBlock){
var id = indexBlock.event.id;
var indexId = indexBlock.id;
if(id=='autotile'){
editor.ids.push({'idnum':indexId,'id':'autotile','images':'autotile','y':0});
point++;
editor.indexs[i].push(point);
continue;
}
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);
}
}
}
}
callback();
}//editor.ids,editor.indexs
editor.prototype.loadImage = function (callback) {
core={}; core={};
core.material={}; core.material={};
core.material.images = {}; core.material.images = {};
@ -432,26 +497,30 @@
imgName = imgName[0]; imgName = imgName[0];
core.material.images[imgName] = image; core.material.images[imgName] = image;
loadedImageNum++; loadedImageNum++;
if (loadedImageNum == core.images.length) {importGrass();} if (loadedImageNum == core.images.length) {callback();}
}); });
} }
})(); }//core 加载['terrains','animates', 'enemys', 'items', 'npcs']
//context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
</script>
<script type="text/javascript"> editor.prototype.importGrass = function (callback) {
//预处理草的源图片 var autotile = new Image();
importGrass=function(){
autotile = new Image();
autotile.src = "images/autotile.png" autotile.src = "images/autotile.png";
if (autotile.complete) {
editor.autotile = autotile;
callback();
return;
}
autotile.onload = function () { autotile.onload = function () {
console.log("loaded") editor.autotile = autotile;
drawInitData(); callback();
}; };
function drawAutotile(canvas, x, y, size, autotile, index) { }// 加载 'autotile'
editor.prototype.afterImportGrass = function (callback) {
var drawAutotile = function (canvas, x, y, size, autotile, index) {
switch (index) { switch (index) {
case 0: case 0:
canvas.drawImage(autotile, 0, 0, 32, 32, x, y, size, size); canvas.drawImage(autotile, 0, 0, 32, 32, x, y, size, size);
@ -529,36 +598,34 @@ importGrass=function(){
//根据状态画图 //根据状态画图
var cxt = eventLayer.getContext("2d"); var cxt = eventLayer.getContext("2d");
grass = function (ii, x, y) { var grass = function (ii, x, y) {
cxt.clearRect(x * 32, y * 32, 32, 32); cxt.clearRect(x * 32, y * 32, 32, 32);
// cxt.putImageData(grassImageData[ii], x * 32, y * 32); // cxt.putImageData(grassImageData[ii], x * 32, y * 32);
drawAutotile(cxt, x * 32, y * 32, 32, autotile, ii); drawAutotile(cxt, x * 32, y * 32, 32, editor.autotile, ii);
} }
//function clearGrass() { cxt.clearRect(0, 0, 416, 416); } var isGrass = function (xx, yy) {
var mapxy=editor.map[editor.m(xx,yy)];
fullX = 12;
fullY = 12;
map = [];//-2表示边界,0表示空地,其他对象对应实体
map[fullX + 1 + fullY * (fullX + 1)] = -2;
for(var ii=0;ii<fullX + 1 + fullY * (fullX + 1);ii++)map[ii]=0;
m = function (x, y) {
if (x < 0 || x > fullX || y < 0 || y > fullY) return fullX + 1 + fullY * (fullX + 1);
return x + y * (fullX + 1);
}
isGrass = function (xx, yy) {
var mapxy=map[m(xx,yy)];
if (typeof(mapxy) == typeof(-1) || typeof(mapxy) == typeof([][0]))return 0; if (typeof(mapxy) == typeof(-1) || typeof(mapxy) == typeof([][0]))return 0;
if (mapxy.images=='autotile')return 1; if (mapxy.images=='autotile')return 1;
return 0; return 0;
} }
updateMap = function () { fullX = 12;
fullY = 12;
editor.map = [];//-2表示边界,0表示空地,其他对象对应实体
editor.map[fullX + 1 + fullY * (fullX + 1)] = -2;
for(var ii=0;ii<fullX + 1 + fullY * (fullX + 1);ii++)editor.map[ii]=0;
editor.m = function (x, y) {
if (x < 0 || x > fullX || y < 0 || y > fullY) return fullX + 1 + fullY * (fullX + 1);
return x + y * (fullX + 1);
}
editor.updateMap = function (error) {
//clearGrass(); //clearGrass();
// console.log(map) // console.log(editor.map)
for (var xx = 0; xx <= fullX; xx++) { for (var xx = 0; xx <= fullX; xx++) {
for (var yy = 0; yy <= fullY; yy++) { for (var yy = 0; yy <= fullY; yy++) {
if (!isGrass(xx, yy)) continue; if (!isGrass(xx, yy)) continue;
@ -571,6 +638,7 @@ importGrass=function(){
for (var xx = 0; xx < fullX; xx++) { for (var xx = 0; xx < fullX; xx++) {
for (var yy = 0; yy < fullY; yy++) { for (var yy = 0; yy < fullY; yy++) {
if (isGrass(xx, yy) + isGrass(xx + 1, yy) + isGrass(xx + 1, yy + 1) + isGrass(xx, yy + 1) != 3) continue; if (isGrass(xx, yy) + isGrass(xx + 1, yy) + isGrass(xx + 1, yy + 1) + isGrass(xx, yy + 1) != 3) continue;
var autotile = editor.autotile;
if (!isGrass(xx, yy)) { if (!isGrass(xx, yy)) {
// cxt.clearRect(xx * 32 + 32, yy * 32 + 32, 16, 16); // cxt.clearRect(xx * 32 + 32, yy * 32 + 32, 16, 16);
// cxt.putImageData(grassImageData[16], xx * 32 + 32, yy * 32 + 32); // cxt.putImageData(grassImageData[16], xx * 32 + 32, yy * 32 + 32);
@ -596,81 +664,81 @@ importGrass=function(){
for (var xx = 0; xx <= fullX; xx++) { for (var xx = 0; xx <= fullX; xx++) {
for (var yy = 0; yy <= fullY; yy++) { for (var yy = 0; yy <= fullY; yy++) {
if (isGrass(xx, yy)) continue; if (isGrass(xx, yy)) continue;
var mapxy=map[m(xx,yy)]; var mapxy=editor.map[editor.m(xx,yy)];
if (typeof(mapxy) == typeof(-1)){ if (typeof(mapxy) == typeof(-1)){
if(mapxy == 0) cxt.clearRect(xx*32, yy*32, 32, 32); if(mapxy == 0) cxt.clearRect(xx*32, yy*32, 32, 32);
continue; continue;
} }
else if(typeof(mapxy) == typeof([][0])) {//未定义块画红块
cxt.fillStyle = 'red';
cxt.fillRect(xx*32, yy*32, 32, 32);
continue;
}
//context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height) //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
cxt.clearRect(xx*32, yy*32, 32, 32); cxt.clearRect(xx*32, yy*32, 32, 32);
cxt.drawImage(core.material.images[mapxy.images], 0, mapxy.y*32, 32, 32, xx*32, yy*32, 32, 32); cxt.drawImage(core.material.images[mapxy.images], 0, mapxy.y*32, 32, 32, xx*32, yy*32, 32, 32);
if(typeof(mapxy) != typeof({}) || !('idnum' in mapxy) ) {//未定义块画红块
if (error=='clearError'){
editor.map[editor.m(xx,yy)]=0;
cxt.clearRect(xx*32, yy*32, 32, 32);
continue;
}
if (error=='showError'){
cxt.fillStyle = 'rgba(255,0,0,0.8)';
var tmpNum =6;
cxt.fillRect(xx*32+tmpNum, yy*32+tmpNum, 32-tmpNum*2, 32-tmpNum*2);
}
}
} }
} }
} }
}
</script>
<script> callback();
//画背景以及拖拽相关的支持 }//fullX,fullY,editor.map,editor.m,editor.updateMap
printf = function(str,weak) { editor.prototype.drawInitData = function (callback) {
var prefix='<span class="result">',postfix='</span>'; var ratio=1;
if (weak){prefix='<span class="weakresult">';} var images=core.material.images;
if (typeof(str)==="undefined")str=''; var maxHeight=700;
printOut.innerHTML=prefix+String(str)+postfix; var sumWidth=0;
editor.widthsX={};
for(var ii=0;ii<core.images.length;ii++){
var img=core.images[ii];
editor.widthsX[img]=[img,sumWidth/32,(sumWidth+images[img].width)/32];
sumWidth+=images[img].width;
maxHeight=Math.max(maxHeight,images[img].height);
} }
editor.widthsX['autotile']=['autotile',sumWidth/32,(sumWidth+3*32)/32];
sumWidth+=3*32;
var fullWidth=~~(sumWidth*ratio);
var fullHeight=~~(maxHeight*ratio);
drawInitData = function(){ if (fullWidth > data.width) data.style.width = (data.width = fullWidth)/ratio + 'px';
var ratio=1; data.style.height = (data.height = fullHeight)/ratio + 'px';
var images=core.material.images; var dc = data.getContext('2d');
maxHeight=700; var bgc = bg.getContext('2d');
sumWidth=0; //var colorA = ["#f8f8f8", "#cccccc"];
widthsX={}; //var colorIndex = 1;
for(var ii=0;ii<core.images.length;ii++){ //在data内画一个13*13的灰白相间的格子
var img=core.images[ii]; for (var ii = 0; ii < 13; ii++)
widthsX[img]=[img,sumWidth/32,(sumWidth+images[img].width)/32]; for (var jj = 0; jj < 13; jj++) {
sumWidth+=images[img].width; //dc.fillStyle = colorA[colorIndex];
maxHeight=Math.max(maxHeight,images[img].height); //colorIndex = 1 - colorIndex;
//dc.fillRect(ii * 32, jj * 32, 32, 32);
bgc.drawImage(core.material.images['terrains'], 0, 0, 32, 32, ii*32, jj*32, 32, 32);
} }
widthsX['autotile']=['autotile',sumWidth/32,(sumWidth+3*32)/32]; var nowx=0;
sumWidth+=3*32; for(var ii=0;ii<core.images.length;ii++){
var img=core.images[ii];
var fullWidth=~~(sumWidth*ratio); dc.drawImage(images[img], nowx, 0)
var fullHeight=~~(maxHeight*ratio); nowx+=images[img].width;
}
dc.drawImage(editor.autotile, nowx, 0)
// data.style.width = (data.width = fullWidth)/ratio + 'px'; callback();
data.style.height = (data.height = fullHeight)/ratio + 'px'; }//editor.widthsX
var dc = data.getContext('2d'); editor.prototype.listen = function() {
var bgc = bg.getContext('2d');
//var colorA = ["#f8f8f8", "#cccccc"];
//var colorIndex = 1;
//在data内画一个13*13的灰白相间的格子
for (var ii = 0; ii < 13; ii++)
for (var jj = 0; jj < 13; jj++) {
//dc.fillStyle = colorA[colorIndex];
//colorIndex = 1 - colorIndex;
//dc.fillRect(ii * 32, jj * 32, 32, 32);
bgc.drawImage(core.material.images['terrains'], 0, 0, 32, 32, ii*32, jj*32, 32, 32);
}
var nowx=0;
for(var ii=0;ii<core.images.length;ii++){
var img=core.images[ii];
dc.drawImage(images[img], nowx, 0)
nowx+=images[img].width;
}
dc.drawImage(autotile, nowx, 0)
};
(function () {
var uc = ui.getContext('2d'); var uc = ui.getContext('2d');
function fillPos(pos) { function fillPos(pos) {
@ -679,16 +747,16 @@ importGrass=function(){
}//在格子内画一个随机色块 }//在格子内画一个随机色块
function eToLoc(e) { function eToLoc(e) {
var loc = { editor.loc = {
'x': document.documentElement.scrollLeft+e.clientX - mid.offsetLeft-mapEdit.offsetLeft, 'x': document.documentElement.scrollLeft+e.clientX - mid.offsetLeft-mapEdit.offsetLeft,
'y': document.documentElement.scrollTop+e.clientY - mid.offsetTop-mapEdit.offsetTop, 'y': document.documentElement.scrollTop+e.clientY - mid.offsetTop-mapEdit.offsetTop,
'size': 32 'size': 32
}; };
return loc; }//返回可用的组件内坐标 return editor.loc; }//返回可用的组件内坐标
function locToPos(loc) { function locToPos(loc) {
pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) } editor.pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
return pos; return editor.pos;
} }
var holdingPath = 0; var holdingPath = 0;
@ -718,7 +786,7 @@ importGrass=function(){
e.stopPropagation(); e.stopPropagation();
uc.clearRect(0, 0, 416, 416); uc.clearRect(0, 0, 416, 416);
var loc = eToLoc(e); var loc = eToLoc(e);
pos = locToPos(loc) var pos = locToPos(loc)
stepPostfix = []; stepPostfix = [];
stepPostfix.push(pos); stepPostfix.push(pos);
fillPos(pos); fillPos(pos);
@ -744,7 +812,7 @@ importGrass=function(){
max = directionDistance[i]; max = directionDistance[i];
} }
} }
pos = [{ 'x': 0, 'y': 1 }, { 'x': -1, 'y': 0 }, { 'x': 0, 'y': -1 }, { 'x': 1, 'y': 0 }, false][index] var pos = [{ 'x': 0, 'y': 1 }, { 'x': -1, 'y': 0 }, { 'x': 0, 'y': -1 }, { 'x': 1, 'y': 0 }, false][index]
if (pos) { if (pos) {
pos.x += pos0.x; pos.x += pos0.x;
pos.y += pos0.y; pos.y += pos0.y;
@ -762,16 +830,16 @@ importGrass=function(){
e.stopPropagation(); e.stopPropagation();
var loc = eToLoc(e); var loc = eToLoc(e);
if (stepPostfix.length) { if (stepPostfix.length) {
preMapData = JSON.parse(JSON.stringify(map)); preMapData = JSON.parse(JSON.stringify(editor.map));
currDrawData.pos = JSON.parse(JSON.stringify(stepPostfix)); currDrawData.pos = JSON.parse(JSON.stringify(stepPostfix));
currDrawData.info = JSON.parse(JSON.stringify(info)); currDrawData.info = JSON.parse(JSON.stringify(editor.info));
reDo = null; reDo = null;
// console.log(stepPostfix); // console.log(stepPostfix);
for (var ii = 0; ii < stepPostfix.length; ii++) for (var ii = 0; ii < stepPostfix.length; ii++)
map[m(stepPostfix[ii].x, stepPostfix[ii].y)] = info; editor.map[editor.m(stepPostfix[ii].x, stepPostfix[ii].y)] = editor.info;
map[fullX + 1 + fullY * (fullX + 1)] = -2; editor.map[fullX + 1 + fullY * (fullX + 1)] = -2;
// console.log(map); // console.log(editor.map);
updateMap(); editor.updateMap();
holdingPath = 0; holdingPath = 0;
stepPostfix = []; stepPostfix = [];
uc.clearRect(0, 0, 416, 416); uc.clearRect(0, 0, 416, 416);
@ -790,38 +858,39 @@ importGrass=function(){
e.preventDefault(); e.preventDefault();
//Ctrl+z 撤销上一步undo //Ctrl+z 撤销上一步undo
if(e.keyCode == 90 && e.ctrlKey && preMapData && currDrawData.pos.length){ if(e.keyCode == 90 && e.ctrlKey && preMapData && currDrawData.pos.length){
map = JSON.parse(JSON.stringify(preMapData)); editor.map = JSON.parse(JSON.stringify(preMapData));
updateMap(); editor.updateMap();
reDo = JSON.parse(JSON.stringify(currDrawData)); reDo = JSON.parse(JSON.stringify(currDrawData));
currDrawData = {pos: [],info: {}}; currDrawData = {pos: [],info: {}};
preMapData = null; preMapData = null;
} }
//Ctrl+y 重做一步redo //Ctrl+y 重做一步redo
if(e.keyCode == 89 && e.ctrlKey && reDo && reDo.pos.length){ if(e.keyCode == 89 && e.ctrlKey && reDo && reDo.pos.length){
preMapData = JSON.parse(JSON.stringify(map)); preMapData = JSON.parse(JSON.stringify(editor.map));
for(var j=0; j<reDo.pos.length;j++) for(var j=0; j<reDo.pos.length;j++)
map[m(reDo.pos[j].x, reDo.pos[j].y)] = JSON.parse(JSON.stringify(reDo.info)); editor.map[editor.m(reDo.pos[j].x, reDo.pos[j].y)] = JSON.parse(JSON.stringify(reDo.info));
map[fullX + 1 + fullY * (fullX + 1)] = -2; editor.map[fullX + 1 + fullY * (fullX + 1)] = -2;
updateMap(); editor.updateMap();
currDrawData = JSON.parse(JSON.stringify(reDo)); currDrawData = JSON.parse(JSON.stringify(reDo));
reDo = null; reDo = null;
} }
} }
// info=ids[indexs[20][0]];//autotile // info=editor.ids[editor.indexs[20][0]];//autotile
data.onmousedown = function (e) { data.onmousedown = function (e) {
e.stopPropagation(); e.stopPropagation();
var loc = { var loc = {
'x': document.documentElement.scrollLeft + e.clientX - right.offsetLeft-iconLib.offsetLeft, 'x': document.documentElement.scrollLeft + e.clientX + (iconLib.scrollLeft||0) - right.offsetLeft-iconLib.offsetLeft,
'y': document.documentElement.scrollTop + e.clientY + iconLib.scrollTop - right.offsetTop-iconLib.offsetTop, 'y': document.documentElement.scrollTop + e.clientY + (iconLib.scrollTop||0) - right.offsetTop-iconLib.offsetTop,
'size': 32 'size': 32
}; };
pos = locToPos(loc); editor.loc =loc;
for (var spriter in widthsX){ var pos = locToPos(loc);
if(pos.x>=widthsX[spriter][1] && pos.x<widthsX[spriter][2]){ for (var spriter in editor.widthsX){
pos.x=widthsX[spriter][1]; if(pos.x>=editor.widthsX[spriter][1] && pos.x<editor.widthsX[spriter][2]){
pos.images=widthsX[spriter][0]; pos.x=editor.widthsX[spriter][1];
pos.images=editor.widthsX[spriter][0];
if(pos.images=='autotile'){ if(pos.images=='autotile'){
pos.y=0; pos.y=0;
}else if((pos.y+1)*32>core.material.images[pos.images].height) }else if((pos.y+1)*32>core.material.images[pos.images].height)
@ -831,87 +900,39 @@ importGrass=function(){
// console.log(pos,core.material.images[pos.images].height) // console.log(pos,core.material.images[pos.images].height)
dataSelection.style.left = pos.x*32 +'px'; dataSelection.style.left = pos.x*32 +'px';
dataSelection.style.top = pos.y*32 +'px'; dataSelection.style.top = pos.y*32 +'px';
info={'images':pos.images,'y':pos.y}; editor.info={'images':pos.images,'y':pos.y};
for (var ii=0;ii<ids.length;ii++){ for (var ii=0;ii<editor.ids.length;ii++){
if(pos.images==ids[ii].images && pos.y==ids[ii].y) if(pos.images==editor.ids[ii].images && pos.y==editor.ids[ii].y)
info = ids[ii]; editor.info = editor.ids[ii];
} }
tip.infos = JSON.parse(JSON.stringify(info)); tip.infos = JSON.parse(JSON.stringify(editor.info));
} }
} }
} }
})();
}//绑定事件
/*
editor.updateMap
现在可以通过editor.updateMap('clearError')把所有错误id置零并绘图
以及editor.updateMap('showError')显示所有错误
editor.loc
editor.pos
editor.info
始终是最后一次点击的结果
注意editor.info可能因为点击其他地方而被清空
*/
var editor = new editor();
editor.init();
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
//Vue
//var timecheck=0; //var listenByVue = function() {
postsomething = function (data,callback) {
//if(timecheck!==0)return;
//timecheck=1;
setTimeout(function(){timecheck=0},5000);
var xhr = function(){
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}else{
return new ActiveObject('Micrsorf.XMLHttp');
}
}();
xhr.onreadystatechange = function(){
switch(xhr.readyState){
case 0 :
printf('waiting... ','weak');
break;
case 1 :
printf('waiting ...','weak');
break;
case 2 :
printf('waiting... ','weak');
break;
case 3 :
printf('waiting ...','weak');
break;
case 4 :
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
printf(xhr.responseText);
if (Boolean(callback))callback(xhr.responseText);
}else{
printf('error:' + xhr.status+'<br>'+(xhr.responseText||''),'weak');
}
//timecheck=0;
break;
}
}
xhr.open('post','http://127.0.0.1');
xhr.setRequestHeader('Content-Type','text/plain');
if(typeof(data)==typeof([][0]) || data==null)data=JSON.stringify({1:2});
xhr.send(data);
}
function readUTF8file(filename,callback){
data={};
data.name='readUTF8file';
data.func='open';
data.args=[String(filename)];
postsomething(JSON.stringify(data),callback);
}
function writeUTF8file(filename,filestr,callback){
data={};
data.name='writeUTF8file';
data.func='open';
data.args=[String(filename),String(filestr)];
postsomething(JSON.stringify(data),callback);
}
</script>
<script type="text/javascript">
document.body.onmousedown = function(e){ document.body.onmousedown = function(e){
selectBox.isSelected = false; selectBox.isSelected = false;
info = {}; editor.info = {};
} }
iconLib.onmousedown = function(e){ iconLib.onmousedown = function(e){
e.stopPropagation(); e.stopPropagation();
@ -921,24 +942,28 @@ importGrass=function(){
methods: { methods: {
exportMap: function(){ exportMap: function(){
setTimeout(function(){editor.updateMap();},5000);
if(editArea.error) { if(editArea.error) {
tip.whichShow = 3; tip.whichShow = 3;
editor.updateMap('showError');
return; return;
} }
var filestr=''; var filestr='';
for (var yy = 0; yy < 13; yy++){ for (var yy = 0; yy < 13; yy++){
filestr+='[' filestr+='['
for (var xx = 0; xx < 13; xx++) { for (var xx = 0; xx < 13; xx++) {
var mapxy=map[m(xx,yy)]; var mapxy=editor.map[editor.m(xx,yy)];
if(typeof(mapxy)==typeof({})){ if(typeof(mapxy)==typeof({})){
if ('idnum' in mapxy)mapxy=mapxy.idnum; if ('idnum' in mapxy)mapxy=mapxy.idnum;
else { else {
// mapxy='!!?'; // mapxy='!!?';
tip.whichShow = 3; tip.whichShow = 3;
editor.updateMap('showError');
return; return;
} }
}else if(typeof(mapxy)=='undefined'){ }else if(typeof(mapxy)=='undefined'){
tip.whichShow = 3; tip.whichShow = 3;
editor.updateMap('showError');
return; return;
} }
mapxy=String(mapxy); mapxy=String(mapxy);
@ -997,17 +1022,17 @@ importGrass=function(){
for(var i=0; i<mapArray.length; i++){ for(var i=0; i<mapArray.length; i++){
var num = parseInt(mapArray[i]); var num = parseInt(mapArray[i]);
if(num == 0 ) if(num == 0 )
map[i] = 0; editor.map[i] = 0;
else if(num >= 400){ else if(num >= 400){
that.error = 3; that.error = 3;
map[i] = undefined; editor.map[i] = undefined;
}else if(indexs[num][0] == undefined){ }else if(editor.indexs[num][0] == undefined){
that.error = 2; that.error = 2;
map[i] = undefined; editor.map[i] = undefined;
}else map[i] = ids[[indexs[num][0]]]; }else editor.map[i] = editor.ids[[editor.indexs[num][0]]];
} }
updateMap(); editor.updateMap();
}, },
formatArr: function(){ formatArr: function(){
@ -1072,8 +1097,8 @@ importGrass=function(){
methods: { methods: {
clearMap: function(){ clearMap: function(){
map[fullX + 1 + fullY * (fullX + 1)] = -2; editor.map[fullX + 1 + fullY * (fullX + 1)] = -2;
for(var ii=0;ii<fullX + 1 + fullY * (fullX + 1);ii++)map[ii]=0; for(var ii=0;ii<fullX + 1 + fullY * (fullX + 1);ii++)editor.map[ii]=0;
ec = eventLayer.getContext('2d'); ec = eventLayer.getContext('2d');
ec.clearRect(0, 0, 416, 416); ec.clearRect(0, 0, 416, 416);
clearTimeout(editArea.formatTimer); clearTimeout(editArea.formatTimer);
@ -1088,7 +1113,7 @@ importGrass=function(){
var tip = new Vue({ var tip = new Vue({
el: '#tip', el: '#tip',
data: { data: {
infos: ids[indexs[20][0]], infos: {idnum: 20, id: "autotile", images: "autotile", y: 0},//editor.ids[editor.indexs[20][0]],
hasId: true, hasId: true,
isSelectedBlock: false, isSelectedBlock: false,
geneMapSuccess: false, geneMapSuccess: false,
@ -1150,6 +1175,11 @@ importGrass=function(){
} }
} }
}) })
//}
//listenByVue()
</script> </script>
</body> </body>
</html> </html>