前言

前段时间赋闲在家，整理电脑上的资料时才发现从业这么多年都是在给公司打工，没为自己写过点什么，所以决定为自己写一个完整的“产品”。同时，为了检验一下自己的学习能力，选择了从未接触过的游戏领域。由于是独立开发，做不了大型游戏，只好瞄准了休闲类的小游戏。接下来就是确定要做一个什么样的休闲小游戏了。在试玩各种休闲类的小游戏过程中，偶然发现了一款去年在国外很火的游戏《Wordle》，甚至于纽约时报花了大价钱去收购它。于是想当然的就决定山寨一把，没准就成为爆款走向人生巅峰了（实时证明是我想太多了，哈哈）。

目标平台：

本人比较懒，如果要在应用市场上架的话就意味着至少要有两个版本（IOS和android），同时IOS上架的话还要注册开发者账号。最后还是决定选择微信小游戏平台，用户也不需要下载。

开发工具：

由于之前没接触过微信小游戏的开发，所以在开发工具的选择上也比较倾向于使用率比较高的开发工具，换句话说就是当前流行的工具。（实时证明，这方面我还是比较嫩）在我开发这款游戏的时候，网上对于Cocos Creator的教程大多都是2.X版本的，和3.X版本有很大的差异。无论是架构方面，还是常用系统组件，参数等差异都很大，这让我萌生了写这篇开发教程的念头。

Cocos Creator 3.4.2：游戏内容生产：游戏场景、预制体编辑，组件脚本配置；
Chrome 100：游戏预览调试工具；
Visual Studio Code 1.67.2：游戏代码编辑工具；
微信开发者工具 stable 1.05.2204180：真机环境模拟环境，云开发可视化配置，代码提交

以上工具的版本是我在准备开发时下载的当时最新的版本。

环境搭建：

首先是安装上述开发工具，过程也很简单就是一路NEXT下去，这里就不再介绍了。唯一需要说明一下的就是 cocos creator的安装，因为cocos creator的编辑器更新的还是比较快的，大概两三个月就有一个新版本出来，所以它提供了一个DashBoard来统一管理各个版本的编辑器。在官网下载地址页面选择你要下载的版本，选择下载DashBoard如下图所示：

安装好DashBoard后，启动DashBoard:在“编辑器”菜单中，下载对应的编辑器版本：

在编辑器页面列出了当前cocos creator的所有版本，目前最新的是3.5，我在开发这款小游戏的时候最新是3.4.2，选择对应的版本安装即可。

所有开发工具安装完成以后，接下来需要进行一些相关配置。我们打开DashBoard，选择“项目”，

如果你的DashBoard里面安装了多个版本的编辑器，那么在“编辑器版本”那里一定要选择对应的版本，比如你到网上搜罗了一些开源项目，再导入项目的时候就要把对应的编辑器版本设置好，否则可能会出现兼容问题而导致项目无法运行。 Wordle这款游戏是2D的，所以我们选择“Empty(2D)”模板来创建一个2D空项目，设置好项目名称，项目文件路径后，点击“创建”后就会进入我们新建的项目了，第一次加载比较慢一点。点击左上角的“Cocos Creator”-->“偏好设置”

选择“外部程序”，进行如下配置：

由于我是针对微信小游戏平台开发，所以安卓，鸿蒙那里就不用配置了，微信开发者工具，默认脚本编辑器，默认浏览器的配置路径一定要写到.exe的路径。

接下来需要配置VS Code的调试，选择“开发者”-> Visual Studio Code工作流，出现如下图所示两个选项，依次点击即可。

这个配置是针对项目的，也就是每创建一个项目，如果你要从VS Code里面进行断点调试的话，就需要设置这两项。

接下来再打开VS Code，选择扩展，安装如下两个插件，如果你的英文比较好也可以不用安装中文插件，安装也很简单，直接在输入框中输入插件名称搜索，点击安装即可。

最后，我们还需要到微信公众平台注册一个账号用于以后发布小游戏，注册顺序如下：

1、点击注册后，在注册页面选择账号类型为小程序

2、填写注册邮箱

3、注册以后微信公众平台会发送验证电子邮件到注册邮箱，跳转到该链接后，选择账号类型“个人”，填写个人姓名和身份证号，并用自己的微信扫描下方二维码将自己的微信账号绑定为该小程序的管理员账号，后续登陆微信公众平台时，只需要微信扫码即可登陆。后面等游戏内容开发完毕，还需要为游戏发布做一些设置，后续再做详细介绍。

至此，开发环境就算搭建完成了，后续将一一介绍如何开发出这款小游戏。先贴一个二维码，让我们看看即将要开发的小游戏是怎么样的，由于云开发的配置比较低，请轻虐。

完整代码

微信小游戏实战--cocos creator实现wordle游戏（一）相关推荐

微信小游戏实战--cocos creator实现wordle游戏（六）
就wordle游戏本身而言它已经完成了,但我并不打算就到此为止."麻雀虽小五脏俱全",从"完整"的角度来看,它还缺少一些"必不可少"的功能: ...
微信小游戏实战--cocos creator实现wordle游戏（五）
到目前为止我们已经实现了整个游戏的界面以及"空格"和键盘按钮的动画,接下来完成游戏的基础玩法流程. 完整代码一.初始化游戏由于在游戏中"空格"的背景和Lab ...
【10086个赞】Cocos Creator助力H5游戏大爆发
梦想起航,共筑辉煌.4月21日,"资本助推H5行业发展--2017·H5-GAME资深大咖荟"在厦门创+会议中心正式拉开帷幕. 作为一个新兴行业,H5游戏至去年年末便被众多从业者炒 ...
视频教程-老司机讲前端之微信小程序开发成语消消乐游戏视频课程-微信开发
老司机讲前端之微信小程序开发成语消消乐游戏视频课程中国实战派HTML5培训第一人,微软技术讲师,曾任百合网技术总监,博看文思HTML5总监.陶国荣长期致力于HTML5.JavaScript.CSS3 ...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-陶国荣-专题视频课程...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-102人已学习课程介绍本课通过一个完整.真实的游戏项目,带着学员手动开发代码,本课分项目介绍.界面效果.技术分析.代码实现.打包 ...
axure 小程序网盘_万门大学微信小程序实战开发特训班【完结】网盘高清全套最新系列精品课程...
万门大学微信小程序实战开发特训班[完结]网盘高清全套最新系列精品课程课程简介我买了这个课程,课程很有价值,我们通过链接或百度网盘群的形式在共享资料库中与您共享,需要万门大学微信小程序实战开发特 ...
微信小程序实战篇：商品属性联动选择（案例）
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...
微信小程序实战开发视频
微信小程序实战开发视频: 链接:http://pan.baidu.com/s/1jIAwBLs 密码:ej3b
小程序swiper怎么让内容撑开高度_[视频]微信小程序实战优购商城，涵盖你所学的技能点...
很多友友都在找视频教程学习,IT技术教程分享网[http://www.mano100.cn]已经为你收集了各种各样的视频教程,不用再到处找视频教程学习了.无论是免费的,还是收费的,都在这里了.只要你注 ...

微信小游戏实战--cocos creator实现wordle游戏（一）

前言

目标平台：

开发工具：

环境搭建：

微信小游戏实战--cocos creator实现wordle游戏（一）相关推荐

最新文章

热门文章