Cocos Creator Mini Game Case "Stick Soldier"

前言

一、应用简介

Reasonably control the length of the stick,Help soldiers go further.

二、场景搭建

Create a new blank standard project,Create a new folder in the Explorer panelres、scenes、scripts,将资源文件复制到res文件夹内.Selected in the Hierarchy ManagerCanvasChange the size to width720,高度1280（The background image is designed to be this size）,Check Fixed width,Ctrl+SSave the scene to scenes文件夹内.如上图.

Drag in the background image,修改为bg.新建gameroot空节点,在其内新建platroot空节点,Used to place the platform,Drag the platform image into itplatroot节点内,修改为curplat,复制curplat节点修改成nextplat节点,Modify their respective positions.

in the resource managerresDrag the soldier material insidegameroot节点内,修改Type为TILED（平铺）,Click on the Rectangle Transform Tool,Resize and anchor points,点击移动工具,Adjust to the platformplatroot节点下.（如上图所示操作）

如上图,Drag the stick material into the layer manager panelplayer和plat_root节点之间.Click on the Rectangle Transform Tool,Drag the circle on the stick,Adjust the anchor point to the bottom of the stick,At that time, the stick rotation will rotate around this center point.Modify this node'sRotation属性值为-90,You can see that the stick rotates clockwise90度,becomes flat.

点击移动工具,调整位置,The bottom of the stick coincides with the soles of the soldiers' feet（左下图）.

之后,Put the stick againstick节点移动到plat_root节点之上,This will display below the platform layer,The effect you see is as if the stick is embedded in the platform,Kind of like being in the snow.（如右上图）

三、The stick grows and lays flat

Press the mouse or touch to start anywhere in the full screen,The stick gets longer,Release the mouse or touch to finish,The stick rotates and lays flat.

因为,To touch anywhere in the full screen cause the stick to grow,所以需要将gamemgr.jsUserscript component added to Canvas上,And to get the stick in this scriptstick,故要在gamemgr.js中添加属性stickand bind the stick node in the editorstick.

编译,运行,Press and hold the mouse on the interface,The stick will keep growing,松开鼠标,The stick will rotate to the right to lay flat.

四、Process handling of success and failure

【分析】：After the stick is flat,Control character movement through code,If the stick is flat,The position of the right end of the stick is in the middle of the left and right edge points of the next platform,则说明成功.否则失败！

成功后,The soldier should move to the right edge of the next platform,接着整个gamerootThe node moves to the left the distance the soldier walked just now（That's why in the first placestick、player、platroot全部放到game_root下面的原因）,Then generate the next platform through the prefab,The width of the next platform is random,The position from the previous platform is random.

失败后,The character walks to the end of the stick and falls.If the stick does not touch the next platform,Then the stick also rotates.游戏结束.

Pay attention to the method name！不带()！

1. 判断游戏是否成功is_success()方法

Because next,To control the soldiersplayer运动,And it is necessary to obtain the left and right edge positions of the next platform for judgment,故在geme_mgr.js的properties中添加属性,同时在CanvasInstantiate the corresponding property node on .如下操作：

2. Failed process handlingcheck_failed()方法

编译,运行,发现bug,The stick didn't settle when it failed,成功时,The stick will level out,Therefore, it is most likely that there is a problem with the processing method corresponding to the failure.Debugging browser breakpoints to find the cause of the problem,The code reported an error that it has not been executed.

将报错的85行的player.y改成this.player.y即可.重写编译,运行,After finding failure,Stick flat,The soldier goes behind the end of the stick,会掉下去.The stick will also fall off the edge of the cliff.But it was found that the rollers embedded in the platform were invisible.

The above picture is suspicious analysis,如下图：

Adjust the width of the next platform to 100,Move closer to the position of the previous platform,Test when the stick goes beyond the next platform,See if the soldier will fall,Whether the stick will still fall off the edge of the platform,如下图,Soldier falls,The stick doesn't move,正常.

3. Successful process processingcheck_success()方法

①The soldier moves to the right edge of the next platform;②Generate the next new platform（Destroy the old first platform,curplatThe platform is existingnextplat,Generate the next platformnextplat,整个gamerootThe node moves to the left the distance the soldier walked just now）.

