昨天做了一個不會旋轉的旋轉木馬！
A同學看到了表示有趣，在洗澡之後，
跟我說：「旋轉木馬的這個主題很不錯！」
輕鬆的用一刻鐘的時間寫出了旋轉的木馬！
不得不承認挫折感很大！

我昨天卡在讓它轉起來，最後只能呈現一個不會轉的半殘品。
拖著不甘而疲累的身軀回到家中，
還看到老婆居然被A同學玩轉與股掌之間！
實在是不可忍！

今天就來模仿他的code，做出一個屬於自己的國民老婆！
首先拿出昨天的專案！然後複製一份，讓我記得今天的恥辱。
接著，將那些海賊王名場景全部刪掉！
在國民老婆面前！什麼D的意志都會被瓦解殆盡的。
最後記得把title的Merry-go-round的Merry一腳踢開，
換成tzuyu-go-round。

html架構和昨天一樣，css也不用改。
我們今天只要轉老婆！

畫面效果
完整程式碼

點開index.js
惡狠狠的把昨天的code刪除殆盡！

先宣告變數：

const stage = document.querySelector('.stage');
const pole = document.querySelector('.pole');
let oriSwitch = false;
let poleDegree = 0;
const varDegree = 3;

首先我們要先知道自己要幹嘛！
轉老婆！！
沒錯！
滑鼠按下去、移動的時侯，才會轉；放開滑鼠按鈕就不會。
這就像一個開關。

所以我們這樣宣告變數，

let oriSwitch = false;

預設是false，正常的情況下，老婆是不會不聽我們使喚的，
接著我們有poleDegree原始的角度和varDegree角度變動量。

function rotatePole(e){
    if (oriSwitch) {
        (e.movementX > 0) ? poleDegree += varDegree : poleDegree -= varDegree;
        pole.style.transform = `rotateY(${poleDegree}deg)`;
    }
}

我們有一個function，要來rotatePole，
其中，(e)這個e是event的縮寫，
接下來我們要先來判斷剛剛說的：滑鼠是否有點下去，
如何導入true或false呢？

window.addEventListener('mousedown', function(){
    return oriSwitch = true;
});
window.addEventListener('mouseup', function (){
    return oriSwitch = false;
});

使用在視窗內監聽！滑鼠是否有被點擊
如果有的話
會回傳一個值，讓oriSwitch = true；
點下去放開後
會回傳一個值，讓oriSwitch = false；

不過在ES6有更快的寫法

window.addEventListener('mousedown', () => oriSwitch = true);
window.addEventListener('mouseup', () => oriSwitch = false);

這樣可以讓寫code更簡潔。

這個叫做箭號函式，可以讓指定匿名函式更簡略。
箭號左邊的值，可能以括號括住，指定傳遞給函式的引數。
-函式的單一引數不需要括號。
-如果不會傳入引數，則需要括號。
箭號右邊的函式定義可以是運算式，例如 v + 1，或以大括號 ({}) 括住的陳述式區塊。

來源

我們做好這個開關後，
接下來就是判斷滑鼠移動的方向了。
因為是左右拉，所以要判斷x的移動。

(e.movementX > 0) ? poleDegree += varDegree : poleDegree -= varDegree;
pole.style.transform = `rotateY(${poleDegree}deg)`;

(true or false)？...(1)...:...(2)....
如果是true，傳回(1)的結果；否則就傳回(2)的結果。

因此如果是往右滑，poleDegree就會增加3；
如果是往左滑，poleDegree就會減少3；
最後將值傳回去transform。

其中這邊我嘗試用組字串寫過，然後一直撞牆。
rotateY(${poleDegree}deg)
是ES6的新語法，叫做**template strings**
允許你將**template literals**用${ }的方式放進字串內，
不需要再用組字串的一堆加號做連結。

其中！要注意的是兩端要用``（反引號）框起來，
我用了''框，一直錯誤，兩個長得很像啊，我花了不少時間才找到！

最後我們要寫

pole.addEventListener('mousemove', rotatePole);

當監聽到滑鼠在.pole上移動會執行rotatePole。
這樣就完成了！

在index.js裡面，有註解掉的部分，
那個是A同學寫的，我選擇先不採用。

這些東西跟我昨天算的rotateY(40deg)、translate(350px)是一樣的，
但是他的方法比較高明！
照片數量往上加會自己算出旋轉角度跟往前的距離出來給他，
比我當初的想法還要好。
可是我想記錄學習歷程所以保留自己的東西，並把玩轉老婆的人寫的code註解掉！