Zhang Chen
GitHub
commit
8bb7d5503a
16
README.md
16
README.md
@ -50,6 +50,7 @@ HTML5 canvas制作的魔塔样板，支持全平台游戏！
|
||||
│ └─ 伤害和临界值计算器.exe # 一个能帮助计算怪物的伤害和临界值的小工具。 http://github.com/ckcz123/magic-tower-calculator/
|
||||
├── /启动服务(mac版).app/ # 启动服务的mac版本。
|
||||
├── editor.html # 可视化地图编辑工具
|
||||
├── editor-mobile.html # 可视化地图编辑工具（手机版）
|
||||
├── index.html # 主程序，游戏的入口
|
||||
├── main.js # JS程序的入口，将动态对所需JS进行加载
|
||||
├── style.css # 游戏所需要用到的样式表
|
||||
@ -58,6 +59,21 @@ HTML5 canvas制作的魔塔样板，支持全平台游戏！
|
||||
|
||||
## 更新说明
|
||||
|
||||
### 2018.7.9 V2.3.3
|
||||
|
||||
* [x] 适配手机端的造塔页面
|
||||
* [x] 启动服务的多开版本
|
||||
* [x] 新增事件：跟随效果
|
||||
* [x] 怪物数据导出器
|
||||
* [x] RM动画导出器也能导出音效
|
||||
* [x] gif播放可随着分辨率自动放缩
|
||||
* [x] 状态栏可随文字长度自动调整放缩
|
||||
* [x] 也可以用status:exp来代替经验值的写法
|
||||
* [x] V键也可以打开快捷商店
|
||||
* [x] 破炸在周围只有一个目标时无需转向面对它
|
||||
* [x] 道具效果中，无需再将null改成""才能双击编辑了
|
||||
* [x] 各个已知Bug的修复，部分细节优化
|
||||
|
||||
### 2018.6.16 V2.3.1
|
||||
|
||||
* [x] 存档采用高比率压缩，单个大小是原来的1/10！
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
html{
|
||||
font-size: 4vmin;
|
||||
font-size: 4vw;
|
||||
}
|
||||
input, textarea, select, button {
|
||||
font-size: 1rem;
|
||||
@ -29,8 +29,8 @@ body {
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); */
|
||||
background-color: #F5F5F5;
|
||||
width: 100vmin;
|
||||
height: 100vmin;
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
#left {
|
||||
@ -49,13 +49,13 @@ body {
|
||||
|
||||
#pout {
|
||||
display: block;
|
||||
width: 410px;
|
||||
height: 100%;
|
||||
width: 95vw;
|
||||
height: 62vw;
|
||||
box-sizing: border-box;
|
||||
margin-left: 22px;
|
||||
margin-left: 5vw;
|
||||
margin-top: 23px;
|
||||
line-height: 20px;
|
||||
font-size: 12.3px;
|
||||
line-height: 5vw;
|
||||
font-size: 12px;
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
white-space: pre;
|
||||
border: 1px solid #ddd;
|
||||
@ -84,14 +84,14 @@ body {
|
||||
|
||||
.map {
|
||||
position: absolute;
|
||||
left: 4vmin;
|
||||
top: 4vmin;
|
||||
width: 96vmin;
|
||||
height: 96vmin;
|
||||
left: 4vw;
|
||||
top: 4vw;
|
||||
width: 96vw;
|
||||
height: 96vw;
|
||||
}
|
||||
.map canvas{
|
||||
width: 96vmin;
|
||||
height: 96vmin;
|
||||
width: 96vw;
|
||||
height: 96vw;
|
||||
}
|
||||
|
||||
#mid .tools {
|
||||
@ -200,9 +200,8 @@ body {
|
||||
|
||||
#iconLib {
|
||||
position: absolute;
|
||||
width: 100vmin;
|
||||
height: 100vmin;
|
||||
left: 5px;
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
top: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
@ -249,7 +248,7 @@ body {
|
||||
}
|
||||
|
||||
td {
|
||||
border: 0.230vmin solid #fff;
|
||||
border: 0.230vw solid #fff;
|
||||
color: #fff;
|
||||
cursor: crosshair;
|
||||
}
|
||||
@ -271,23 +270,23 @@ table.col td {
|
||||
|
||||
#arrColMark {
|
||||
top: 2px;
|
||||
left: 36px;
|
||||
width: 385px;
|
||||
left: 5vw;
|
||||
width: 95vw;
|
||||
height: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#mapColMark {
|
||||
top: 0;
|
||||
left: 4vmin;
|
||||
width: 96vmin;
|
||||
height: 4vmin;
|
||||
font-size: 3vmin;
|
||||
left: 4vw;
|
||||
width: 96vw;
|
||||
height: 4vw;
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
|
||||
#mapColMark td {
|
||||
width: 7.15vmin;
|
||||
width: 7.15vw;
|
||||
padding: 0;
|
||||
border-bottom-width: 0px;
|
||||
border-top-width: 0px;
|
||||
@ -295,9 +294,9 @@ table.col td {
|
||||
|
||||
#mapColMark td:hover .colBlock {
|
||||
position: absolute;
|
||||
top: 4vmin;
|
||||
height: 96vmin;
|
||||
width: 7.15vmin;
|
||||
top: 4vw;
|
||||
height: 96vw;
|
||||
width: 7.15vw;
|
||||
z-index: 100;
|
||||
background-color: rgba(38, 166, 154, .5);
|
||||
}
|
||||
@ -315,22 +314,22 @@ table.row td {
|
||||
|
||||
#arrRowMark {
|
||||
top: 5px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 262px;
|
||||
left: 0;
|
||||
width: 4vw;
|
||||
height: 62vw;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#mapRowMark {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4vmin;
|
||||
height: 96vmin;
|
||||
font-size: 3vmin;
|
||||
width: 4vw;
|
||||
height: 96vw;
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
#mapRowMark td {
|
||||
height: 7.15vmin;
|
||||
height: 7.15vw;
|
||||
padding: 0;
|
||||
border-left-width: 0px;
|
||||
border-right-width: 0px;
|
||||
@ -338,9 +337,9 @@ table.row td {
|
||||
|
||||
#mapRowMark td:hover .rowBlock {
|
||||
position: absolute;
|
||||
left: 4vmin;
|
||||
height: 7.15vmin;
|
||||
width: 96vmin;
|
||||
left: 4vw;
|
||||
height: 7.15vw;
|
||||
width: 96vw;
|
||||
z-index: 100;
|
||||
background-color: rgba(76, 34, 27, .5);
|
||||
}
|
||||
@ -352,7 +351,7 @@ table.row td {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
cursor: default;
|
||||
font: normal 2.5vmin Arial, sans-serif;
|
||||
font: normal 2.5vw Arial, sans-serif;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: 4px 0;
|
||||
@ -366,7 +365,7 @@ table.row td {
|
||||
}
|
||||
#midMenu .menuitem{
|
||||
color: #000;
|
||||
font: normal 2.5vmin Arial, sans-serif;
|
||||
font: normal 2.5vw Arial, sans-serif;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 4px 7em 4px 28px;
|
||||
@ -386,7 +385,7 @@ table.row td {
|
||||
}
|
||||
#midMenu .menuitem-content{
|
||||
color: #000;
|
||||
font: normal 2.5vmin Arial, sans-serif;
|
||||
font: normal 2.5vw Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* for vue dom */
|
||||
@ -397,7 +396,7 @@ table.row td {
|
||||
#down{
|
||||
position: absolute;
|
||||
left:0;
|
||||
top:100vmin;
|
||||
top:100vw;
|
||||
bottom: 0;
|
||||
width: 100vmin;
|
||||
width: 100vw;
|
||||
}
|
||||
@ -3,14 +3,14 @@
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); */
|
||||
background-color: #F5F5F5;
|
||||
width: 100vmin;
|
||||
height: 100vmin;
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
.leftTab {
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
height: 100vmin;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
.leftTab > * {
|
||||
@ -28,7 +28,7 @@
|
||||
.leftTab {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vmin;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.leftTab .leftTabHeader {
|
||||
@ -59,15 +59,15 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
#left6 h3{
|
||||
font-size: 3.5vh;
|
||||
margin: 1vh 0;
|
||||
font-size: 6vw;
|
||||
margin: 1.77vw 0;
|
||||
|
||||
}
|
||||
|
||||
#left6 #blocklyArea {
|
||||
|
||||
width: 100vmin;
|
||||
height: 60vh;
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
#left6 #blocklyDiv {
|
||||
@ -77,7 +77,7 @@
|
||||
#left6 .CodeMirror {
|
||||
border: 1px solid #eee;
|
||||
|
||||
height: 21vh;
|
||||
height: 38vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -87,6 +87,13 @@
|
||||
overflow: y; /* resize:none; */
|
||||
}
|
||||
|
||||
#left6 #blocklyDiv .blocklyToolboxDiv{
|
||||
width:6vw;
|
||||
}
|
||||
#left6 #blocklyDiv .blocklyTreeLabel{
|
||||
margin-left:-4vw;
|
||||
}
|
||||
|
||||
#left7 {
|
||||
/* height: 440px; width: 375px;float:left; */
|
||||
left: 0;
|
||||
|
||||
@ -388,7 +388,7 @@ editor.prototype.HTMLescape = function (str_) {
|
||||
}
|
||||
|
||||
editor.prototype.listen = function () {
|
||||
|
||||
var eui=document.getElementById('eui');
|
||||
var uc = eui.getContext('2d');
|
||||
|
||||
function fillPos(pos) {
|
||||
@ -399,9 +399,11 @@ editor.prototype.listen = function () {
|
||||
function eToLoc(e) {
|
||||
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
|
||||
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||||
var xx=e.clientX,yy=e.clientY
|
||||
if(editor.isMobile){xx=e.touches[0].clientX,yy=e.touches[0].clientY}
|
||||
editor.loc = {
|
||||
'x': scrollLeft + e.clientX - mid.offsetLeft - mapEdit.offsetLeft,
|
||||
'y': scrollTop + e.clientY - mid.offsetTop - mapEdit.offsetTop,
|
||||
'x': scrollLeft + xx - mid.offsetLeft - mapEdit.offsetLeft,
|
||||
'y': scrollTop + yy - mid.offsetTop - mapEdit.offsetTop,
|
||||
'size': editor.isMobile?(32*innerWidth*0.96/416):32
|
||||
};
|
||||
return editor.loc;
|
||||
@ -499,7 +501,6 @@ editor.prototype.listen = function () {
|
||||
}
|
||||
holdingPath = 0;
|
||||
e.stopPropagation();
|
||||
var loc = eToLoc(e);
|
||||
if (stepPostfix && stepPostfix.length) {
|
||||
preMapData = JSON.parse(JSON.stringify(editor.map));
|
||||
currDrawData.pos = JSON.parse(JSON.stringify(stepPostfix));
|
||||
@ -681,7 +682,15 @@ editor.prototype.listen = function () {
|
||||
moveLoc.children[0].innerHTML='交换事件'+locStr+'与此事件的位置';
|
||||
midMenu.style='top:'+(y+scrollTop)+'px;left:'+(x+scrollLeft)+'px;';
|
||||
}
|
||||
editor.hideMidMenu=function(){midMenu.style='display:none';}
|
||||
editor.hideMidMenu=function(){
|
||||
if(editor.isMobile){
|
||||
setTimeout(function(){
|
||||
midMenu.style='display:none';
|
||||
},200)
|
||||
} else {
|
||||
midMenu.style='display:none';
|
||||
}
|
||||
}
|
||||
|
||||
var chooseThis = document.getElementById('chooseThis');
|
||||
chooseThis.onmousedown = function(e){
|
||||
@ -693,6 +702,7 @@ editor.prototype.listen = function () {
|
||||
editor_mode.onmode('loc');
|
||||
//editor_mode.loc();
|
||||
//tip.whichShow = 1;
|
||||
if(editor.isMobile)editor.showdataarea(false);
|
||||
}
|
||||
|
||||
var chooseInRight = document.getElementById('chooseInRight');
|
||||
|
||||
@ -250,7 +250,7 @@ var onresize = function(e) {
|
||||
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
|
||||
Blockly.svgResize(workspace);
|
||||
};
|
||||
window.addEventListener('resize', onresize, false);
|
||||
if(typeof editor !== "undefined" && !editor.isMobile)window.addEventListener('resize', onresize, false);
|
||||
onresize();
|
||||
//Blockly.svgResize(workspace);
|
||||
|
||||
|
||||
@ -118,13 +118,20 @@ editor_mode = function (editor) {
|
||||
printe(field + ' : 输入的值不合要求,请鼠标放置在注释上查看说明');
|
||||
}
|
||||
}
|
||||
input.ondblclick = function () {
|
||||
var dblclickfunc=function () {
|
||||
if (cobj._type === 'event') editor_blockly.import(guid, {type: cobj._event});
|
||||
if (cobj._type === 'textarea') editor_multi.import(guid, {lint: cobj._lint, string: cobj._string});
|
||||
}
|
||||
// thisTr.onclick = function(){
|
||||
// editor.lastClickId=guid;
|
||||
// }
|
||||
input.ondblclick = dblclickfunc
|
||||
var doubleClickCheck=[0];
|
||||
thisTr.onclick = function(){
|
||||
var newClick = new Date().getTime();
|
||||
var lastClick = doubleClickCheck.shift();
|
||||
doubleClickCheck.push(newClick);
|
||||
if(newClick-lastClick<500){
|
||||
dblclickfunc()
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
return {"HTML": outstr.join(''), "guids": guids, "listen": listen};
|
||||
@ -632,6 +639,7 @@ editor_mode = function (editor) {
|
||||
editModeSelect.onchange = function () {
|
||||
editor_mode.onmode('nextChange');
|
||||
editor_mode.onmode(editModeSelect.value);
|
||||
if(editor.isMobile)editor.showdataarea(false);
|
||||
}
|
||||
|
||||
if (Boolean(callback)) callback();
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<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" style="position: absolute;width: 100%;margin-bottom: 20%;bottom: 0;left: 10px;">
|
||||
<div id="editTip" style="position: absolute; width: 95vw;margin-bottom: 10%;bottom: 0;left: 4vw;">
|
||||
<input type="button" value="新建空白地图" id='newMap'/>
|
||||
<input id='newFileName' placeholder="输入新楼层id" style="width: 120px"/>
|
||||
<input type="checkbox" id='newMapStatus' checked='checked' style='vertical-align: bottom'/>
|
||||
@ -271,6 +271,7 @@
|
||||
<input type="button" value="显示完整名称"/>
|
||||
<input type="button" value="显示完整注释"/>
|
||||
</span>
|
||||
<input type="button" value="前往游戏" onclick="window.location='./index.html'"/>
|
||||
<!-- -->
|
||||
<div id="bgSelect" v-cloak style="display:none">
|
||||
<span>当前地板: </span>
|
||||
@ -453,13 +454,17 @@ var editor_mobile_listen=function(){
|
||||
var right=document.getElementById('right');
|
||||
var mobileeditdata=document.getElementById('mobileeditdata');
|
||||
|
||||
mobileview.children[0].onclick=function(){
|
||||
|
||||
editor.showdataarea=function(callShowMode){
|
||||
mid.style='z-index:-1;opacity: 0;';
|
||||
right.style='z-index:-1;opacity: 0;';
|
||||
mobileeditdata.style='';
|
||||
editor.mode.showMode(editModeSelect.value);
|
||||
if(callShowMode)editor.mode.showMode(editModeSelect.value);
|
||||
editor.hideMidMenu();
|
||||
}
|
||||
mobileview.children[0].onclick=function(){
|
||||
editor.showdataarea(true)
|
||||
}
|
||||
mobileview.children[1].onclick=function(){
|
||||
mid.style='';
|
||||
right.style='z-index:-1;opacity: 0;';
|
||||
@ -498,10 +503,20 @@ var editor_mobile_listen=function(){
|
||||
printf(info[0].children[1].getAttribute('title'))
|
||||
}
|
||||
|
||||
//=====
|
||||
|
||||
document.body.ontouchstart=document.body.onmousedown;
|
||||
document.body.onmousedown=null;
|
||||
|
||||
//=====
|
||||
|
||||
var eui=document.getElementById('eui');
|
||||
eui.ontouchstart=eui.onmousedown
|
||||
eui.onmousedown=null
|
||||
eui.ontouchmove=eui.onmousemove
|
||||
eui.onmousemove=null
|
||||
eui.ontouchend=eui.onmouseup
|
||||
eui.onmouseup=null
|
||||
|
||||
|
||||
var chooseThis = document.getElementById('chooseThis');
|
||||
chooseThis.ontouchstart=chooseThis.onmousedown
|
||||
|
||||
2
main.js
2
main.js
@ -2,7 +2,7 @@ function main() {
|
||||
|
||||
//------------------------ 用户修改内容 ------------------------//
|
||||
|
||||
this.version = "2.3.1"; // 游戏版本号；如果更改了游戏内容建议修改此version以免造成缓存问题。
|
||||
this.version = "2.3.2"; // 游戏版本号；如果更改了游戏内容建议修改此version以免造成缓存问题。
|
||||
|
||||
this.useCompress = false; // 是否使用压缩文件
|
||||
// 当你即将发布你的塔时，请使用“JS代码压缩工具”将所有js代码进行压缩，然后将这里的useCompress改为true。
|
||||
|
||||
@ -26,7 +26,7 @@ data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
|
||||
"firstData" : {
|
||||
"title": "魔塔样板",
|
||||
"name": "template",
|
||||
"version": "Ver 2.3.1",
|
||||
"version": "Ver 2.3.2",
|
||||
"floorId": "sample0",
|
||||
"hero": {
|
||||
"name": "阳光",
|
||||
|
||||
21
更新说明.txt
21
更新说明.txt
@ -1,16 +1,17 @@
|
||||
HTML5魔塔样板V2.3.2
|
||||
|
||||
启动服务的多开版本 √
|
||||
跟随效果 √
|
||||
适配手机端的造塔页面
|
||||
启动服务的多开版本
|
||||
事件：跟随效果
|
||||
怪物数据导出器
|
||||
RM动画导出器也能导出音效 √
|
||||
gif播放可随着分辨率自动放缩 √
|
||||
状态栏可随文字长度自动调整放缩 √
|
||||
也可以用status:exp来代替经验值的写法 √
|
||||
V键也可以打开快捷商店 √
|
||||
破炸在周围只有一个目标时无需转向面对它 √
|
||||
道具效果中，无需再将null改成""才能双击编辑了 √
|
||||
各个已知Bug的修复，部分细节优化 √
|
||||
RM动画导出器也能导出音效
|
||||
gif播放可随着分辨率自动放缩
|
||||
状态栏可随文字长度自动调整放缩
|
||||
也可以用status:exp来代替经验值的写法
|
||||
V键也可以打开快捷商店
|
||||
破炸在周围只有一个目标时无需转向面对它
|
||||
道具效果中，无需再将null改成""才能双击编辑了
|
||||
各个已知Bug的修复，部分细节优化
|
||||
|
||||
-----------------------------------------------------------------------
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user