2018-12-14 JavaScript實現ZLOGO: 前進方向和速度

系列前文:

• JavaScript實現ZLOGO子集: 前進+轉向
• JavaScript實現ZLOGO子集: 單層迴圈功能
• JavaScript實現ZLOGO子集: 測試用例
• JavaScript實現ZLOGO: 用語法樹實現多層迴圈

功能上, 添加了螞蟻圖標顯示當前前進方向, 並可通過修改源碼實現行進速度. 並未對語言本身進行改進. 另有一點界面改進. 源碼仍在: program-in-chinese/quan3

線上演示仍在: 圈3

演示

預設2倍行進速度(相比之前)畫田字格:

8倍行進速度畫"輪胎" (LOGO源碼鏈接):

部分相關源碼

下麵是為添加螞蟻和定製速度作的主要修改:

+  if (!指示方向圖) {
+    指示方向圖 = createImg("圖標/螞蟻頭向上.png")
+    指示方向圖.size(36, 34);
+  }
+
   // TODO: 提取到二階函數
   繪製 = function() {
     var 當前序號 = 序號;
+    const 速度 = 2;
     background(255, 255, 255);
 
     for (var i = 0; i < 路徑表.length; i++ ) {
@@ -33,16 +41,20 @@ const 生成指令序列 = require("./語法樹處理").生成指令序列
       var 起點 = 段.起點;
       var 終點 = 段.終點;
       var 距離 = 段.長度;
-      if (當前序號 < 距離) {
-        line(起點.x, 起點.y, 起點.x + (終點.x - 起點.x) * 當前序號 / 距離, 起點.y + (終點.y - 起點.y) * 當前序號 / 距離);
+      if (當前序號 < 距離 / 速度) {
+        var 當前x = 起點.x + (終點.x - 起點.x) * 當前序號 * 速度 / 距離;
+        var 當前y = 起點.y + (終點.y - 起點.y) * 當前序號 * 速度 / 距離;
+        指示方向圖.position(當前x + 238, 當前y - 8); // TODO: 需要對準線頭
+        指示方向圖.style("transform", "rotate(" + (90 - 段.前進角度) + "deg)")
+        line(起點.x, 起點.y, 當前x, 當前y);
         break;
       } else {
         line(起點.x, 起點.y, 終點.x, 終點.y);
-        當前序號 = 當前序號 - 段.長度;
+        當前序號 = 當前序號 - 段.長度 / 速度;
       }
     }
     
-    序號 ++;
+    序號 += 速度;
   }

可能改進

1. 螞蟻圖標在火狐下沒有對準走線, 應該是上面TODO的問題
2. 改進螞蟻圖標, 需在開始時就顯示
3. 可在界面直接修改行進速度, 隱藏螞蟻
4. 部分p5js API繼續漢化, 如line, background