我們可以在 JavaScript 的自定義 function 中使用預定義的 function 嗎？

Question

 //making custom function for a fish
 drawFish=function  (centerX,centerY){
 //using draw function for animation
 draw=function(){
 var bodyLength = 115;
 var bodyHeight = 74;
 var bodyColor = color(162, 0, 255);

 noStroke();

 fill(bodyColor);

  // body
 ellipse(centerX, centerY, bodyLength, bodyHeight);

 // tail

 var tailWidth = bodyLength/4;

 var tailHeight = bodyHeight/2;

 triangle(centerX-bodyLength/2, centerY,

 centerX-bodyLength/2-tailWidth, centerY-tailHeight,

 centerX-bodyLength/2-tailWidth, centerY+tailHeight);

 // eye

 fill(33, 33, 33);

 ellipse(centerX+bodyLength/4, centerY, bodyHeight/5, bodyHeight/5);

 centerX++;

 };


 };     
 //calling custom function
 drawFish(146,208);
 drawFish(207,212);
 drawFish(305,306);
 drawFish(114,309);
 drawFish(300,100);

我正在嘗試在水平移動的坦克中制作一個簡單的 animation 5 條魚。 我為一條魚編寫了代碼，然后我將其定制為 function，這樣我就可以隨意調用它多次。 然后我為 animation 放置draw =function(){}來移動魚。 這段代碼一直有效，直到我將draw() function 放入其中，否則只剩下一條魚，其他魚消失。 我們如何使用繪圖 function 在此自定義 function 中制作 animation 以便它適用於每條魚。

Answer 1

您可以嘗試使用運算符new 。 我不完全確定它是否會按照您的編碼方式工作，但您可以執行以下操作：

 function drawFish(centerX, centerY) { this.centerX = centerX; this.centerY = centerY; // draw your fish here using centerX and centerY as it's X and Y } var fish = new drawFish(0,0); var fish1 = new drawFish(50,50); function Loop() { fish.centerX++; fish.centerY++; fish1.centerX++; fish1.centerY++; console.log('Fish position:', fish.centerX, fish.centerY) console.log('Fish1 position:',fish1.centerX, fish1.centerY); } setInterval(Loop, 500)