Cocos Creator 入門篇-拖拽小遊戲（一）
摘要：
Cocos Creator的官方文件還是非常友好的，有中英文兩個版本。
【強烈建議】 初學者先把官方文件看一遍。裡面還包含了很多demo。
官方文件地址： docs.cocos.com/creator/man… 。
今天主要先帶大家簡單熟悉一下Cocos Creator的開發流...
Cocos Creator的官方文件還是非常友好的，有中英文兩個版本。
【強烈建議】 初學者先把官方文件看一遍。裡面還包含了很多demo。
官方文件地址： ofollow,noindex">docs.cocos.com/creator/man… 。
今天主要先帶大家簡單熟悉一下Cocos Creator的開發流程。
～～～接下來我們來完成簡單的拖拽小遊戲吧
完整程式碼
開發工具
- Cocos Creator
- Visual Studio Code
Visual Studio Code配置文件地址 docs.cocos.com/creator/man…
正文
1、使用Cocos Creator建立一個新專案
2、在assets中建立一個場景，取名“Drag”
3、雙擊我們的場景。
4、準備一張圖片素材，並放到assets中。
5、把素材拖動到層級管理器中，並放到Canvas節點下
6、建立一個js檔案
7、把js新增到場景下
8、用Visual Studio Code開啟我們的專案
9、編寫指令碼,在properties增加一個屬性carNode
***
properties: {
carNode: {
type: cc.Node,
default: null
}
},
***
複製程式碼
10、回到Cocos Creator，發現剛新增的屬性已經出現在了編輯器中。
11、將小車節點拖動到該屬性值的位置
12、回到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;
});
},
***
複製程式碼
13、切回到Cocos Creator，點選“執行”按鈕，Cocos Creator會幫你開啟瀏覽器並且載入當前遊戲
14、試著拖動一下小車試試小車是不是已經可以動起來了
15、有同學可能已經發現小車現在會被拖動到螢幕外邊，我們可以試著加一個限定條件限定小車只能在螢幕內拖動試試，以下是實現程式碼:
***
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;
});
},
***
複製程式碼
16、回到Cocos Creator點選“重新整理”按鈕，然後再試試看現在小車是不是隻能再螢幕內拖動了