2个小时能不能做一个跳一跳游戏？

引言

Cocos中实现跳一跳游戏效果

大家好，2023年快要过去了，你们的游戏都做完了吗？

昨天和朋友们聊天的时候聊到，2个小时能不能做一个跳一跳游戏?

基于好奇和探索的心理，笔者尝试了一下，2个小时做个效果勉强可以，但是想要上线还得大大优化。

本文将介绍一下如何在Cocos中实现跳一跳游戏效果。

本文源工程可在文末阅读原文获取，小伙伴们自行前往。

1.什么是跳一跳

可能有很多小伙伴不知道跳一跳是什么游戏。简单介绍一下：

跳一跳是一款由微信推出的小游戏，最初是作为微信内置功能之一。

这款游戏的玩法相对简单，玩家需要通过点击屏幕控制一个小人跳跃，跳跃的目标是跳到不同的方块上，而方块的距离会有所变化。

跳一跳因其简单有趣的玩法而在一段时间内风靡一时。

我们分析一下里面具体的游戏效果

2.跳一跳需求分析

经过简单的分析，跳一跳涉及的游戏效果可能如下：

• 地块的生成，每次跳跃完成之后会自动生成一块地块，距离和方向随机。
• 长按屏幕蓄力跳跃，根据玩家按压屏幕的时间决定跳跃的距离。
• 得分，每次成功跳跃(跳到下一块地块，不掉落)可获得1分。
• 游戏失败的判断，没有跳到地块上，掉落在地板的判断。

下面一起在Cocos中实现跳一跳游戏效果

3.跳一跳游戏效果的实现

1.环境

引擎版本：Cocos Creator 3.8.1

编程语言：TypeScript

2.资源准备

本期节目效果继续由跳一跳鸡和笔者的技能范围指示器效果友情助攻。

3.编写代码

首先创建一个FloorCreator组件，用来动态生成跳一跳的地块。其中关键的内容如下：

• 通过instantiate克隆生成地块。
• 通过nextFloor数组管理地块，循环使用。
• 通过Math.random()随机地块方向和距离。
• 通过add3f(0, 1, 0)给地块一个初始高度，做一个生成效果。

代码如下：

import {
    _decorator, Component, instantiate, Node, v3 } from 'cc';
const {
    ccclass, property } = _decorator;

@ccclass('FloorCreator')
export class FloorCreator extends Component {
   
    @property(Node)
    floorPfb: Node = null;

    curFloor: Node;
    nextFloor: Node[] = [];
    start() {
   
        this.curFloor = this.floorPfb;
    }

    public createFloor() {
   
        var dir = Math.random() < 0.5 ? v3(-1, 0, 0) : v3(0, 0, -1);
        var newFloor = this.nextFloor.length > 1 ? this.nextFloor.shift() : instantiate