Merge pull request #12 from i2Echo/master

update gui layout
This commit is contained in:
Zhang Chen 2017-12-18 22:33:33 +08:00 committed by GitHub
commit f4a7b51baa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,17 +1,75 @@
<!doctype html>
<html><head><meta charset="utf-8">
<style>
.gameCanvas {
<html>
<head>
<meta charset="utf-8">
<style>
html,body,div,img{margin:0;padding:0;}
.main {
max-width: 100%;
min-height: 500px;
margin: 0 auto;
}
#left{
position: absolute;
}
.auxiliary {
left: 10px;
top: 10px;
width: 416px;
height: 400px;
border: 1px solid rgb(238, 13, 13);
}
#left #pout{
position: absolute;
z-index:50;
//display:none;
}
body,div,img{margin:0;padding:0;}
#dataSelection{
position: absolute;z-index:75;
display: block;
width: 100%;
height: 100%;
left: 10px;
top: 10px;
}
#mid{
position: absolute;
left: 448px;
top: 0;
width: 416px;
height: 600px;
border: 1px solid rgb(238, 13, 13);
}
#mid .tools{
position: absolute;
width: 100%;
height: 200px;
left: 0;
top: 448px;
}
.btn{
width: 80px;
height: 30px;
margin: 10px;
border-radius: 3px;
/* background-color: green; */
}
.input{
width: 100px;
margin: 10px;
}
#right{
position: absolute;
left: 896px;
top: 0;
width: 450px;
height: 600px;
border: 1px solid rgb(238, 13, 13);
overflow:auto;
}
.gameCanvas {
position: absolute;
}
#dataSelection{
position: absolute;
top:0;
left:320px;
z-index:75;
width:32px;height:32px;
margin:-2px 0 0 -2px;
@ -21,33 +79,49 @@ body,div,img{margin:0;padding:0;}
background-color:rgba(255, 255, 255, 0.0);
border: 2px solid rgb(87, 198, 232);
box-shadow: 0px 0px 2px rgb(87, 198, 232);
}
</style>
</head><body>
<canvas class='auxiliary' id='grass_pic' width='530' height='64' style='z-index:3;top:500px;left:12px'></canvas>
}
</style>
</head>
<body>
<div class="main">
<div id="left">
<canvas class='gameCanvas' id='eventLayer' width='416' height='416' style='z-index:2'></canvas>
<canvas class='gameCanvas' id='ui' width='416' height='416' style='z-index:100'></canvas>
<canvas class='gameCanvas' id='data' width='416' height='416' style='z-index:0'></canvas>
<input class='auxiliary' id='pin' style='top:630px;left:12px;width:200px;height:20px' value="文件名"/>
<p class='auxiliary' id='pout' style='top:660px;left:12px' >可以在console中通过printf(str)来改变这里的值</p>
<div id='dataSelection' style="top:0px;left:768px;"></div>
<p id='pout'>可以在console中通过printf(str)来改变这里的值</p>
</div>
<div id="mid">
<div class="map">
<canvas class='gameCanvas' id='bg' width='416' height='416' style='z-index:1'></canvas>
<canvas class='gameCanvas' id='eventLayer' width='416' height='416' style='z-index:2'></canvas>
<canvas class='gameCanvas' id='ui' width='416' height='416' style='z-index:100'></canvas>
</div>
<div class="tools">
<input class='btn' type="button" value="exportMap" onclick="exportMap()" style="top:600px;left:50px"/>
<input class='btn' type="button" value="read" onclick="readUTF8file(pin.value)" style="top:600px;left:150px"/>
<input class='btn' type="button" value="write" onclick="writeUTF8file(pin.value,pout.innerText)" style="top:600px;left:200px"/>
<input class='input' id='pin' style='top:630px;left:12px;width:200px;height:20px' value="文件名"/>
</div>
</div>
<div id="right">
<canvas class='gameCanvas' id='data' width='416' height='416' style='z-index:0'></canvas>
<div id='dataSelection'></div>
</div>
</div>
<input class='gameCanvas' type="button" value="exportMap" onclick="exportMap()" style="top:600px;left:50px"/>
<input class='gameCanvas' type="button" value="read" onclick="readUTF8file(pin.value)" style="top:600px;left:150px"/>
<input class='gameCanvas' type="button" value="write" onclick="writeUTF8file(pin.value,pout.innerText)" style="top:600px;left:200px"/>
<script>main={'instance':{}}</script>
<script src='libs/icons.js'></script>
<script src='libs/maps.js'></script>
<script>
main.instance.icons.init();//不知道为什么,需要手动init,明明maps是正常的
icons=main.instance.icons.getIcons();
ids=[];
for(var ii=0;ii<=400;ii++)ids[ii]=main.instance.maps.getBlock(0,0,ii);
main.instance.icons.init();//不知道为什么,需要手动init,明明maps是正常的
icons=main.instance.icons.getIcons();
ids=[];
for(var ii=0;ii<=400;ii++)ids[ii]=main.instance.maps.getBlock(0,0,ii);
for(var ii=0;ii<=400;ii++){
for(var ii=0;ii<=400;ii++){
if('event' in ids[ii]){
var id =ids[ii].event.id;
var cls =ids[ii].event.cls;
@ -56,30 +130,30 @@ for(var ii=0;ii<=400;ii++){
}
else ids[ii]=null;
}
ids[0]={'idnum':0,'id':'ground','images':'terrains','y':0}
}
ids[0]={'idnum':0,'id':'ground','images':'terrains','y':0}
console.log(icons);
console.log(ids);
console.log(icons);
console.log(ids);
// ids
// {'idnum':20,'id':'autotile','images':'autotile','y':0}
// {'idnum':21,'id':'yellowKey','images':'items','y':0}
// {'idnum':22,'id':'blueKey','images':'items','y':1}
// ids
// {'idnum':20,'id':'autotile','images':'autotile','y':0}
// {'idnum':21,'id':'yellowKey','images':'items','y':0}
// {'idnum':22,'id':'blueKey','images':'items','y':1}
//var cxt = eventLayer.getContext("2d");
//cxt.drawImage(core.material.images['spriter_name'], sx*32, sy*32, 32, 32, xx*32, yy*32, 32, 32);
//var cxt = eventLayer.getContext("2d");
//cxt.drawImage(core.material.images['spriter_name'], sx*32, sy*32, 32, 32, xx*32, yy*32, 32, 32);
</script>
<script>
(function(){
core={};
core.material={};
core.material.images = {};
core.images=['terrains','animates', 'enemys', 'items', 'npcs', ];
var loadedImageNum=0;
core.loadImage = function (imgName, callback) {
core={};
core.material={};
core.material.images = {};
core.images=['terrains','animates', 'enemys', 'items', 'npcs', ];
var loadedImageNum=0;
core.loadImage = function (imgName, callback) {
try {
var image = new Image();
image.src = 'images/' + imgName + '.png';
@ -94,8 +168,8 @@ core.loadImage = function (imgName, callback) {
catch (e) {
alert(e);
}
}
for (var i = 0; i < core.images.length; i++) {
}
for (var i = 0; i < core.images.length; i++) {
core.loadImage(core.images[i], function (imgName, image) {
imgName = imgName.split('-');
imgName = imgName[0];
@ -103,24 +177,24 @@ for (var i = 0; i < core.images.length; i++) {
loadedImageNum++;
if (loadedImageNum == core.images.length) {importGrass();}
});
}
}
})();
//context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
</script>
<script type="text/javascript">
//预处理草的源图片
importGrass=function(){
autotile = new Image();
//预处理草的源图片
importGrass=function(){
autotile = new Image();
autotile.src = "images/autotile.png"
autotile.src = "images/autotile.png"
autotile.onload = function () {
autotile.onload = function () {
console.log("loaded")
drawInitData();
};
};
function drawAutotile(canvas, x, y, size, autotile, index) {
function drawAutotile(canvas, x, y, size, autotile, index) {
switch (index) {
case 0:
canvas.drawImage(autotile, 0, 0, 32, 32, x, y, size, size);
@ -193,41 +267,41 @@ function drawAutotile(canvas, x, y, size, autotile, index) {
canvas.drawImage(autotile, 2 * 32, 16, 16, 16, x, y, size / 2, size / 2);
break;
}
}
}
//根据状态画图
var cxt = eventLayer.getContext("2d");
//根据状态画图
var cxt = eventLayer.getContext("2d");
grass = function (ii, x, y) {
grass = function (ii, x, y) {
cxt.clearRect(x * 32, y * 32, 32, 32);
// cxt.putImageData(grassImageData[ii], x * 32, y * 32);
drawAutotile(cxt, x * 32, y * 32, 32, autotile, ii);
}
}
//function clearGrass() { cxt.clearRect(0, 0, 416, 416); }
//function clearGrass() { cxt.clearRect(0, 0, 416, 416); }
fullX = 12;
fullY = 12;
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;
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) {
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) {
isGrass = function (xx, yy) {
var mapxy=map[m(xx,yy)];
if (typeof(mapxy) == typeof(-1) || typeof(mapxy) == typeof([][0]))return 0;
if (mapxy.images=='autotile')return 1;
return 0;
}
}
updateMap = function () {
updateMap = function () {
//clearGrass();
for (var xx = 0; xx <= fullX; xx++) {
for (var yy = 0; yy <= fullY; yy++) {
@ -273,27 +347,27 @@ updateMap = function () {
cxt.drawImage(core.material.images[mapxy.images], 0, mapxy.y*32, 32, 32, xx*32, yy*32, 32, 32);
}
}
}
}
}
}
</script>
<script>
//画背景以及拖拽相关的支持
//画背景以及拖拽相关的支持
printf = function(str,weak) {
printf = function(str,weak) {
var prefix='<span class="result">',postfix='</span>';
if (weak){prefix='<span class="weakresult">';}
if (typeof(str)==="undefined")str='';
pout.innerHTML=prefix+String(str)+postfix;
}
}
drawInitData = function(){
drawInitData = function(){
var ratio=1;
var images=core.material.images;
maxHeight=700;
sumWidth=416+32;
sumWidth=0;
widthsX={};
for(var ii=0;ii<core.images.length;ii++){
var img=core.images[ii];
@ -307,10 +381,11 @@ drawInitData = function(){
var fullWidth=~~(sumWidth*ratio);
var fullHeight=~~(maxHeight*ratio);
data.style.width = (data.width = fullWidth)/ratio + 'px';
// data.style.width = (data.width = fullWidth)/ratio + 'px';
data.style.height = (data.height = fullHeight)/ratio + 'px';
var dc = data.getContext('2d');
var bgc = bg.getContext('2d');
//var colorA = ["#f8f8f8", "#cccccc"];
//var colorIndex = 1;
//在data内画一个13*13的灰白相间的格子
@ -319,9 +394,9 @@ drawInitData = function(){
//dc.fillStyle = colorA[colorIndex];
//colorIndex = 1 - colorIndex;
//dc.fillRect(ii * 32, jj * 32, 32, 32);
dc.drawImage(core.material.images['terrains'], 0, 0, 32, 32, ii*32, jj*32, 32, 32);
bgc.drawImage(core.material.images['terrains'], 0, 0, 32, 32, ii*32, jj*32, 32, 32);
}
var nowx=416+32;
var nowx=0;
for(var ii=0;ii<core.images.length;ii++){
var img=core.images[ii];
dc.drawImage(images[img], nowx, 0)
@ -329,29 +404,35 @@ drawInitData = function(){
}
dc.drawImage(autotile, nowx, 0)
};
};
(function () {
var uc = ui.getContext('2d');
var uc = ui.getContext('2d');
function fillPos(pos) {
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) { var loc = { 'x': document.documentElement.scrollLeft+e.clientX - ui.offsetLeft, 'y': document.documentElement.scrollTop+e.clientY - ui.offsetTop, 'size': 32 }; return loc; }//返回可用的组件内坐标
function eToLoc(e) {
var loc = {
'x': document.documentElement.scrollLeft+e.clientX - mid.offsetLeft,
'y': document.documentElement.scrollTop+e.clientY - mid.offsetTop,
'size': 32
};
return loc; }//返回可用的组件内坐标
function locToPos(loc) {
function locToPos(loc) {
pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
return pos;
}
}
var holdingPath = 0;
var stepPostfix = null;//用于存放寻路检测的第一个点之后的后续移动
var holdingPath = 0;
var stepPostfix = null;//用于存放寻路检测的第一个点之后的后续移动
var mouseOutCheck = 2;
function clear1() {
var mouseOutCheck = 2;
function clear1() {
if (mouseOutCheck > 1) {
mouseOutCheck--;
setTimeout(clear1, 1000);
@ -360,9 +441,9 @@ function clear1() {
holdingPath = 0;
stepPostfix = [];
uc.clearRect(0, 0, 416, 416);
}//用于鼠标移出canvas时的自动清除状态
}//用于鼠标移出canvas时的自动清除状态
ui.onmousedown = function (e) {
ui.onmousedown = function (e) {
holdingPath = 1;
mouseOutCheck = 2;
setTimeout(clear1);
@ -373,9 +454,9 @@ ui.onmousedown = function (e) {
stepPostfix = [];
stepPostfix.push(pos);
fillPos(pos);
}
}
ui.onmousemove = function (e) {
ui.onmousemove = function (e) {
if (holdingPath == 0) { return; }
mouseOutCheck = 2;
@ -398,15 +479,16 @@ ui.onmousemove = function (e) {
stepPostfix.push(pos);
fillPos(pos);
}
}
}
ui.onmouseup = function (e) {
ui.onmouseup = function (e) {
holdingPath = 0;
e.stopPropagation();
var loc = eToLoc(e);
if (stepPostfix.length) {
console.log(stepPostfix);
for (var ii = 0; ii < stepPostfix.length; ii++)map[m(stepPostfix[ii].x, stepPostfix[ii].y)] = info;
for (var ii = 0; ii < stepPostfix.length; ii++)
map[m(stepPostfix[ii].x, stepPostfix[ii].y)] = info;
map[fullX + 1 + fullY * (fullX + 1)] = -2;
console.log(map);
updateMap();
@ -414,12 +496,16 @@ ui.onmouseup = function (e) {
stepPostfix = [];
uc.clearRect(0, 0, 416, 416);
}
}
}
info=ids[20];//autotile
data.onmousedown = function (e) {
info=ids[20];//autotile
data.onmousedown = function (e) {
e.stopPropagation();
var loc = eToLoc(e);
var loc = {
'x': document.documentElement.scrollLeft + e.clientX - right.offsetLeft,
'y': document.documentElement.scrollTop + right.scrollTop+e.clientY - right.offsetTop,
'size': 32
};
pos = locToPos(loc);
console.log(pos);
for (var spriter in widthsX){
@ -440,15 +526,15 @@ data.onmousedown = function (e) {
printf(JSON.stringify(info))
}
}
}
}
})();
</script>
<script type="text/javascript">
//var timecheck=0;
postsomething = function (data,callback) {
//var timecheck=0;
postsomething = function (data,callback) {
//if(timecheck!==0)return;
//timecheck=1;
setTimeout(function(){timecheck=0},5000);
@ -483,30 +569,30 @@ postsomething = function (data,callback) {
//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);
}
}
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){
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){
function writeUTF8file(filename,filestr,callback){
data={};
data.name='writeUTF8file';
data.func='open';
data.args=[String(filename),String(filestr)];
postsomething(JSON.stringify(data),callback);
}
}
function exportMap(callback){
function exportMap(callback){
var filestr='';
for (var yy = 0; yy < 13; yy++){
filestr+='['
@ -517,15 +603,15 @@ function exportMap(callback){
else mapxy='!!?';
}
mapxy=String(mapxy);
mapxy=Array(Math.max(5-mapxy.length,0)).join(' ')+mapxy;
mapxy=Array(Math.max(4-mapxy.length,0)).join(' ')+mapxy;
filestr+=mapxy+','
}
filestr+='],\n'
}
printf('<pre>'+filestr+'\n</pre><p>已复制到剪贴板</p>'+'<textarea cols="1" rows="1" id=poutTmp>'+filestr+'\n</textarea><br><br><br>');
printf('<pre>'+filestr+'\n</pre><p>已复制到剪贴板</p>'+'<textarea cols="1" rows="1" id="poutTmp" style="display: none;">'+filestr+'\n</textarea><br><br><br>');
poutTmp.select();
document.execCommand("Copy");
}
}
</script>
</html>