文章目录

• • • • • 游戏场景
• 游戏二维码
• • 微信平台
  • 4399平台

1.List工具篇
2.工具篇 Dictionary
3.工具篇 读取Json文件保存数据
4.资源管理ResourceManager
5.界面层级管理 LayerManager
6.界面管理 UIManager
7.事件监听篇 EventBus
8.枚举篇 枚举管理
9.游戏总管 Mir
10游戏入口 Main
11.声音管理器
12首页界面
13.游戏界面
14.01 背景
15.02主角（与游戏界面交互）
16.03添加怪物来袭
17.04添加障碍物
18.05 添加障碍物排列
19.06添加奖励物品
20.07奖励物质排列数据
21.从零开始-Cocos跑酷游戏——游戏结束界面
22.最后的补充

因为是跑酷游戏，那么背景肯定是需要一直在循环轮播的

跑酷游戏实现比较好的方式应该是是摄像机固定，背景轮播，主角只有在固定位置做起跳，奔跑这些效果。

我这个游戏的实现方式有点不一样:摄像机是随着主角在动的。这个就会使得游戏的所有东西都在移动，做起来就是有点绕。虽然说发现问题了，却也不怎么想去改了，有心人可以想想 我说的 摄像机固定这种做法。据我了解，天天酷跑就是以这种方式完成的。

---

废话不多说，进入正题:

前面说到了，这个跑酷游戏需要一个摄像机去跟随主角移动。
从图中可以看到Canvas下有一个默认的MainCamera.
在这个基础下，需要再创建一个PlayerCamera摄像机

MainCamera 的设置参数:

PlayerCamera的设置参数:

MainCamera 只渲染UI部分
PlayerCamera 渲染游戏场景

游戏场景

游戏场景是由3张图片构成的，

代码逻辑

游戏运行开始，设置三个背景移动临界点，当摄像机的的X值 越过临界点，则移动背景。由此可以重复移动下去

初始化操作//背景1this.bg1.setPosition(0,0);this.bg2.setPosition(1920,0);this.bg3.setPosition(3840,0); this.criticalOne=this.bg2.x;this.criticalTwo=this.bg3.x;this.criticalThree=this.bg2.x+this.bg3.x;//   //背景2this.bgm1.setPosition(0,0,0);this.bgm2.setPosition(1920,0);this.bgm3.setPosition(3840,0);//背景3this.bgt1.setPosition(0,0,0);this.bgt2.setPosition(1920,0);this.bgt3.setPosition(3840,0);///移动临界点this.criticalOne=this.bg2.x;this.criticalTwo=this.bg3.x;this.criticalThree=this.bg2.x+this.bg3.x;//执行背景移动入口 CCC update函数update(dt){MoveBackground();this.MoveBackgroundBG2(this.bgt1,this.bgt2,this.bgt3);this.MoveBackgroundBG2(this.bgm1,this.bgm2,this.bgm3);}MoveBackground();(){var isCanMove1=this.PlayerCamera.x>this.criticalOne;if(isCanMove1){                var curPos=this.criticalThree; //移动后的位置this.criticalOne=curPos+this.bg1.width;       //移动的临界点  this.bg1.setPosition(new cc.Vec2(curPos,0));this.MoveBgGround(this.ground1); }var isCanMove2=this.PlayerCamera.x>this.criticalTwo;if(isCanMove2){  var curPos2=this.criticalOne;this.criticalTwo=curPos2+this.bg1.width;        this.bg2.setPosition(new cc.Vec2(curPos2,0));this.MoveBgGround(this.ground2);}var isCanMove3=this.PlayerCamera.x>this.criticalThree;if(isCanMove3){                   var curPos=this.criticalTwo;this.criticalThree=curPos+this.bg1.width;this.bg3.setPosition(new cc.Vec2(curPos));this.MoveBgGround(this.ground3);}      },MoveBgGround(parentNode){var x=this.GetRandom(-200,200);var y=this.GetRandom(-500,50);parentNode.setPosition(x,y);},

一般呢，跑酷游戏的一层背景是不够的，想要让游戏跑酷更加真实，就需要设置三层背景，每一层的背景移动速度，从远到近 慢慢增加。

分别对应背景层的是 山，深林，小树

添加另外的两层外背景

    MoveBackgroundBG2(bg1,bg2,bg3){var isCanMove1=this.PlayerCamera.x>bg2.x+bg2.width/2;if(isCanMove1){           var postion=bg3.x+bg3.width-5;bg1.setPosition(new cc.Vec2(postion));}var isCanMove2=this.PlayerCamera.x>bg3.x+bg3.width/2;if(isCanMove2){   var postion=bg1.x+bg3.width-5;bg2.setPosition(new cc.Vec2(postion));}var isCanMove3=this.PlayerCamera.x>bg3.x+bg3.width*1.5;if(isCanMove3){                     var postion=bg2.x+bg1.width-5;bg3.setPosition(new cc.Vec2(postion));}          },

因为说到的速度要不一样所以还要做一步操作
要做到视觉差，就需要在移动的速度上做一个区分

 update(dt){var speed1=this.playerComponent.cameraSpeed/2;  //中间层var speed2=this.playerComponent.cameraSpeed/2+3; //最后一层this.bgm1.x+=speed1;this.bgm2.x+=speed1;this.bgm3.x+=speed1;this.bgt1.x+=speed2;this.bgt2.x+=speed2;this.bgt3.x+=speed2;},

背景移动完成了，开始设置地面

地板需要添加BoxCollider,需要有碰撞检测功能，在后续会有相关介绍

游戏二维码

微信平台

4399平台

4399游戏链接:http://www.4399.com/flash/203652.htm

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！