給予寬度，算出圖片等比例高度

Here’s a simple JavaScript example to calculate the proportional height of an image when you set a fixed width:

function calculateProportionalHeight(originalWidth, originalHeight, newWidth) {
  const newHeight = (originalHeight * newWidth) / originalWidth;
  return newHeight;
}

// Example usage:
const originalWidth = 800;
const originalHeight = 600;
const newWidth = 400;

const newHeight = calculateProportionalHeight(originalWidth, originalHeight, newWidth);
console.log(`The proportional height for the new width is: ${newHeight}px`);

Explanation

  • The calculateProportionalHeight function takes the original width, original height, and the new width as arguments.
  • It calculates the new height using the formula we discussed and returns it.

In this example, if the original dimensions are 800×600, and you set a new width of 400, the function will calculate the new height that maintains the image’s aspect ratio.

https://chatgpt.com/share/6708fb61-3764-8001-b612-cc70253e169e

等比例縮放的圖

The goal is to make the sprite fit the width of the screen while keeping its proportions (aspect ratio) the same. To do this, we use the formula:

this.scale.x = this.app.screen.width / this.texture.width;

and

this.scale.y = this.scale.x;

What Does the Formula Mean?

Let’s break down the formula into simpler parts:

  1. this.app.screen.width: This is the width of your app’s screen (the space in which your sprite should fit).
  2. this.texture.width: This is the original width of your sprite’s image.

When you divide this.app.screen.width by this.texture.width, you are calculating how much bigger or smaller the sprite should be to fit the screen.

Mathematical Principle

The principle behind this is called proportional scaling. The idea is that if you want to change the size of an object while keeping its shape the same, you need to multiply both the width and height by the same number.

Example in Simple Terms

Imagine you have a picture that is 200 pixels wide and your screen is 800 pixels wide. To make the picture fit the screen:

  • You need to make the picture 4 times larger because 800 / 200 = 4.

That means the scale factor is 4, so you set:

this.scale.x = 4;
this.scale.y = 4;

This makes both the width and the height of the picture 4 times bigger, keeping its original shape.

Why Use this.scale.x and this.scale.y?

Using this.scale.x and this.scale.y ensures that your sprite grows or shrinks evenly in all directions, so it doesn’t look stretched or squished.

Here’s a step-by-step summary of what happens:

  1. Calculate the scale factor: this.app.screen.width / this.texture.width
  • This tells you how much to multiply the width by to make it fit.
  1. Apply the scale factor to both dimensions:
  • Set this.scale.x to this value so the width fits the screen.
  • Set this.scale.y to the same value to maintain the aspect ratio.

Real-Life Analogy

Think of a photo that you want to print in a larger size. If you want to make the photo twice as wide, you also need to make it twice as tall to keep it looking right. If you don’t do this, the picture might end up looking stretched or distorted.

I hope this breakdown helps you understand the math and logic behind scaling in PixiJS! If you have any more questions, feel free to ask! 😊

JS Quiz

Question: What is the result of 10,2; in JavaScript?

When you write 10,2; in JavaScript, this is using the comma operator. The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand.

So, in this case:

  • 10 is evaluated first but discarded.
  • 2 is then evaluated and returned as the result.

Therefore, the result of 10, 2 in JavaScript is 2.

重構書閱讀心得

正在看重構的書，寫一下條例重點…（本文持續更新）

  1. 面對很混亂不好加功能的程式，首先先改成好加功能，後來再加功能
  2. 如果程式不需要維護了，就放著不管它
  3. 重構前需要先有測試
  4. 重構一小段程式就跑測試，才不會到時候有問題不知道要改哪裡。
  5. 把一個大的switch case抽出來獨立成一個function，叫Extract Function(106)

debug in app browser

https://www.browserstack.com
這實在太貴了，還是年繳的，買不下去

只好繼續查要怎麼debug
後來發現safari debug功能要開，然後要裝Xcode來模擬，也要裝這個git repo，這下面這個

點第二個比較新，支援新的Xcode

後來發現用這程式，判斷是fb瀏覽器的話就出現，也可以看出問題在哪裡，不過可能也是因為我有用Xcode來看才比較清楚。