20141013 今日學習

最近在讀「死過一次才學會愛」這本書，一直想到要跟Cindy說這件事，昨晚半夜三點終於跟她說了，她也把作者演講的影片分享給我，在此做個備份

另外，學校裡社會企業的講座開始了從10/8~12/17每周三晚上六點到九點，產學大樓二樓培訓室，上週沒注意到錯過了，這週是個好的開始 ^_^

一點想法紀錄

我需要在threex.minecraftcharbodyanim.js裡寫一個大幅度轉身的動作，armR, armL這些都來自於threex.minecraft.js，查看了一下後發現裡面有定義 model.body，所以我可以在threex.minecraftcharbodyanim.js這邊定義旋轉身體的動作

在threex.minecraftcharbodyanim.js裡設定'right punch' animation，threex.minecraftcharbodyanim.js下面的code都只有設定四肢的擺動，沒有設定身體的擺動，所以我應該要定義身體的擺動

開始測試，在threex.minecraftcharbodyanim.js裡的onUpdate、onCapture、propTweens去定義身體的旋轉

需嘗試做出：向前跑→身體往右擺→揮拳的動作

透過animation.html觀察threex.minecraftcharbodyanim.js裡的'run' animation

• 「右手前擺、左手後擺、左腳前擺、右腳後擺」反覆循環

觀察中發現"右手前擺、左手後擺、左腳前擺、右腳後擺" 這些動作是同時開始，回頭看我在上面提的

已經在threex.minecraftcharbodyanim.js裡加入身體與手於Y軸旋轉的code，現在目標在player.html裡的操作(palyer.html把大部分的code都寫在threex.minecraftplayer.js裡面)，多一個鍵盤按鈕，來做出身體右擺揮拳的動作。

接下來我必須在threex.MinecraftControls.js裡加入鍵盤控制的按鍵來讓我按一個鈕即可測試動畫效果。

threex.minecraftcontrols.js裡的code讓我們可以按鍵盤控制player，做出左旋、右璇，左右平行移動、前進後退的動作。

按哪鍵來決定做什麼動作，定義在player.html裡。

我需要向前移動的code，所以把threex.minecraftcontrols.js裡前進的code複製下來 (如下)

// up/down  //向前向後的效果，z軸

var distance = 0;

if( input.up ) distance = +this.speed * delta;  //向前

if( input.down ) distance = -this.speed * delta;  //向後

if( distance ){

var velocity = new THREE.Vector3(0, 0, distance);

var matrix = new THREE.Matrix4().makeRotationY(object3d.rotation.y);

velocity.applyMatrix4( matrix );

object3d.position.add(velocity);

程式碼解析

觀看player.html時，看到按鈕的code看到下面這行

• if( event.keyCode === 'W'.charCodeAt(0) ) input.up = true

恩.....很好，keyCode與charCodeAt()是什麼?

charCodeAt()

• JavaScript String charCodeAt() Method
• The charCodeAt() method returns the Unicode of the character at the specified index in a string.
• The index of the first character is 0, the second character 1, and so on.

keyCode

• 找到一個KeyCode查詢表：Key Codes
• KeyCode查詢網站：Javascript Char Codes (Key Codes) - Cambia Research

在player.html裡看到下面keydown與keyup如下面所示

• document.body.addEventListener('keydown', function(event){})

估狗到下面這網頁，請搜尋：Key events

• Handling Events :: Eloquent JavaScript
• When a key on the keyboard is pressed, your browser fires a "keydown" event. When it is released, a "keyup" event is fired.       (下一行開始為2014/10/14更新)
• 測試了這教學的按"V"就可以讓頁面變紫色 (V的KeyCode為86)，對鍵盤操作的理解是必須"keydown"(押下按鍵，pressed )與"keyup"(鬆開按鍵，released)成對都要寫 
• When a key is pressed and held, the event is fired again every time the key repeats.
• 有趣了，這教學寫的判斷是用'=='，而我手邊的player.html是用'==='嚴格等於，這樣又有什麼差別

取自比較運算子 - JavaScript | MDN

• 等於 (==)，運算元相等時，返回 true。
• 嚴格的等於 (===)，運算元相等且類型相同時，返回 true。
• 字串是以 Unicode 的值作為標準的字典順序來比較。

看到這篇覺得寫得真好What is difference between == and === in javascript? - Stack Overflow

• "1" == 1 // true
• "1" === 1 // false
• Please use === everywhere. There's no need to use ==. checking for types is always better.

這篇文章推薦了一個學JavaScript的網站

• JavaScript Garden

在player.html裡看到一段

• if( event.keyCode === 37 && !event.shiftKey ) input.left = true

也可以從上面的Handling Events :: Eloquent JavaScript讀到相關的

• Modifier keys such as Shift, Control, Alt, and Meta (Command on Mac) generate key events just like normal keys. But when looking for key combinations, you can also find out whether these keys are held down by looking at the shiftKey, ctrlKey, altKey, and metaKey properties of keyboard and mouse events.

以後要思考，如何打鍵盤敲解開題目的答案數字進去，剛好這篇也有提到

• The "keydown" and "keyup" events give you information about the physical key that is being pressed. But what if you are interested in the actual text being typed? Getting that text from key codes is awkward.
• Instead, there exists another event, "keypress", which is fired right after "keydown" (and repeated along with "keydown" when the key is held) but only for keys that produce character input. 

這教學真的太正了，而且把整本書的Open Source出來，是一個不錯的教材

• Eloquent JavaScript

明日開始

在player.html裡，加入控制鍵'U'，啟動'right punch'