在瀏覽器上實現自動引導（五）

時間 2019-12-11

標籤瀏覽器實現自動引導欄目瀏覽器简体版

原文原文鏈接

在遊戲開發中新手引導的設計、代碼編寫、測試須要花費較多的時間和精力，特別是測試驗證，在反反覆覆的引導流程中點來點去，會讓人有一種要崩潰的感受。所以在想可否實現讓計算機根據咱們的新手引導配置，自動去跑咱們的引導呢？javascript

答案是確定的,請看下在的演示：java

手工執行引導，注意鼠標指針的移動。node

自動執行引導，注意鼠標指針沒有移動。canvas

在sz.Guide中開始自動引導瀏覽器

只須要在你的引導配置中加入開啓開關dom

 
        guideConfig = { 
       
        tasks:{...},                         
        //引導任務 
       
        fingerImage: 
        'res/finger.png' 
        ,        
        //手型圖片 
       
        isShowMask:  
        false 
        ,                   
        //是否開啓遮罩 
       
        isAutoGuide:  
        true                    
        //是否自動引導 
       
        }

isAutoGuide: true 便可打開自動引導，很是的簡單。你能夠在你的遊戲過種中隨時開啓和關閉，對於測試很是有用。ide

自動引導的實現函數

目前sz.Guide只實現了在瀏覽器上的自動引導功能，實現的思路就是根據引導配置中的節點名字，在遊戲渲染中定位節點，並模擬鼠標動做，觸發節點控件的事件來完成的。學習

瀏覽器中模擬鼠標事件測試

使用javascript在瀏覽器上模擬鼠標事件是很是方便的，可使用initMouseEvent函數來完成：

 
        initMouseEvent( 
       
        type,    
        //string類型 ：要觸發的事件類型，例如‘click'。  
       
        　　bubbles, 
        // Boolean類型：表示事件是否應該冒泡，針對鼠標事件模擬，該值應該被設置爲true。  
       
        　　cancelable, 
        // bool類型：表示該事件是否可以被取消，針對鼠標事件模擬，該值應該被設置爲true。 
       
        　　view, 
        // 抽象視圖：事件授予的視圖，這個值幾乎全是document.defaultView.  
       
        　　detail, 
        // int類型：附加的事件信息這個初始化時通常應該默認爲0。  
       
        　　screenX, 
        // int類型 ： 事件距離屏幕左邊的X座標  
       
        　　screenY, 
        // int類型 ： 事件距離屏幕上邊的y座標  
       
        　　clientX, 
        // int類型 ： 事件距離可視區域左邊的X座標  
       
        　　clientY, 
        // int類型 ： 事件距離可視區域上邊的y座標  
       
        　　ctrlKey, 
        // Boolean類型 ： 表明ctrol鍵是否被按下，默認爲false。  
       
        　　altKey, 
        // Boolean類型 ： 表明alt鍵是否被按下，默認爲false。  
       
        　　shiftKey, 
        // Boolean類型 ： 表明shif鍵是否被按下，默認爲false。  
       
        　　metaKey, 
        // Boolean類型： 表明meta key 是否被按下，默認是false。  
       
        　　button, 
        // int類型： 表示被按下的鼠標鍵，默認是零.  
       
        　　relatedTarget 
        // (object) ： 事件的關聯對象.只有在模擬mouseover 和 mouseout時用到。 
       
        　　)

initMouseEvent函數很是之多，但對與咱們這裏來講只須要模擬touchBegan和touchEnded，對應的鼠標事件類型爲mousedown和mouseup，咱們還須要關心的就是想要點擊的控件的位置x和y。僅須要這些參數就能完成咱們的任務了。

生成了鼠標事件，還須要將事件分派到document的節點中， cocos2d-js默認的canvas節點名爲gameCanvas，咱們須要將事件投遞給它。

 
        //獲取gameCanvas 
       
        var pt = ... 
        //經過座標轉換計算位置  
       
        var canvas = document.getElementById( 
        "gameCanvas" 
        ); 
       
        //初始化鼠標事件 
       
        var mousedown = document.createEvent( 
        "MouseEvent" 
        ); 
       
        mousedown.initMouseEvent( 
        "mousedown" 
        ,  
        true 
        ,  
        true 
        , window, 0, 0, 0, pt.x, pt.y,  
        true 
        ,  
        false 
        ,  
        false 
        ,  
        false 
        , 0, null); 
       
        //將鼠標事件分派到canvas中 
       
        canvas.dispatchEvent(mousedown);

