前言

前面的章節已經封裝了一個NES的虛擬按鈕，這個章節來封裝他的方向鍵。

在一些NES網頁網頁模擬器中，方向鍵要麼使用按鈕模式，要麼使用搖桿模式，各有不足。例如按鈕模式無法滑動，使用者點了半天才知道點空了。而且無法很難做出 '左上' '右上' 這種操作。而用搖桿模式的不多，依舊沒有8鍵模式，而且小問題也不少。而git上面的開源專案基本上沒有註釋，新手用起來不順手。這個章節旨在封裝一個 "我自認為好用的搖桿"。

他有以下幾個特點：

(1)能點選，能滑動

(2)支援8鍵模式

(3)傻瓜式配置，使用者只需提供容器標識，按鍵碼，相關回調即可

(4)文件詳細

1.nipplejs探祕

nippleJS 是一個 JavaScript 庫，用來建立虛擬搖桿觸控功能的介面。

程式碼以及心得：

<script src="./js/nipplejs.min.js"></script>
<script>
    //1.傳入容器並將模式設為static後，外掛會為容器插入一個元素nipple_x_x，這個元素，這個元素寬高為0，使用絕對定位（方便使用者定位到正中心），預設在容器的左上角
    //2.nipple_x_x這個元素有2個子元素，分別是back和front，使用絕對定位，水平垂直居中，白色背景。但是它的父元素nipple_x_x寬高為0，導致它們的中心點預設在使用者容器的左上角
    //3.back就是搖桿的背景容器，寬高預設100*100，搖桿能滑動多遠取決於它
    //4.front是搖桿指示器，寬高預設50*50
    //5.為了能將搖桿置於使用者容器的中心，必須為搖桿容器nipple_x_x元素設定新的樣式，讓他在使用者容器中水平垂直居中。
    //6.為了完成5的目的，將使用者容器設為相對定位，並在傳入的opt中為搖桿容器設定定位資訊
    var opts = {
        zone:document.querySelector('#user_direction_box'), //使用者設定的容器
        mode: 'static',//模式，static就是搖桿中心固定
        position:{left:'50%',top:'50%'},//讓搖桿容器定位到使用者設定容器的正中心
        color:"red",//搖桿的顏色 包括back和front 預設白色，通過背景色實現
        size:200,//搖桿容器back元素的大小，front是他的一半
    }
    var manager = nipplejs.create(opts)

    //7.搖桿例項提供三個事件回撥，分別是start/move/end
    manager.on('start',function(evt, data){
        console.log('當前事件為start 觸發時間為 ' + new Date().getTime())
        //console.log(evt)
        //console.log(data)
        //data.position屬性是搖桿容器中心點相對於螢幕的位置資訊，在static模式下，該值是固定的
        //frontPosition屬性是當前觸點相對於搖桿中心點的位置資訊,最大距離就是back容器的大小
        //start事件每次點選只執行一次
        //從列印的data資訊來看，此事件無法得知使用者點選時相對於搖桿中心點的具體方向
    })
    manager.on('move',function(evt, data){
        //當用戶點選搖桿時，雖未發生滑動，但也會觸發當前事件 比start事件晚了2-4ms
        console.log('當前事件為move 觸發時間為 ' + new Date().getTime())
        //console.log(evt)
        console.log(data.distance)
        console.log(data.direction)
        //data.angle記錄了當前觸點方向於水平向右方向之間的角度資訊，以逆時針方向增大。radian表示弧度，degree表示角度。右=0 上=90 左=180 下=270
        //如果想要8個方向的方向鍵，可以在此封裝
        //data.distance屬性記錄了當前事件發生時搖桿的滑動距離 最大值為為back容器的大小
        //data.direction屬性記錄了當前搖桿操作的方向資訊 {x: "right", y: "down", angle: "down"} 其中angle為主方向，只能是4個方向
        //如果data.distance過小，將不會有direction屬性，應該是有一個臨界值(估計是搖桿容器back的5%)，超過這個值才算 ‘點選了方向鍵’,反過來說，沒有direction屬性的話此次操作無效
        //data.position屬性記錄當前搖桿位置相對於螢幕的位置資訊（搖桿的滑動幅度要小於等於手勢滑動幅度。因為搖桿被限制在back容器中）
        //data.force記錄了觸點距離搖桿中心絕對距離的資訊 以back容器的大小為1個單位
        //搖桿在滑動過程中，這個事件還會持續觸發
    })
    //這個事件肯定是手指釋放才觸發
    manager.on('end',function(evt, data){
        //使用者手速再快，相比start事件，此事件再快也需要50ms後才能觸發
        console.log('當前事件為end 觸發時間為 ' + new Date().getTime())
        //console.log(evt)
        //console.log(data.position)
        //frontPosition屬性是當前觸點相對於搖桿中心點的位置資訊,最大距離就是back容器的大小
        //data.position屬性是搖桿容器中心點相對於螢幕的位置資訊，在static模式下，該值是固定的
    })

    //鑑於start事件無法獲取方向資訊，建議使用move事件來監聽使用者點選
    //根據使用者傳入的配置資訊決定4鍵還是8鍵模式
    //如果需要的是4鍵方向，則直接使用move事件的data.angle屬性
    //如果需要的是8鍵方向，則需要對move事件中data.angle.degree的角度值進行判定，輸出最終的方向

    //如果滑動過程中方向發生改變，則需要取消相應的按鍵操作，所以要對上一次方向進行記錄，才能與最新的方向進行比較，比較完更新這個資訊，當手勢釋放時重新設為null
    //按鍵方向可以是數量可能是1，也可能是2 可以將其對應的keyCode放入陣列遍歷
    //遊戲模擬器需要的是一個掛在keyCode屬性的物件，所以封裝一個方法專門對keycode進行包裝處理
</script>