【微信小游戏实战】零基础制作《欢乐停车场》一、游戏设计

1、游戏立项

微信小游戏中有一款《欢乐停车场》的小游戏,大家可以搜索玩下。这是一款益智类的小游戏,游戏中有红、黄、绿、蓝、紫5辆豪车6个停车位,玩家通过可行走路线移动小车,最终让各颜色的小车停到对应的颜色车位,则完成本关挑战。接下来的日子,我将同大家一步一步的来实现这款小游戏,从零基础入门微信小游戏的开发和发布。

2、本篇内容

CocosCreator零基础制作《欢乐停车场Plus》微信小游戏  一、游戏设计

3、文章检索

1)、【微信小游戏实战】零基础制作《欢乐停车场》一、游戏设计

2)、【微信小游戏实战】零基础制作《欢乐停车场》二、关卡设计

3)、【微信小游戏实战】零基础制作《欢乐停车场》三、游戏场景制作

4)、【微信小游戏实战】零基础制作《欢乐停车场》四、游戏关卡脚本实现

5)、【微信小游戏实战】零基础制作《欢乐停车场》五、游戏玩法脚本实现

6)、【微信小游戏实战】零基础制作《欢乐停车场》六、游戏结束

7)、【微信小游戏实战】零基础制作《欢乐停车场》七、游戏发布

4、游戏实战

首先我们先来看几张游戏截图:

关卡选择界面,解锁的关卡可点击,白色;未解锁关卡不可点击,灰色。

点击不同的关卡,跳转到相应的关卡进行游戏,我们可以看到游戏中有红,黄,绿,蓝,紫五种颜色的豪车,和对应的车位。每一关车位不同,车的位置和路的连线是跟随关卡变化而变化的。

点击可移动的小车,车会移动到空白的车位,同时可行走的车,车头进行旋转,指向空白车位。

各颜色的车停到相应的位置后,显示过关页面,点击确定进行下一关的挑战。

通过以上游戏截图和分析,我们可以做如下的游戏设计。

分析:通过一个简单的脑图,整个游戏在我们头脑中就比较清晰了。

1)、包含三块内容,关卡选择,游戏场景,游戏结束。这三块内容可以在一个场景中通过显示隐藏实现,也可以通过三个场景来实现。

2)、关卡选择包含:一个背景,一个logo,一个关卡选择列表,关卡选择列表中又包含了已解锁关卡和未解锁关卡。已解锁关卡可以点击,跳转到游戏界面,进行游戏。未解锁关卡不能点击。

3)、游戏界面包含: 显示当前关卡,游戏初始时车的位置,游戏中道路的连线,车头的方向,返回选择关卡界面的按钮,重置当前游戏按钮。

4)、游戏结束包含:一个背景,一个确定按钮,点击确定按钮自动跳入下一关进行跳转。这个比较简单。

5、游戏总结

1)、如有问题,欢迎留言,加QQ群交流。QQ群: 1群:418177552(已满)  2群:858799494

2)、本篇主要介绍整个游戏,从立项到脑图分析,到一个完整的游戏在我们头脑中浮现的一个过程。通过本篇我们能对整个游戏有一个很好的认识。

3)、下一篇我们从技术上的角度去构建数据,完成关卡的设计。

原文地址:https://www.cnblogs.com/zhangdw/p/9845045.html

时间: 2024-10-13 23:44:42

【微信小游戏实战】零基础制作《欢乐停车场》一、游戏设计的相关文章

html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

开言: 以前lufy前辈写过叫" HTML5游戏开发-零基础开发RPG游戏"的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为视点,为大家讲述如何开发一款简单的游戏.希望大家看了这篇文章,能使你对理解游戏开发有帮助. 你可以先测试一下游戏: http://lufylegend.com/lufylegend_developers/yorhom_Christmas/index.html 1,如何进行游戏开发 1.1游

(转)CocosCreator零基础制作游戏《极限跳跃》一、游戏分析

CocosCreator零基础制作游戏<极限跳跃>一.游戏分析 无意中发现了小游戏<极限跳跃>感觉挺有意思的,正好这段时间和朋友讨论准备用js还是unity做小游戏,初定用js,使用CocosCreator,于是我拿这款游戏练手,准备一天时间做出来,结果一天只完成了四分之三,后面又用了几个晚上,加碰撞检测,加声音音效..把这游戏的制作记录下. 1.吐槽加游戏分析 http://www.byjth.com/CocosCreator/66.html 2.制作游戏开始场景 http://

(转)CocosCreator零基础制作游戏《极限跳跃》二、制作游戏开始场景

