Cocos Creator 入門篇-拖拽小遊戲（一）

前言

Cocos Creator的官方文檔仍是很是友好的，有中英文兩個版本。

【強烈建議】 初學者先把官方文檔看一遍。裏面還包含了不少demo。

官方文檔地址 ：http://docs.cocos.com/creator/manual/zh/。

今天主要先帶你們簡單熟悉一下Cocos Creator的開發流程。

～～～接下來咱們來完成簡單的拖拽小遊戲吧

完整代碼

https://github.com/taoxhsmile/Cocos-Creator-demo1

開發工具

1. Cocos Creator
2. Visual Studio Code

Visual Studio Code配置文檔地址http://docs.cocos.com/creator/manual/zh/getting-started/coding-setup.html

正文

一、使用Cocos Creator建立一個新項目

二、在assets中建立一個場景，取名「Drag」

三、雙擊咱們的場景。

四、準備一張圖片素材，並放到assets中。

五、把素材拖動到層級管理器中，並放到Canvas節點下

六、建立一個js文件

七、把js添加到場景下

八、用Visual Studio Code打開咱們的項目

九、編寫腳本,在properties增長一個屬性carNode

***
properties: {
    carNode: {
        type: cc.Node,
        default: null
    }
},
***

十、回到Cocos Creator，發現剛添加的屬性已經出如今了編輯器中。

十一、將小車節點拖動到該屬性值的位置

十二、回到Visual Studio Code，爲小車節點添加拖動事件

***
onLoad () {
    //獲取小車節點
    let { carNode } = this;
    //添加變量判斷用戶當前鼠標是否是處於按下狀態
    let mouseDown = false;
    //當用戶點擊的時候記錄鼠標點擊狀態
    carNode.on(cc.Node.EventType.MOUSE_DOWN, (event)=>{
        mouseDown = true;
    });
    //只有當用戶鼠標按下才能拖拽
    carNode.on(cc.Node.EventType.MOUSE_MOVE, (event)=>{
        if(!mouseDown) return;
        //獲取鼠標距離上一次點的信息
        let delta = event.getDelta();
        //移動小車節點
        carNode.x = carNode.x + delta.x;
        carNode.y = carNode.y + delta.y;
    });
    //當鼠標擡起的時候恢復狀態
    carNode.on(cc.Node.EventType.MOUSE_UP, (event)=>{
        mouseDown = false;
    });
},
***

1三、切回到Cocos Creator，點擊「運行」按鈕，Cocos Creator會幫你打開瀏覽器而且加載當前遊戲

1四、試着拖動一下小車試試小車是否是已經能夠動起來了

1五、有同窗可能已經發現小車如今會被拖動到屏幕外邊，咱們能夠試着加一個限定條件限定小車只能在屏幕內拖動試試，如下是實現代碼:

***
onLoad () {
    //獲取小車節點
    let { carNode } = this;
    //添加變量判斷用戶當前鼠標是否是處於按下狀態
    let mouseDown = false;
    //當用戶點擊的時候記錄鼠標點擊狀態
    carNode.on(cc.Node.EventType.MOUSE_DOWN, (event)=>{
        mouseDown = true;
    });
    //只有當用戶鼠標按下才能拖拽
    carNode.on(cc.Node.EventType.MOUSE_MOVE, (event)=>{
        if(!mouseDown) return;
        //獲取鼠標距離上一次點的信息
        let delta = event.getDelta();
        //增長限定條件
        let minX = -carNode.parent.width / 2 + carNode.width / 2;
        let maxX = carNode.parent.width / 2 - carNode.width / 2;
        let minY = -carNode.parent.height / 2 + carNode.height / 2;
        let maxY = carNode.parent.height / 2 - carNode.height / 2;
        let moveX = carNode.x + delta.x;
        let moveY = carNode.y + delta.y;
        //控制移動範圍
        if(moveX < minX){
            moveX = minX;
        }else if(moveX > maxX){
            moveX = maxX;
        }
        if(moveY < minY){
            moveY = minY;
        }else if(moveY > maxY){
            moveY = maxY;
        }
        //移動小車節點
        carNode.x = moveX;
        carNode.y = moveY;
    });
    //當鼠標擡起的時候恢復狀態
    carNode.on(cc.Node.EventType.MOUSE_UP, (event)=>{
        mouseDown = false;
    });
},
***

1六、回到Cocos Creator點擊「刷新」按鈕，而後再試試看如今小車是否是隻能再屏幕內拖動了

注意點

1. 若是想在手機上看到效果圖，須要把對應的鼠標事件改爲touch事件

by:Tao