资源见: https://pan.baidu.com/s/1cryYNdBOry5A4YEEcLwhDQ?pwd=zual
步骤
1, 让背景动起来
2, 玩家飞机显现,能操控,能发射子弹
3.敌机出现
4. 碰撞效果(子弹和敌机,敌机和玩家)
5. 积分和游戏结束
6. 游戏存档,对接微信小游戏,保存历史最高分
7. cocos发布到微信小游戏
资源准备:
背景图, 敌方飞机, 玩家飞机, 爆炸效果图, 子弹动画帧, 游戏结束图,音效
Resources: 图片和音效
Scene: 场景文件 文件夹
Scripts: 脚本文件夹
- 文件目录创建
在Canvas右键创建空节点,命名为root_node,在root_node下创建空节点background_node, 并将资源中的图片Background拖入节点background_node下 , 按ctrl+s 保存当前场景, 并命名为main_scene,保存在scene文件夹中,(再次打开项目就看不到这个场景了,双击场景文件就行了)
选择当前场景,点击运行按钮,浏览器就自动显示蓝天白云的背景了
- 让背景动起来
①将背景图片节点复制一份
② 选中Scripts文件夹右键创建脚本(TypeScript)文件,命名 Background.ts
③ 选中background_node,将脚本Background.ts拖入右侧属性检查器,将脚本进行和节点进行绑定
双击脚本Background,直接打开VScode编辑器进行写代码
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;@ccclass('Background')
export class Background extends Component {private Speed = 100; // 速度private MyBGsArr = [];private DHeight = 747;//回调函数会在组件第一次激活前，也就是第一次执行 update 之前触发。start() {this.MyBGsArr = this.node.children; //获取当前节点子子节点(即Background_1,Background_2) }// 游戏开发的一个关键点是在每一帧渲染前更新物体的行为，状态和方位。这些更新操作通常都放在 update 回调中。但deltaTime的值不一定update(deltaTime: number) {// 遍历两个子节点,沿Y轴向下(Y轴负方向)for (let i = 0; i < this.MyBGsArr.length; i++) {const pos = this.MyBGsArr[i].getPosition();const x = pos.x;const y = pos.y;if(y<= -747){this.MyBGsArr[i].setPosition(x, 747); // 将移动到屏幕下方的图片放到上方}else{this.MyBGsArr[i].setPosition(x, y - deltaTime * this.Speed);}}}
}
当前场景运行,背景图就运动起来了,偶尔会看到一条线,因为deltaTime不是恒定的所以将图片高度调整为750; 这样就能覆盖住那条线
