Cocos Creator 入门篇-拖拽小游戏（一）-白红宇

前言

Cocos Creator的官方文档还是非常友好的，有中英文两个版本。

【强烈建议】初学者先把官方文档看一遍。里面还包含了很多demo。

官方文档地址 ：。

今天主要先带大家简单熟悉一下Cocos Creator的开发流程。

～～～接下来我们来完成简单的拖拽小游戏吧

完整代码

开发工具

Cocos Creator

Visual Studio Code

Visual Studio Code配置文档地址

正文

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点击“刷新”按钮，然后再试试看现在小车是不是只能再屏幕内拖动了

注意点

如果想在手机上看到效果图，需要把对应的鼠标事件改成touch事件

by:Tao