Because to operate the current platform、next platform,And to generate the next platformplatroot节点上,At the same time to movegameroot节点.And generating the next platform requires the use of prefabs.So first make a platform prefab.然后在gamemgr.js中的properties中添加属性curplat、nextplat、platprefab、platroot、gameroot.and instantiated in the component.

接下来,完成check_success()方法,如下：

1.  `// Generate the next platform`

2.  `gen_next_plat(){},`

3.  `// How to deal with the normal progress of the game`

4.  `check_success(){`

5.  `// Soldiers from their original positions(this.player.x)Go to the right edge of the next platform`

6.  `// The next platform has edges =next platformx坐标 + Half the width of the platform - Soldier is half the width`

7.  `// In theory, half of the soldier's width can be subtracted,But because the soldiers are physically strong,脚小,故/4closer to the edge`

8.  `var dst_x = this.next_plat.x + this.next_plat.width * 0.5- this.player.width / 4;`

9.  `// 【*】记录移动距离,等下game_rootJust move the node this far to the left`

10.  `this.move_dis = (dst_x - this.player.x);`

11.  `var time = this.move_dis / this.walk_speed;`

12.  `var m = cc.moveTo(time, dst_x, this.player.y);`

13.  `this.player.runAction(m);`

14.  `// timeThe next platform is generated after the time`

15.  `this.scheduleOnce(function(){`

16.  `this.gen_next_plat(); // Generate the next platform`

17.  `}.bind(this), time);`

18.  `},`

重新编译后运行,结果如下图所示：

4. Refine the method for generating the next platformgennextplat()

1.  `// Generate the next platform`

2.  `gen_next_plat(){`

3.  `// 【1】Generate a new platform via a prefab to append toplat_root节点下`

4.  `var new_plat = cc.instantiate(this.plat_prefab);`

5.  `this.plat_root.addChild(new_plat);`

6.  `// 【2】Sets the size of this new platform（宽度）`

7.  `var width = 30+ Math.random() * 270;`

8.  `new_plat.width = width;`

9.  `// Set the location for this new platform`

10.  `new_plat.y = this.next_plat.y;`

11.  `var dis = 10+ Math.random() * 300; // 随机距离`

12.  `// The location of the new platform = the edge of the previous platform + 距离 + The new platform is half the width`

13.  `new_plat.x = this.next_plat.x + this.next_plat.width / 2+ dis + width/2;`

14.  `// 【3】geme_rootThe node moves to the left the distance the soldier walked just now 使用moveBy方法`

15.  `var time = this.move_dis / (this.walk_speed * 1.5);`

16.  `this.game_root.runAction(cc.moveBy(time, -this.move_dis, 0));`

17.  `// 【4】定时任务：reset stick,Destroy old platforms、Create a new platform`

18.  `this.scheduleOnce(function(){`

19.  `this.reset_stick();`

20.  `this.destroy_old_plat(new_plat);`

21.  `}.bind(this), time);`

22.  `},`

23.  `// Destroy old platforms、Create a new platform`

24.  `destroy_old_plat(new_plat){},`

5. Destroy old platforms、Create a new platformdestroyoldplat(new_plat)

1.  `// Destroy old platforms、Create a new platform`

2.  `destroy_old_plat(new_plat){`

3.  `// Remove the previous first platform from the parent node`

4.  `this.cur_plat.removeFromParent();`

5.  `// 长江后浪推前浪,The new man in the world is better than the old man`

6.  `// Before the next platform becomes the first platform`

7.  `this.cur_plat = this.next_plat;`

8.  `// The next platform is the new platform`

9.  `this.next_plat = new_plat;`

10.  `// Reset the position of the stick(The stick followed the soldier)`

11.  `this.stick.x += this.move_dis;`

12.  `// 重置状态,便于下次监听,继续生长`

13.  `this.state = State.Idle;`

14.  `},`

重新编译,运行,一切正常.大功告成！

五、小结

1、Be careful when building the scene：Put on all platformsplatroot节点下,player、stick、platroot全部放到game_root下,Because then the whole scene,Move to the left for everything except the background.2、Use the prefab to generate the next platform.3、功能实现：The stick grows、放平;Success and failure judgment.4、Success and failure judgment：判断方法、失败处理、成功处理（Generate the next platform、Destroy old platforms）.