Cocos creator实现《滑雪趣挑战》滑雪小游戏资源及代码

news2024/11/22 15:00:02

Cocos creator实现《滑雪趣挑战》滑雪小游戏资源及代码
最近在学习Cocos Creator，作为新手，刚刚开始学习Cocos Creator，上线了两个微信小游戏，刚刚入门，这里记录一下《滑雪趣挑战》实现及上线过程的过程。

alt text](https://img-blog.csdnimg.cn/9f2f8c7f066a41a6807841ffe90673e9.jpeg#pic_center)

https://wxaurl.cn/jYSrvkJBQYh

一 安装CocosDashBoard

这里就不介绍如何安装了

本案例使用的是编译器版本为2.4.10

二 新建2D项目SkiMan

2.1、管理项目目录
在资源管理器中新建文件夹

anim 动画
preb 预制体
res 图片、语音资源
scene 场景
scripts 脚本资源
将资源文件拖到res目录下

2.1、搭建界面
该案例中的场景界面为主界面main_scene、游戏界面game_scene.fire、关卡界面

三 关键代码

在该小游戏中障碍物的小树和石头需要向上移动，滑雪小人左右移动躲避小树和石头，得到星星即可得分。

3.1、创建障碍物

创建小树预制体，增加碰撞检测
在这里插入图片描述

创建石头预制体，增加碰撞检测
在这里插入图片描述

定时器移动小树与石头

createObstacle() {
        if (this.isStoped || !this.isStartPlay) {
            return;
        }

        // 随机2～4秒;
        var random = Math.random() * 100;
        let type = Math.floor(random);
        this.createElement(type);
    }

    createElement(type) {
        let bNum = 3;
        if (type % bNum == 0) {
            var graySone = this.spawnStone();
            this.node.addChild(graySone);

            var x = -this.canvasWidth / 2.0 + Math.random() * (this.canvasWidth - graySone.width);

            graySone.setPosition(cc.v2(x, -(this.canvasHeight / 2 + graySone.height)));

        } else {
            var tree = this.spawnTree();
            this.node.addChild(tree);

            var x = -this.canvasWidth / 2.0 + Math.random() * (this.canvasWidth - tree.width);

            tree.setPosition(cc.v2(x, -(this.canvasHeight / 2 + tree.height)));
        }
    }

    startCreateObstacle() {
        for (let index = 0; index < 1; index++) {
            var tree = this.spawnTree();
            this.node.addChild(tree);

            var x = -this.canvasWidth / 2.0 + Math.random() * (this.canvasWidth - tree.width);
            var y = -this.canvasHeight / 2.0 + Math.random() * (this.canvasHeight / 2.0) + this.canvasHeight / 8;

            tree.setPosition(cc.v2(x, y));
        }
    }

之后在update中移动障碍物

update(dt) {
        if (this.isStoped || !this.isStartPlay) {
            return;
        }

        for (let index = 0; index < this.node.childrenCount; index++) {
            let sub = this.node.children[index];
            sub.y += this.moveSpeed * dt;

            if (sub.y >= -this.canvasHeight / 3.0 && this.isOpenMagic) {
                let graySt = sub.getComponent(GrayStone);
                if (graySt) {
                    graySt.showOpenCubeDestory();
                } else {
                    let tree = sub.getComponent(ChristmasTree);
                    if (tree) {
                        tree.showOpenCubeDestory();
                    }
                }
            }

            if (sub.y >= this.canvasHeight / 2.0) {
                let graySt = sub.getComponent(GrayStone);
                if (graySt) {
                    this.despawnStone(sub);
                } else {
                    let tree = sub.getComponent(ChristmasTree);
                    if (tree) {
                        this.despawnTree(sub);
                    } else {
                        sub.removeFromParent();
                        sub.destroy();
                    }
                }
            }
        }
    }

3.2、魔法棒与磁铁道具

在游戏制作过程中新增了两个道具，
一个魔法棒道具
魔法棒道具：得到魔法棒道具可以在10s内时间内清除小树、石头障碍物
在这里插入图片描述
在这里插入图片描述

判断是否开启魔法棒，开启魔法棒后，障碍物消失

if (sub.y >= -this.canvasHeight / 3.0 && this.isOpenMagic) {
                let graySt = sub.getComponent(GrayStone);
                if (graySt) {
                    graySt.showOpenCubeDestory();
                } else {
                    let tree = sub.getComponent(ChristmasTree);
                    if (tree) {
                        tree.showOpenCubeDestory();
                    }
                }
            }

魔法棒道具创建

createMagic() {
        if (this.isStoped || !this.isStartPlay) {
            return;
        }

        var magicWand = cc.instantiate(this.magicWand);
        this.node.addChild(magicWand);

        var x = -this.canvasWidth / 2.0 + Math.random() * (this.canvasWidth - magicWand.width);

        magicWand.setPosition(cc.v2(x, -(this.canvasHeight / 2 + magicWand.height)));
    }

磁铁道具
磁铁道具：得到磁铁道具可以在10s内时间内吸收掉星星哦
在这里插入图片描述
在这里插入图片描述

// 生成磁铁
    beginManetSchedule() {
        var time = 10 + Math.random() * 3 + this.currentLevelInfo['level'] / 30;
        this.schedule(this.createManet, time);
    }

    createManet() {
        if (this.isStoped || !this.isStartPlay) {
            return;
        }

        var magnetTool = cc.instantiate(this.magnetTool);
        this.node.addChild(magnetTool);

        var x = -this.canvasWidth / 2.0 + Math.random() * (this.canvasWidth - magnetTool.width);

        magnetTool.setPosition(cc.v2(x, -(this.canvasHeight / 2 + magnetTool.height)));
    }

之后在update中移动星星的位置到滑雪小人上，星星与小人会触发碰撞检测，即可获得得分。

update(dt) {
        if (this.isStoped || !this.isStartPlay) {
            return;
        }

        for (let index = 0; index < this.node.childrenCount; index++) {
            let sub = this.node.children[index];

            if ((this.isOpenMagnet && (sub.y >= -this.canvasHeight / 2.0 && sub.y <= this.canvasHeight / 2.0))) {
                // 将星星移动到目标角色的位置
                let aStar = sub.getComponent(Star);
                if (aStar) {
                    // 只处理星星移动
                    aStar.moveToTargetPos(this.playPos);
                } else {
                    sub.y += this.moveSpeed * dt;
                }
            } else {
                sub.y += this.moveSpeed * dt;
            }

            if (sub.y >= this.canvasHeight / 2.0) {
                let aStar = sub.getComponent(Star);
                if (aStar == null) {
                    this.despawnStar(sub);                    
                } else {
                    sub.removeFromParent();
                    sub.destroy();
                }
            }
        }
    }

3.3、关卡内容，设计关卡

在这里插入图片描述

每个关卡控制不同的移动速度。所以在关卡代码中设置Settings
settings.ts

let settings = [
    {                               
        level: 1,                   // 第1关
        star: 0,                     // star获得数量
        duration: 60,               // 倒计时时长，单位为秒s
        speed: 200,                 // 倒计时时长，单位为秒s
        levelState: 'UNLOCKED',     // 关卡状态
    },
    {                               
        level: 2,                   // 关卡等级
        star: 0,                    // star获得数量
        duration: 60,               // 倒计时时长，单位为秒s
        speed: 250,                 // 倒计时时长，单位为秒s
        levelState: 'LOCKED',       // 关卡状态
    },
]

关卡展示是一个layout节点

在这里插入图片描述

每个关卡是一个预制体，在关卡中代码中生成具体的展示layout效果

export default class LevelRoot extends cc.Component {

    @property(cc.Sprite)
    levelBG: cc.Sprite = null;

    @property(cc.Node)
    levelLayout: cc.Node = null;

    @property(cc.Node)
    closeNode: cc.Node = null;

    @property(cc.Prefab)
    levelItemPreb: cc.Prefab = null;

    onLoad () {
        this.closeNode.on(cc.Node.EventType.TOUCH_START, this.closeLevelRoot, this);
        this.setupLevel();
    }

    start () {

    }

    update (dt) {

    }

    setupLevel () {
        this.levelLayout.removeAllChildren();
        if (!cc.sys.localStorage.getItem('settings')) {
            for (let i=0; i<settings.length; i++) {
                let level = cc.instantiate(this.levelItemPreb);
                level.getComponent(LevelItem).levelSetting = settings[i];
                level.getComponent(LevelItem).changeLevel();
                this.levelLayout.addChild(level);
            }
            // 将所有关卡信息存入本地(针对首次游戏)
            cc.sys.localStorage.setItem('settings', JSON.stringify(settings));
        }
        else {
            // 如果玩家已经玩过，则从本地存储中获取关卡配置信息
            let localSettings = JSON.parse(cc.sys.localStorage.getItem('settings'));
            for (let i=0; i<localSettings.length; i++) {
                let level = cc.instantiate(this.levelItemPreb);
                level.getComponent(LevelItem).levelSetting = localSettings[i];
                level.getComponent(LevelItem).changeLevel();
                this.levelLayout.addChild(level);
            }
        }
    }

    closeLevelRoot() {
        this.node.active = false;
    }
}

最后在GameManager.ts获取当前的关卡内容，更改移动速度。

四、上传微信小游戏

上线微信小游戏
在https://mp.weixin.qq.com 创建账号并登录，这里注意选择小程序的账号哦，需要绑定微信。
登录之后，在小游戏基本设置，设置一下内容

1、上线微信小游戏
小程序名称
小程序简称
小程序头像
小程序服务类目

在游戏设置中需要设置 上传小游戏自审自查文档照片，签字，日期，按手印哦。

2、Cocos Creator代码打包上传
在Cocos Creator的菜单的项目中，构建发布

选择发布平台，微信小游戏
根据游戏的横竖屏设置方向
设置appid（来自微信小程序后台）

最后点击构建，点击构建成功后。使用微信开发工具导入编译build后的项目。在微信开发工具中预览可以手机扫码看到游戏的开发版本。
上传游戏、提交版本及更新内容，上传成功后可以在微信小程序后台的版本管理中看到上传新版本。点击提交审核即可。

3、上线微信小游戏出现问题
上线微信小游戏经常出现“小游戏需具有完整的游戏玩法、不能为简单的素材堆砌”
根据这个问题，在案例中新增了关卡、游戏玩法介绍后重新发布新的版本，继续等待审核即可。暂时这么审核通过了。

参考
https://blog.csdn.net/gloryFlow/article/details/130690146

五、游戏效果

最后大致看下在微信小游戏上的效果

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/575575.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue实现深拷贝的方法

vue实现深拷贝的方法

在 vue中&#xff0c;深拷贝是一个很有用的功能&#xff0c;在不改变原来对象状态的情况下&#xff0c;进行对象的复制。 但要实现深拷贝&#xff0c;需要两个对象具有相同的属性。如果两个对象不同&#xff0c;深拷贝也不能实现。 1.我们将变量A的属性赋给变量B&#xff0c;但…
阅读更多...
springboot+java医院门诊挂号系统设计与实现ssm008

springboot+java医院门诊挂号系统设计与实现ssm008

本课题的目标是使医院门诊信息管理清晰化&#xff0c;透明化&#xff0c;便于操作&#xff0c;易于管理。通过功能模块的优化组合实现不同的管理细节&#xff0c;使管理过程实现最大程度的自动化与信息化,并能自动对人工操作环节进行复查,使医院门诊挂号系统出错率降至最低。 主…
阅读更多...
3、mqtt客户端演示（MQTT通信协议(mosquitto)发布订阅 C语言实现）

3、mqtt客户端演示（MQTT通信协议(mosquitto)发布订阅 C语言实现）

可订阅可发布模式 具体代码 客户端1代码&#xff1a;pub.c #include <stdio.h> #include <stdlib.h> #include <mosquitto.h> #include <string.h>#define HOST "localhost" #define PORT 1883 #define KEEP_ALIVE 60 #define MSG_MAX_S…
阅读更多...
ChatGPT提示词工程进阶教学

ChatGPT提示词工程进阶教学

ChatGPT提示词工程 1 两种大型语言模型LLM1.1 基础大模型&#xff08;base LLM&#xff09;1.2 指令调优大模型(Instruction Tuned LLM) 2 如何更清晰、具体地书写提示词2.1 在提示词中使用“定界符”2.2 向模型请求结构化的输出2.3 要求模型检查任务条件是否满足2.4 输入多范例…
阅读更多...
uCOSii中的互斥信号量

uCOSii中的互斥信号量

uCOSii中的互斥信号量 一、互斥型信号量项管理 (MUTUAL EXCLUSION SEMAPHORE MANAGEMENT) OSMutexAccept() 无条件等待地获取互斥型信号量 OSMutexCreate() 建立并初始化一个互斥型信号量 OSMutexDel() 删除互斥型信号量 OSMutexPend() 等待一个互斥型信号量 OSMutexPost…
阅读更多...
扬帆起航——Qt自定义控件介绍

扬帆起航——Qt自定义控件介绍

文章目录 前言自定义控件的定义自定义控件的好处如何实现自定义控件实现没有自带的控件 如何使用自定义控件测试和优化常见的自定义控件总结 前言 Qt 提供了丰富的控件、工具和库&#xff0c;可以帮助开发人员快速创建现代化的跨平台应用程序。但是对于某些特殊的需求&#xf…
阅读更多...
【数据结构】冒泡，快速，直接插入，归并，选择排序

【数据结构】冒泡，快速，直接插入，归并，选择排序

&#x1f38a;专栏【数据结构】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【Dream It Possible】 大一同学小吉&#xff0c;欢迎并且感谢大家指出我的问题&#x1f970; 目录 &#x1f381;冒泡排序 &#x1f3f3;️‍&…
阅读更多...
CentOS7.4安装OpenVPN

CentOS7.4安装OpenVPN

系统环境 [rootvpn ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) 一. 准备工作 [rootvpn ~]# yum -y install openssl-devel openssl pam pam-devel lzo lzo-devel pkcs11-helper pkcs11-helper-devel 二. 安装OpenVPN服务 1. 下载openvpn源码包 [r…
阅读更多...
【计算机网络 - 第六章】链路层

【计算机网络 - 第六章】链路层

目录 一、概述 1、数据链路层提供的服务&#xff1f; 二、差错检测 1、奇偶校验 2、循环冗余校验CRC 三、多路访问链路和协议 1、概述 &#xff08;1&#xff09;多路访问协议 2、信道划分协议 ① 频分多路复用FDM ② 时分多路复用TDM ③ 波分多路复用WDM ④ 码分…
阅读更多...
更好看的国产蓝牙耳机，音质也没问题，哈氪零度青春版体验

更好看的国产蓝牙耳机，音质也没问题，哈氪零度青春版体验

夏天躲在空调房里戴着耳机听音乐、玩游戏是很多人的日常&#xff0c;这两年国产耳机做得越来越好了&#xff0c;设计也很有新意&#xff0c;像是我现在用的这款哈氪零度青春版&#xff0c;就采用了一种冰封造型设计&#xff0c;视觉效果很新颖&#xff0c;看起来很有立体感&…
阅读更多...
【一个简单的前后端交互页面】

【一个简单的前后端交互页面】

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 客户端与服务器之间的通信流程 理解当前案例…
阅读更多...
chatgpt赋能python：Python文件拆分技巧详解

chatgpt赋能python：Python文件拆分技巧详解

Python 文件拆分技巧详解 随着数据量的不断增大&#xff0c;我们经常需要处理非常大的数据文件&#xff0c;这时候就需要用到文件拆分技巧。在Python中&#xff0c;文件拆分可以帮助我们提高数据处理的效率&#xff0c;这是一个非常实用的技巧。在本篇文章中&#xff0c;我们将…
阅读更多...
奇巴布Feed流性能优化

奇巴布Feed流性能优化

01 项目背景 “爱奇艺奇巴布”是爱奇艺为0-8岁孩子和家长定制化设计的寓教于乐平台&#xff0c;为儿童量身打造精致的观看体验&#xff0c;精彩内容解锁寓教于乐新方式。为儿童提供优质动画内容的同时&#xff0c;我们更关注APP用户体验。在产品交互设计上我们立足儿童视角&…
阅读更多...
抖音SEO矩阵系统开发分享及搭建流程

抖音SEO矩阵系统开发分享及搭建流程

目录 产品功能亮点 产品介绍及开发背景 开发要求及实现流程 产品功能亮点 1. 支持多账号多平台一键 授权管理 2.支持矩阵视频批量剪辑&#xff0c;批量发布 3. 多平台关键词布局&#xff0c;提升企业及产品曝光 4. 评论区关键词自动回复&#xff0c;意向线索智能挖掘 5…
阅读更多...
RTOS专栏（一） —— rt-thread简单介绍和qemu使用

RTOS专栏（一） —— rt-thread简单介绍和qemu使用

本期主题&#xff1a; 简单介绍rt-thread介绍qemu和rt-thread怎么配合使用qemu的简单例子 rt-thread & qemu 1.rt-thread介绍2.qemu介绍3.搭建rt-thread和qemu开发环境4.简单例子 1.rt-thread介绍 RT-Thread 是一款完全由国内团队开发维护的嵌入式实时操作系统&#xff0…
阅读更多...
《操作系统》期末主观题梳理

《操作系统》期末主观题梳理

操作系统简答题 文章目录 操作系统简答题第一章第二章第三章第四章第五章第六章第七章第八章第九章 第一章 在计算机系统上配置OS(operating system, 操作系统)的目标是什么?作用主要表现在哪几个方面? 在计算机系统上配置OS, 主要目标是实现&#xff1a;方便性、有效性、可…
阅读更多...
Error: Flash Download failed - Target DLL has been cancelled

Error: Flash Download failed - Target DLL has been cancelled

文章目录 背景参考 背景 在使用keilv5进行STM32开发时&#xff0c;配置用JLink进行文件烧录&#xff0c;出现如下错误&#xff1a; 查阅资料&#xff0c;是因为Keil未识别烧录工具&#xff0c;需要进行下面的操作&#xff1a; 1.打开工程配置窗口&#xff0c;点开Debug选项卡…
阅读更多...
并查集专题

并查集专题

⭐️前言⭐️ 本篇文章主要介绍与并查集相关的题目。 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主将持续更新学习记录收获&#xff0c;友友们有任何问题可以在评论区留言 &#x1f349;博客中涉及源码及博主…
阅读更多...
阿里「通义千问」内测详细使用体验

阿里「通义千问」内测详细使用体验

名人说&#xff1a;一花独放不是春&#xff0c;百花齐放花满园。——《增广贤文》 作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、简要介绍二、分类问题测试0️⃣自我介绍1️⃣生成内容2️⃣回答问题3️⃣对话协…
阅读更多...
springboot+vue大学生租房系统（java项目源码+文档）

springboot+vue大学生租房系统（java项目源码+文档）

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的大学生租房系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 &#x1f495;&#x1f495;作者&#xff1a;风歌…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023