CocosCreator零基础制作游戏<极限跳跃>二.制作游戏开始场景 我们刚刚分析了<极限跳跃>这款游戏,下面我们开始制作第一个游戏场景,也就是游戏的开始场景. 首先,打开CocosCreator,新建HelloWorld项目.选择项目路径,输入项目名称"jxty",点击新建项目. 新建好项目,项目会自动打开.这里大家可以看下官方的文档,了解 下编辑器的功能和用法. 资源管理器里显示了项目资源文件夹(assets)中的所有资源.这里会以树状结构显示文件夹并自动

(转)CocosCreator零基础制作游戏《极限跳跃》九、为游戏添加声音音效功能

CocosCreator零基础制作游戏<极限跳跃>九.为游戏添加声音音效功能 游戏的声音很重要,我们在这个游戏中需要加2个音效,一个背景音乐...第一个音效在玩家与障碍物碰撞的地方加碰撞音效,第二个在玩家主角坠落到屏幕底部的时候加游戏结束的音效.然后游戏开始的时候加载背景音乐. 我们一开始在MainScene场景中的声音图标节点就是我们用来控制声音的开关.. 首先修改guawileft.js脚本,添加音效资源,在onload设置声音大小.代码: 01 //guanwileft.js 02  

(转)CocosCreator零基础制作游戏《极限跳跃》四、添加游戏主场景控制脚本

CocosCreator零基础制作游戏<极限跳跃>四.添加游戏主场景控制脚本 前面简单的实现了主界面的UI设置,现在我们开始制作游戏的控制脚本. 在资源管理器的Script文件夹中,点击右键新建javascript文件,命名为GAME. 双击打开GAME脚本,在properties: 中添加属性代码. 01 //GAME.js 02   03 cc.Class({ 04     extends: cc.Component, 05     properties: { 06       07   

(转)CocosCreator零基础制作游戏《极限跳跃》三、制作游戏主场景

CocosCreator零基础制作游戏<极限跳跃>三.制作游戏主场景 刚刚我们制作了游戏的开始场景,现在我们来制作游戏的主场景.还是同样的方法,新建一个名为MainScene的场景,双击打开,修改场景的大小为480x800. 1.首先贴入游戏背景,在此我们使用了2张背景图,只需要把背景拖进层级管理器2次,修改名称为bg1,bg2即可,背景2接着背景1点上方设置位置. 2.摆放玩家主角在屏幕合适位置 3.添加金币按钮在屏幕上方 4.右键Canvas画布=>创建节点=>创建渲染节点=&

(转)CocosCreator零基础制作游戏《极限跳跃》八、添加游戏积分系统

CocosCreator零基础制作游戏<极限跳跃>八.添加游戏积分系统 前面我们实现了整个游戏的流程,下面我们来完善游戏的积分系统..先来分析下游戏的积分,第一次展示积分的地方就是我们的游戏主场景MainScene,玩家通过一些机制来获取积分,实现积分的更新,当玩家游戏结束后展示玩家所获的的当前积分. 我们一开始制作游戏场景的时候就制作了一个积分节点score,其string属性值为0.打开GAME.js脚本可以发现,一开始的时候我们onLoad方法就初始化了积分. 接着我们在GAME.js脚

(转)CocosCreator零基础制作游戏《极限跳跃》七、制作游戏结束场景并实现场景切换

CocosCreator零基础制作游戏<极限跳跃>七.制作游戏结束场景并实现场景切换 前面我们实现了游戏的碰撞检测,碰到障碍物我们的角色就会死掉并开始掉落,角色掉落到屏幕底部时候游戏结束,并跳到结束场景. 我们在资源管理器新建GameOver场景.双击打开场景,调整大小为480x800,添加界面需要的节点.如图. 这样我们的结束场景就制作好了.可以预览下. 制作好了,结束场景我们就需要把我们游戏的三个场景关联起来了. 首先我们双击打开我们的第一个场景WelcomeScene.然后在资源管理器创

(转)CocosCreator零基础制作游戏《极限跳跃》六、制作游戏障碍物实现碰撞检测

CocosCreator零基础制作游戏<极限跳跃>六.制作游戏障碍物实现碰撞检测 前面我们实现了背景和主角的操作,下面我们开始添加游戏的障碍物以及碰撞检测的功能. 一.制作障碍物Prefab(预制) Prefab(预制)是cocoscreator官方文档提出的,是为了解决需要重复使用的节点问题. 如何制作预制体prefab呢?具体可以参照官方文档,这里简单的说下,就是在场景中编辑好节点后,直接将节点从 层级管理器 拖到 资源管理器 中即可. 我们来看下极限跳跃的游戏截图分析下.. 游戏中障碍物