手机端缩略图模糊 & terrains模糊 & 更新文档

README.md

@@ -9,6 +9,8 @@ HTML5 canvas制作的魔塔样板，支持全平台游戏！
 * [Demo / 样板效果](https://ckcz123.com/games/template/)
 * [Docs / 使用文档说明](https://ckcz123.github.io/mota-js/)
 * [Video / 视频教程](https://www.bilibili.com/video/av32781473/)
+* [Video / 新版视频教程](https://www.bilibili.com/video/BV1SB4y1p7bg?share_source=copy_web)
+* [Video / 脚本教程](https://www.bilibili.com/video/BV1uL411J7yZ?share_source=copy_web)
 
 ![样板](./docs/sample0.png)
 
@@ -65,6 +67,34 @@ HTML5 canvas制作的魔塔样板，支持全平台游戏！
 
 ## 更新说明
 
+### 2022.7.10 HTML5魔塔样板V2.9.1
+
+* [x] 修复更新状态栏延迟到下一动画帧引发的一系列bug，修改为增加一个是否立即更新的参数
+* [x] 修复resize导致canvas被清空的bug
+* [x] 修复怪物属性栏光环叠加的说明bug
+* [x] 修复自2.7.3增加薄墙以来导致的terrains模糊
+* [x] 修复手机端绘制缩略图的模糊问题
+* [x] 更新部分文档
+
+### 2022.2.2 HTML5魔塔样板V2.9
+
+* [x] 修复浏览地图使用楼传可无视楼梯边的bug
+* [x] 修复utils.js里面的语法bug
+* [x] 修复设置前景层背景层的图块后立刻刷新地图导致图块重新出现的bug
+* [x] 修复商店长按与keyUp冲突的bug
+* [x] 修复图片缩放以后缩放浏览器导致图片大小还原的bug
+* [x] 修复缩略图不高清的bug
+* [x] 修复大怪物的boxAnimate的bug
+* [x] 优化updateStatusBar的性能
+* [x] \i支持enemy48和npc48
+* [x] 启动服务加入魔塔小课堂
+* [x] 分离怪物属性，将value分离成zone laser repulse等
+* [x] 复写可以新增参数
+* [x] 杀掉main.log
+* [x] 完善runtime.d.ts，建议使用vscode进行编辑脚本
+* [x] 自动缩放最大化
+* [x] 缩放最高支持2.5倍缩放
+
 ### 2021.9.1 HTML5魔塔样板V2.8.2
 
 * [x] 在游戏中，可以在大地图长按后拖动预览。（超大地图福音！）

_docs/index.md

@@ -17,7 +17,8 @@ ckcz123）特意制作了这样一部HTML5魔塔样板。
 
 继续查看文档的详细介绍，让你学会如何使用这一个样板来制作属于自己的HTML5魔塔，或者……任何非即时的网格地图游戏。
 
-本说明文档配有较为过时的B站视频教程，可供参考：[https://www.bilibili.com/video/av32781473/](https://www.bilibili.com/video/av32781473/)。
+* [新版视频教程](https://www.bilibili.com/video/BV1SB4y1p7bg?share_source=copy_web)
+* [脚本教程](https://www.bilibili.com/video/BV1uL411J7yZ?share_source=copy_web)
 
 ==========================================================================================
 

_docs/script.md

@@ -4,7 +4,7 @@
 
 在V2.6版本中，基本对整个项目代码进行了重写，更加方便造塔者的使用。
 
-可配合基础js教学视频 https://www.bilibili.com/video/BV1uL411J7yZ/ 使用。
+* [脚本教程视频](https://www.bilibili.com/video/BV1uL411J7yZ?share_source=copy_web)
 
 ## 控制台的使用
 

_docs/start.md

@@ -2,6 +2,9 @@
 
 ?> 在这一节中，将详细介绍做一部塔的流程。现在，让我们来做一部单层塔！
 
+* [新版视频教程](https://www.bilibili.com/video/BV1SB4y1p7bg?share_source=copy_web)
+* [脚本教程](https://www.bilibili.com/video/BV1uL411J7yZ?share_source=copy_web)
+
 ## 前置需求
 你需要满足如下条件才能进行制作：[样板下载地址](https://github.com/ckcz123/mota-js/releases)。
 1.  操作系统：

_server/CodeMirror/defs.js

@@ -3393,7 +3393,7 @@ var terndefs_f6783a0a_522d_417e_8407_94c67b692e50 = [
         "!doc": "负责一切UI界面的绘制。主要包括三个部分：<br/>- 设置某个画布的属性与在某个画布上绘制的相关API<br/>- 具体的某个UI界面的绘制<br/>- 动态创建画布相关的API",
         "resizeCanvas": {
           "!doc": "重新设置一个自定义画布的大小",
-          "!type": "fn(name: string, x: number, y: number)"
+          "!type": "fn(name: string, x?: number, y?: number, styleOnly?: bool, isTempCanvas?: bool)"
         },
         "deleteCanvas": {
           "!doc": "删除一个自定义画布<br/>name: 画布名，也可以传入一个函数对所有画布进行筛选",

libs/control.js

@@ -3284,7 +3284,7 @@ control.prototype.resize = function () {
     else {
         // 竖屏
         core.domStyle.isVertical = true;
-        core.domStyle.scale = Math.min(1, (clientWidth - 2 * BORDER) / CANVAS_WIDTH);
+        core.domStyle.scale = Math.min((clientWidth - 2 * BORDER) / CANVAS_WIDTH);
         core.domStyle.availableScale = [];
         extendToolbar = false;
     }

libs/maps.js

@@ -38,10 +38,11 @@ maps.prototype._resetFloorImages = function () {
     }
 }
 
-maps.prototype._setHDCanvasSize = function (ctx, width, height) {
+maps.prototype._setHDCanvasSize = function (ctx, width, height, isTempCanvas) {
     ctx.setTransform(1, 0, 0, 1, 0, 0);
     var ratio = core.domStyle.ratio;
     if (ctx === core.bigmap.tempCanvas) ratio = core.domStyle.scale;
+    if (isTempCanvas) ratio = core.domStyle.ratio;
     if (width != null) ctx.canvas.width = width * ratio;
     if (height != null) ctx.canvas.height = height * ratio;
     ctx.scale(ratio, ratio);
@@ -1736,7 +1737,7 @@ maps.prototype._drawThumbnail_drawTempCanvas = function (floorId, blocks, option
         if (options.noHD) {
             tempCanvas.canvas.width = width * 32 * scale;
             tempCanvas.canvas.height = height * 32 * scale;
-        } else core.resizeCanvas(tempCanvas, width * 32 * scale, height * 32 * scale);
+        } else core.resizeCanvas(tempCanvas, width * 32 * scale, height * 32 * scale, false, true);
         tempCanvas.scale(scale, scale);
     } else if (width * height > core.bigmap.threshold) {
         options.v2 = true;
@@ -1749,13 +1750,13 @@ maps.prototype._drawThumbnail_drawTempCanvas = function (floorId, blocks, option
         if (centerY == null) centerY = Math.floor(height / 2);
         var offsetX = core.clamp(centerX - core.__HALF_SIZE__, 0, width - core.__SIZE__),
             offsetY = core.clamp(centerY - core.__HALF_SIZE__, 0, height - core.__SIZE__);
-        tempCanvas.translate(-32 * offsetX, -32 * offsetY);
+        tempCanvas.translate(-32 * offsetX, -32 * offsetY, false, true);
     } else {
         options.v2 = false;
         if (options.noHD) {
             tempCanvas.canvas.width = width * 32;
             tempCanvas.canvas.height = height * 32;
-        } else core.resizeCanvas(tempCanvas, width * 32, height * 32);
+        } else core.resizeCanvas(tempCanvas, width * 32, height * 32, false, true);
     }
     options.ctx = tempCanvas;
 

libs/ui.js

@@ -3454,15 +3454,15 @@ ui.prototype.rotateCanvas = function (name, angle, centerX, centerY) {
 }
 
 ////// canvas重置 //////
-ui.prototype.resizeCanvas = function (name, width, height, styleOnly) {
+ui.prototype.resizeCanvas = function (name, width, height, styleOnly, isTempCanvas) {
     var ctx = core.getContextByName(name);
     if (!ctx) return null;
     if (width != null) {
-        if (!styleOnly) core.maps._setHDCanvasSize(ctx, width, null);
+        if (!styleOnly) core.maps._setHDCanvasSize(ctx, width, null, isTempCanvas);
         ctx.canvas.style.width = width * core.domStyle.scale + 'px';
     }
     if (height != null) {
-        if (!styleOnly) core.maps._setHDCanvasSize(ctx, null, height);
+        if (!styleOnly) core.maps._setHDCanvasSize(ctx, null, height, isTempCanvas);
         ctx.canvas.style.height = height * core.domStyle.scale + 'px';
     }
     return ctx;

runtime.d.ts

@@ -2238,8 +2238,12 @@ declare class ui {
     /** 重新定位一个自定义画布 */
     relocateCanvas(name: string, x: number, y: number, useDelta: boolean): void
 
-    /** 重新设置一个自定义画布的大小 */
+    /** 
-    resizeCanvas(name: string, x: number, y: number): void
+     * 重新设置一个自定义画布的大小
+     * @param styleOnly 是否只修改style，而不修改元素上的长宽，如果是true，会出现模糊现象
+     * @param isTempCanvas 是否是临时画布，如果填true，会将临时画布修改为高清画布
+     */
+    resizeCanvas(name: string, x?: number, y?: number, styleOnly?: boolean, isTempCanvas?: boolean): void
 
     /** 设置一个自定义画布的旋转角度 */
     rotateCanvas(name: string, angle: number, centerX?: number, centerY?: number): void