座標系統

使用過cococs2d的都知道座標原點爲左下角(x=0,y=0), 而在dom元素中座標原點爲左上角(x=0, y= 0)，關於cocos2d座標系的學習請參見關東昇老師的文章《Cocos2d-JS 座標系》。

節點座標

咱們經過引導定位器，得到到了節點對象，經過node.getPosition()函數獲取節點所在父節點中的相對位置。

世界座標

手型精靈在引導層上，引導層爲整個屏幕大小。要讓手型精靈正確指向定位到的節點，還須要將節點座標轉換爲cocos2d中的世界座標。經過父點節的轉換函數，轉換一個點爲世界座標點：

 
        var point = locateNode.getParent().convertToWorldSpace(locateNode.getPosition());

Cocos2d世界座標轉換到canvas座標

目前最後一步就是將遊戲中的座標轉換爲canvas座標，而後去執行鼠標模擬函數，點擊咱們定位的控件。

1.獲取canvas矩形信息

 
        function getHTMLElementPosition(element) { 
       
        var docElem = document.documentElement; 
       
        var win = window; 
       
        var box = null; 
       
        if  
        (cc.isFunction(element.getBoundingClientRect)) { 
       
        box = element.getBoundingClientRect(); 
       
        }  
        else  
        { 
       
        if  
        (element instanceof HTMLCanvasElement) { 
       
        box = { 
       
        left: 0, 
       
        top: 0, 
       
        width: element.width, 
       
        height: element.height 
       
        }; 
       
        }  
        else  
        { 
       
        box = { 
       
        left: 0, 
       
        top: 0, 
       
        width: parseInt(element.style.width), 
       
        height: parseInt(element.style.height) 
       
        }; 
       
        } 
       
        } 
       
        return  
        { 
       
        left: box.left + win.pageXOffset - docElem.clientLeft, 
       
        top: box.top + win.pageYOffset - docElem.clientTop, 
       
        width: box.width, 
       
        height: box.height 
       
        }; 
       
        }

上面這段代碼獲取一個dom節點的矩形信息，其實不用本身編寫這個方法，你能夠直接調用cc.inputManager.getHTMLElementPosition()，引擎已經有這個方法了。

2.座標轉換

canvas矩形的left對應遊戲世界x座標，鼠標位置即x上偏移rect.left

 
        x + rect.left  
       
        canvas矩形的top與遊戲異界y座標相反，rect.top + rect.height爲遊戲世界對應瀏覽器的底部，遊戲中y座標越大，對應canvas的中的y越小：  
       
        rect.top + rect.height - y

具體請看下面代碼：

 
        mouseSimulation: function(x, y) { 
       
        var canvas = document.getElementById( 
        "gameCanvas" 
        ); 
       
        var rect = cc.inputManager.getHTMLElementPosition(canvas); 
        //getHTMLElementPosition(canvas); 
       
        var pt = cc.p(x + rect.left, rect.top + rect.height - y); 
       
        var mousedown = document.createEvent( 
        "MouseEvent" 
        ); 
       
        mousedown.initMouseEvent( 
        "mousedown" 
        ,  
        true 
        ,  
        true 
        , window, 0, 0, 0, pt.x, pt.y,  
        true 
        ,  
        false 
        ,  
        false 
        ,  
        false 
        , 0, null); 
       
        canvas.dispatchEvent(mousedown); 
       
        setTimeout(function () { 
       
        var mouseup = document.createEvent( 
        "MouseEvent" 
        ); 
       
        mouseup.initMouseEvent( 
        "mouseup" 
        ,  
        true 
        ,  
        true 
        , window, 0, 0, 0, pt.x, pt.y,  
        true 
        ,  
        false 
        ,  
        false 
        ,  
        false 
        , 0, null); 
       
        canvas.dispatchEvent(mouseup); 
       
        }, 100);