微信小游戏案例三 抓星星
案例三 抓星星
本案例主要是通过图形化界面+代码来实现
cocos creator开发框架介绍
- Cocos Creator 编辑器提供
面向设计和开发的两种工作流 - Cocos Creator 目前支持发布游戏到
Web、iOS、Android、各类"小游戏"、PC 客户端等平台 - 使用
JavaScript语言
环境准备
工具下载
可以选择 window 或者 mac版本进行下载
注册账号
登录开发工具的时候需要账号
工具界面
image-20191226142720711
开始项目
打开工具 导入 基础资源项目
image-20191226145030793
image-20191226145143156
将背景图片从资源管理器拖到层级管理器中
注意放在
Canvas层级下
image-20191226145419856
使用工具调整背景图片的位置
image-20191226145603851
将地板图片从资源管理器拖到层级管理器中
image-20191226145753711
将主人也拖入
image-20191226145951975
给主人添加脚本
只有添加了脚本，才个给主人赋予了生命
- 在资源管理器中 新建文件夹
script - 在文件夹中，新建脚本
Play,不要加后缀名。自动添加的
image-20191226150200669
设置 自己喜爱的编辑器做为 编辑脚本的工具
我习惯使用了vs code了
2019-12-2650512_compress
在 脚本 Play中添加 跳跃相关的属性
Cocos Creator 规定一个节点具有的属性都需要写在
properties代码块中
cc.Class({
extends: cc.Component,
properties: {
// 主角跳跃高度
jumpHeight: 0,
// 主角跳跃持续时间
jumpDuration: 0,
// 最大移动速度
maxMoveSpeed: 0,
// 加速度
accel: 0,
}
});给 层级管理器中的 主人 添加 脚本
- 单击 场景编辑器中的
主人 - 在打开的
属性检查器最底部 点击添加组件 - 选择
用户脚本组件 - 然后手动的添加
属性值
image-20191226152030801
20191226151855_compress
0. 添加跳跃代码让主人跳起来
修改 Play脚本
cc.Class({
extends: cc.Component,
properties: {
// 主角跳跃高度
jumpHeight: 0,
// 主角跳跃持续时间
jumpDuration: 0,
// 最大移动速度
maxMoveSpeed: 0,
// 加速度
accel: 0,
},
// 设置跳跃的动作
setJumpAction: function () {
// 跳跃上升 cc.moveBy接收 参数1：跳跃的持续时间 参数2：向量 返回 时间间隔动作的类
const jumpUp = cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
// 下落
const jumpDown = cc.moveBy(this.jumpDuration, cc.v2(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
// 不断重复
return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
},
// 场景加载完毕触发
onLoad: function () {
// 初始化跳跃动作
this.jumpAction = this.setJumpAction();
// 执行动作
this.node.runAction(this.jumpAction);
}
});这个时候，点击 运行按钮，可以看到 主人已经跳跃起来了
image-20191226152812376
添加键盘移动控制事件
通过键盘输入 A D 来控制 人物的移动
- 给
Play新增以下 事件，onKeyDown和onKeyUp - 在
onLoad中注册事件 - 新增
update方法，来控制移动
给 Play新增以下 事件，onKeyDown和 onKeyUp
setJumpAction: function () {
//...
},
onKeyDown (event) {
// set a flag when key pressed
switch(event.keyCode) {
case cc.macro.KEY.a:
this.accLeft = true;
break;
case cc.macro.KEY.d:
this.accRight = true;
break;
}
},
onKeyUp (event) {
// unset a flag when key released
switch(event.keyCode) {
case cc.macro.KEY.a:
this.accLeft = false;
break;
case cc.macro.KEY.d:
this.accRight = false;
break;
}
},在 onLoad中注册事件
onLoad: function () {
// 初始化跳跃动作
this.jumpAction = this.setJumpAction();
this.node.runAction(this.jumpAction);
// 加速度方向开关
this.accLeft = false;
this.accRight = false;
// 主角当前水平方向速度
this.xSpeed = 0;
// 初始化键盘输入监听
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
},
onDestroy () {
// 取消键盘输入监听
cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
},新增 update 方法，来控制移动
update 在场景加载后就会每帧调用一次
update: function (dt) {
// 根据当前加速度方向每帧更新速度
if (this.accLeft) {
this.xSpeed -= this.accel * dt;
} else if (this.accRight) {
this.xSpeed += this.accel * dt;
}
// 限制主角的速度不能超过最大值
if ( Math.abs(this.xSpeed) > this.maxMoveSpeed ) {
// if speed reach limit, use max speed with current direction
this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
}
// 根据当前速度更新主角的位置
this.node.x += this.xSpeed * dt;
},本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-02-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
