CocosCreator实战项目1：忍者跳跳跳

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

摘要
正文
- 使用版本
- 游戏截图
- 游戏资源面板
- 脚本关系
- 代码部分
结语

摘要

CocosCreator模仿4399忍者跳跳跳小游戏原版游戏链接：
忍者跳跳跳

正文

使用版本

CocosCreator2.4.5版本

游戏截图

游戏资源面板

脚本关系

代码部分

util.ts：负责初始化数据和公共方法

export class util{public static readonly maxY = -500      //柱子最高点public static readonly minY = -750      //柱子最低点public static readonly maxX = 400       //柱子平面最宽点public static readonly minX = 250       //柱子平面最窄点public static readonly defaultPos = new cc.Vec2(-250,-500)      //柱子默认初始坐标public static readonly moveSpeed = 350  //柱子移动速度//麒麟子版适配分辨率public static resize() {var cvs = cc.find('Canvas').getComponent(cc.Canvas);//保存原始设计分辨率，供屏幕大小变化时使用var dr = cvs.designResolution;var s = cc.view.getFrameSize();var rw = s.width;var rh = s.height;var finalW = rw;var finalH = rh;if((rw/rh) > (dr.width / dr.height)){//!#zh: 是否优先将设计分辨率高度撑满视图高度。 *///cvs.fitHeight = true;//如果更长，则用定高finalH = dr.height;finalW = finalH * rw/rh;}else{/*!#zh: 是否优先将设计分辨率宽度撑满视图宽度。 *///cvs.fitWidth = true;//如果更短，则用定宽finalW = dr.width;finalH = rh/rw * finalW;}cvs.designResolution = cc.size(finalW, finalH);cvs.node.width = finalW;cvs.node.height = finalH;}
}

gameManager.ts:挂载在游戏全局，实现游戏的初始化

onLoad () {util.resize();cc.director.getCollisionManager().enabled = true;this.startPanel.init(this);this.bgManager.init(this);this.uiManager.init(this);}startGame(){if(this.isStart){this.uiManager.initScene()}}failGame(){this.failPanel.init()}

uiManager.ts:负责游戏界面的初始化以及游戏逻辑,具体代码就不贴了，有兴趣就可以到gitee下载后看下代码

 //初始化界面initScene(){this.lastPillarPos = util.defaultPosthis.isCreatePillarState = truelet node = cc.instantiate(this.pillarPre)node.x = -450node.y = -500node.parent = this.uiWrapperthis.initTween(this.ninja)this.initTween(node)node.getComponent('pillar').init(this)this.ninja.getComponent('ninja').init(this)this.initPillarPool()this.node.on('touchstart',this.touchStart,this)this.node.on('touchend',this.touchEnd,this)this.node.on('touchcanel',this.touchEnd,this)}// 创建柱子private createPillar(){if(this.lastPillarPos.x > cc.winSize.width/2){this.isCreatePillarState = falsereturn}let node:cc.Node = null;if(this.pillarPool.size()>0){node = this.pillarPool.get()}else{node = cc.instantiate(this.pillarPre)}node.y = Math.random()*(util.maxY - util.minY) + util.minYnode.x = this.lastPillarPos.x + Math.random()*(util.maxX - util.minX) + util.minXnode.parent = this.uiWrappernode.getComponent('pillar').init(this)this.lastPillarPos = new cc.Vec2(node.x,node.y)}。。。。。。。。。。。。。。。。。etc。。。。。。。。。。。。。。。。。。。。

4.startPanel.ts: 游戏开始面板，点击开始按钮进入游戏

  init(game:gameManager){this.game = game}onLoad () {this.startBtn.on('touchstart',this.touchStart,this)}private touchStart(){cc.tween(this.startBtn).to(0.1,{scale:0.9}).to(0.1,{scale:1}).call(()=>{this.node.active = falsethis.game.isStart = truethis.game.startGame()}).start()}

5.failPanel.ts:游戏失败面板，设置显示后初始化数据和面板

 // 初始化失败界面init(){this.node.active = truelet curScoreText = cc.sys.localStorage.getItem('curScore')this.curScore.string = curScoreTextthis.bestScore.string = cc.sys.localStorage.getItem('bestScore')this.restartBtn.on('touchstart',this.restartTouch,this)this.strutBtn.on('touchstart',this.strutTouch,this)if(+curScoreText>5 && +curScoreText<10){cc.resources.load('6408',cc.SpriteFrame,(err,res)=>{this.Level.getComponent(cc.Sprite).spriteFrame = res})}else if(+curScoreText>=10){cc.resources.load('64014',cc.SpriteFrame,(err,res)=>{this.Level.getComponent(cc.Sprite).spriteFrame = res})}

结语

游戏总体难度不大，代码行数只有两百行差不多，感兴趣的小伙伴可以到gitee上下载代码研究一下，函数之间都做了注释，容易看懂，顺便点个赞哈！！
gitee链接

CocosCreator实战项目1：忍者跳跳跳相关推荐

干货满满的 Python 实战项目，点赞收藏
作者 | 俊欣来源 | 关于数据分析与可视化今天小编来给大家介绍3个干货满满的计算机视觉方向的Python实战项目,主要用到的库有 opencv-python numpy pillow 要是大家所 ...
【Python入门】你值得拥有的这八个实用工具安装包与实战项目
1.推荐3个画图工具:几个常用的画图工具,这类工具可以帮助理清楚思路,像学习框架也可以用这些做出来. 2.推荐5个实用的编辑工具:工欲善其事必先利其器. 3.推荐4个优秀的实战项目:内功修炼得好,写代 ...
实战项目 10: 货物清单应用
这篇文章分享我的 Android 开发(入门)课程的最后一个实战项目:货物清单应用.这个项目托管在我的 GitHub 上,具体是 InventoryApp Repository,项目介绍已详细写在 ...
分享3个干货满满的Python实战项目，点赞收藏
今天小编来给大家介绍3个干货满满的计算机视觉方向的Python实战项目,主要用到的库有 opencv-python numpy pillow 要是大家所配置的环境当中没有这几个模块的话,就需要先用pi ...
.NET Core实战项目之CMS 第三章入门篇-源码解析配置文件及依赖注入
写在前面上篇文章我给大家讲解了ASP.NET Core的概念及为什么使用它,接着带着你一步一步的配置了.NET Core的开发环境并创建了一个ASP.NET Core的mvc项目,同时又通过一个实战 ...
08Vue.js快速入门-Vue综合实战项目
8.1. 前置知识学习 npm 学习官方文档推荐资料 npm入门 npm介绍需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...
最新Spring Boot实战项目（权限后台管理系统）详解
Spring Boot实战项目 - 权限后台管理系统简介这是一套基于spring boot 2.16.shiro.jwt.redis.swagger2.mybatis .thymeleaf.lay ...
Vue3+node.js网易云音乐实战项目(五)
推荐歌单详细页面顶部 1.推荐歌单详细页面 1.1.导航条和背景 1.2.头像和简介 1.3.头部完整代码 1.4.链接实现效果 1.推荐歌单详细页面 1.1.导航条和背景推荐歌单页面做好后,我们 ...
Apicloud开发新闻类App实战项目-老孟编程
Apicloud开发新闻类App实战项目-老孟编程课程名称:Apicloud开发新闻类App实战项目讲师:孟老师课程介绍: 技术点包括: 1:vue实现apicloud开发脚手架--超级实用通用 ...