2048源码 cocos_怎样查看cocos creator cocos库源码 - CSDN
  • cocos creator的2048游戏源码,适合初学者学习,需要下载cocos creator后安装然后根据提示安装完成后,打开这个项目就可以尝试运行。
  • 先放上游戏体验的链接 Saber2pr/2048-typescript-cocoscreator 算法来自2048 游戏实现原理 算法看链接里就好,里面提供了最最核心的数学原理,就是不知道是哪位大佬想出来的,那位博主看起来也是转的。 言归正传...

    查看所有代码请点击 2048-typescript-cocoscreator

    先放上游戏体验的链接  Saber2pr/2048-typescript-cocoscreator

    算法来自2048 游戏实现原理

    算法看链接里就好,里面提供了最最核心的数学原理,就是不知道是哪位大佬想出来的,那位博主看起来也是转的。

    言归正传,我们该怎么把它做成游戏。

    先搭建一个这样子的场景

    中间的正方形节点就是2048卡片的容器

    然后我们写个接口,处理这个容器里节点的逻辑

    /*
     * @Author: AK-12 
     * @Date: 2018-11-02 13:06:06 
     * @Last Modified by: AK-12
     * @Last Modified time: 2018-11-03 19:03:38
     */
    export default interface ILayout {
      initEdge(size: {
        width: { start: number; end: number }
        height: { start: number; end: number }
      }): void
      draw(step?: number): void
      log(): void
    }
    

    分别是初始化边界方法,绘图方法,输出调试信息方法

    然后实现接口

    /*
     * @Author: AK-12 
     * @Date: 2018-11-01 20:07:29 
     * @Last Modified by: AK-12
     * @Last Modified time: 2018-11-03 20:14:09
     */
    import ILayout from './ILayout'
    import Model from './Model'
    import { visitArray, computed, judgePos } from './MathVec'
    import Data from './Data'
    /**
     *Block节点视图的逻辑
     *
     * @export
     * @class Layout
     * @implements {ILayout}
     */
    export default class Layout implements ILayout {
      private background: cc.Node
      private edge: {
        width: { start: number; end: number }
        height: { start: number; end: number }
      }
      private start: cc.Vec2
      private color = {
        2: cc.color(237, 241, 21, 255),
        4: cc.color(241, 180, 21, 255),
        8: cc.color(171, 241, 21, 255),
        16: cc.color(149, 160, 216, 255),
        32: cc.color(187, 149, 216, 255),
        64: cc.color(216, 149, 209, 255),
        128: cc.color(28, 118, 156, 255),
        256: cc.color(16, 74, 99, 255),
        512: cc.color(168, 85, 25, 255),
        1024: cc.color(236, 122, 38, 255),
        2048: cc.color(236, 86, 33, 255)
      }
      /**
       *Creates an instance of Layout.
       * @param {cc.Node} background
       * @param {number} offset
       * @param {number} [speed=0.2]
       * @memberof Layout
       */
      constructor(background: cc.Node) {
        this.background = background
        return this
      }
    
      /**
       *初始化边界
       *
       * @memberof Layout
       */
      public initEdge = (size: {
        width: { start: number; end: number }
        height: { start: number; end: number }
      }): Layout => {
        this.edge = size
        this.start = cc.v2(size.width.start, -size.height.start)
        return this
      }
      /**
       *根据矩阵绘制block组
       *
       * @param {number} [step=100]
       * @memberof Layout
       */
      public draw(step: number = 100): void {
        Model.getInstance().clearNodeList()
        let data = Data.getInstance().data
        // 遍历block组
        visitArray(data, (raw, col) => {
          if (data[raw][col] !== 0) {
            // 映射锚点位置
            let pos = cc.v2(this.start.x + step * col, this.start.y - step * raw)
            // 取对象池节点
            let block = Model.getInstance().getBlock()
            block.setParent(this.background)
            block.setPosition(pos)
            block.getChildByName('label').getComponent(cc.Label).string = String(
              data[raw][col]
            )
            block.color = this.color[String(data[raw][col])]
            Model.getInstance().saveNode(block)
          }
        })
      }
      /**
       *打印调试信息
       *
       * @memberof Layout
       */
      public log(): void {
        cc.log('nodelist:', Model.getInstance().NodeList.length)
      }
    }
    

    这里我只说一下其中的draw方法

    public draw(step: number = 100): void {
        // Model是个单例,封装了对象池的操作
        // 这里表示每次绘图前清楚掉上次的所有节点
        // 因为使用了对象池, 所以性能不会受太大影响
        Model.getInstance().clearNodeList()
    
        // Data也是个单例,内部封装了对矩阵(二维数组)的操作
        // 获取到当前的矩阵
        let data = Data.getInstance().data
    
        // 遍历block组
        // visitArray方法是一个反转控制的方法,内部是两层for的遍历,拿到矩阵的每个元素的位置(raw,col)注入到回调函数中
        visitArray(data, (raw, col) => {
    
          // 如果矩阵在(raw, col)处的值不为0, 则映射到layout容器的对应位置,生成一个节点
          if (data[raw][col] !== 0) {
    
            // 映射锚点位置
            let pos = cc.v2(this.start.x + step * col, this.start.y - step * raw)
    
            // 取对象池节点
            let block = Model.getInstance().getBlock()
    
            // 设置父节点为layout,加入节点树
            block.setParent(this.background)
    
            // 设置映射好的位置
            block.setPosition(pos)
    
            // 设置卡片显示的数字为矩阵(raw, col)处的值
            block.getChildByName('label').getComponent(cc.Label).string = String(
              data[raw][col]
            )
    
            // 根据矩阵(raw, col)处的值设置卡片的颜色
            block.color = this.color[String(data[raw][col])]
    
            // 保存一下节点的引用,用于下次draw时的重绘
            Model.getInstance().saveNode(block)
    
          }
        })
      }

    接下来要解决一个问题,也是另一个核心的问题,那就是怎么判断触摸的手势!以及对矩阵的操作!

     这里还是先大致写一个接口

    export default interface ITouchFront {
      submit(
        callbackLeft?: Function,
        callbackRight?: Function,
        callbackUp?: Function,
        callbackDown?: Function
      ): ITouchFront
      listen(): void
    }
    

    分别是注册触摸回调的方法,启动监听的方法。

    然后实现接口

    /*
     * @Author: AK-12 
     * @Date: 2018-11-01 13:31:42 
     * @Last Modified by: AK-12
     * @Last Modified time: 2018-11-03 19:25:20
     */
    import ITouchFront from './ITouchFront'
    /**
     *触摸方向执行对应回调
     *
     * @export
     * @class TouchFront
     * @implements {ITouchFront}
     */
    export default class TouchFront implements ITouchFront {
      private node: cc.Node
      private offset: number
      private delta: number
      private _lock: number
    
      private callbackLeft: Function
      private callbackRight: Function
      private callbackUp: Function
      private callbackDown: Function
    
      /**
       *Creates an instance of TouchFront.
       * @param {cc.Node} node 监听节点
       * @param {number} [offset=100] 触摸偏移 ? 100
       * @param {number} [delta=200] 灵敏度 ? 200
       * @memberof TouchFront
       */
      constructor(node: cc.Node, offset: number = 100, delta: number = 200) {
        this.node = node
        this.offset = offset
        this._lock = 0
        this.delta = delta
      }
      /**
       *注册手势回调
       *
       * @memberof TouchFront
       */
      public submit = (
        callbackLeft?: Function,
        callbackRight?: Function,
        callbackUp?: Function,
        callbackDown?: Function
      ): TouchFront => {
        this.callbackLeft = callbackLeft
        this.callbackRight = callbackRight
        this.callbackUp = callbackUp
        this.callbackDown = callbackDown
        return this
      }
      /**
       *监听触摸
       *
       * @memberof TouchFront
       */
      public listen = (): void => {
        let originPos: cc.Vec2
        this.node.on(
          cc.Node.EventType.TOUCH_START,
          touch => (originPos = touch.getLocation())
        )
        this.node.on(cc.Node.EventType.TOUCH_MOVE, touch => {
          this._lock++
        })
        this.node.on(cc.Node.EventType.TOUCH_END, touch => {
          this._lock < this.delta
            ? this.testPos(originPos, touch.getLocation())
            : null
          this._lock = 0
        })
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, touch => {
          this._lock < this.delta
            ? this.testPos(originPos, touch.getLocation())
            : null
          this._lock = 0
        })
      }
      /**
       *检测偏移执行回调
       *
       * @private
       * @memberof TouchFront
       */
      private testPos = (originPos: cc.Vec2, touchPos: cc.Vec2): void => {
        if (
          Math.abs(touchPos.x - originPos.x) < this.offset &&
          Math.abs(touchPos.y - originPos.y) < this.offset
        ) {
          return
        }
        if (
          Math.abs(touchPos.x - originPos.x) > Math.abs(touchPos.y - originPos.y)
        ) {
          if (touchPos.x - originPos.x > this.offset) {
            !!this.callbackRight ? this.callbackRight() : null
          } else if (touchPos.x - originPos.x < -this.offset) {
            !!this.callbackLeft ? this.callbackLeft() : null
          }
        } else {
          if (touchPos.y - originPos.y > this.offset) {
            !!this.callbackUp ? this.callbackUp() : null
          } else if (touchPos.y - originPos.y < -this.offset) {
            !!this.callbackDown ? this.callbackDown() : null
          }
        }
      }
    }
    

    看一下listen方法

    /**
       *监听触摸
       *
       * @memberof TouchFront
       */
    
      // 由于不是纯函数,内联了大量回调函数,所以定义listen为箭头函数
      public listen = (): void => {
        
        // 记录触摸开始的点
        let originPos: cc.Vec2
        this.node.on(
          cc.Node.EventType.TOUCH_START,
          touch => (originPos = touch.getLocation())
        )
    
        // this._lock是一个标记值,用来防止手抖动产生的连续回调
        this.node.on(cc.Node.EventType.TOUCH_MOVE, touch => {
          this._lock++
        })
    
        // 触摸结束和取消的逻辑处理一样
        this.node.on(cc.Node.EventType.TOUCH_END, touch => {
          
          // 判断触摸滑动距离,太短暂不予处理
          // 回调testPos方法,传入触摸结束的点
          this._lock < this.delta
            ? this.testPos(originPos, touch.getLocation())
            : null
          this._lock = 0
        })
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, touch => {
          this._lock < this.delta
            ? this.testPos(originPos, touch.getLocation())
            : null
          this._lock = 0
        })
      }

    然后解释一下核心的testPos检测触摸方向方法

    /**
       *检测偏移执行回调
       *
       * @private
       * @memberof TouchFront
       */
      // 有大量回调,所以也是箭头函数
      private testPos = (originPos: cc.Vec2, touchPos: cc.Vec2): void => {
    
        // this.offset是一个偏移量,如果触摸偏移小于偏移量则跳过此次回调
        if (
          Math.abs(touchPos.x - originPos.x) < this.offset &&
          Math.abs(touchPos.y - originPos.y) < this.offset
        ) {
          return
        }
    
        // 判断触摸偏移在x和y方向上的优先级
        if (
          Math.abs(touchPos.x - originPos.x) > Math.abs(touchPos.y - originPos.y)
        ) {
    
          // 执行x方向的回调        
          // 如果是正偏移,则执行callbackRight,否则callbackLeft
          if (touchPos.x - originPos.x > this.offset) {
            
            //判断callbackRight 是否定义
            !!this.callbackRight ? this.callbackRight() : null
          
          } else if (touchPos.x - originPos.x < -this.offset) {
            !!this.callbackLeft ? this.callbackLeft() : null
          }
        } else {
    
          // 执行y方向的回调        
          // 如果是正偏移,则执行callbackUp,否则callbackDown
          if (touchPos.y - originPos.y > this.offset) {
            !!this.callbackUp ? this.callbackUp() : null
          } else if (touchPos.y - originPos.y < -this.offset) {
            !!this.callbackDown ? this.callbackDown() : null
          }
        }
      }

    基本最难的部分就是这些了

    剩下其他的类和方法请访问我的github吧

    Saber2pr/2048-typescript-cocoscreator

     

     

     

    展开全文
  • cocos-js原生小游戏2048游戏源码以及全套素材资源,可以查看预览运行效果。
  • 2048源码分享

    2015-09-19 15:01:25
    2048疯狂版本源码分享

    这是app menu界面
    **这是app menu界面**

    这是app基础模式
    **这是app基础模式**

    这是app进入疯狂模式后的设置界面
    **这是app进入疯狂模式后的设置界面**

    这是6 X 6模式
    **这是6 X 6模式**

    这是高分记录界面
    **这是高分记录界面**

    这是游戏帮助界面
    **这是游戏帮助界面**

    2048源码下载

    展开全文
  • lua文件直接放到cocos2dx的例子HelloLua项目中即可 参考目录 E:\cocos2d-x-2.2\samples\Lua\HelloLua\Resources 窗口大小 480 * 640
  • 捕鱼源码 cocos2d-x

    2020-07-21 09:59:26
    捕鱼源码 cocos2d-x
  • 15款Cocos2d-x游戏源码

    2017-11-30 17:52:12
    (1)用cocos2d-x开发的中国象棋游戏源码 使用Cocos2d-X2.2.3开发的一款中国象棋游戏,游戏中可以实现、新局面、悔棋、游戏音乐、胜利后会显示游戏结果。 源码下载:http://www.okbase.net/file/item/27881 ...

    (1)用cocos2d-x开发的中国象棋游戏源码
    使用Cocos2d-X2.2.3开发的一款中国象棋游戏,游戏中可以实现、新局面、悔棋、游戏音乐、胜利后会显示游戏结果。


    源码下载:http://www.okbase.net/file/item/27881

     

    (2)Cocos2dx开发的一个横版过关游戏Demo源码
    来自游戏开发基友群听雨分享的例子,一个横版过关游戏,有带简单ai的敌人,有横版的地图,有操控摇杆,主角的攻击效果,有很多新鲜的东 
    西。


    源码下载:http://www.okbase.net/file/item/27882

     

    (3)Cocos2d-x游戏《忍者飞镖打幽灵》源码
    初次接触Cocos2d-x的学习demo,发射飞镖击中飞过来的幽灵,可以作为初学参考。
    环境: cocos2dx2.2+vs2012


    源码下载:http://www.okbase.net/file/item/27890

     

    (4)Cocos2dx 跑酷类游戏源代码《萝莉快跑》
    跑酷类游戏,画面精美,如果Cocos2dx使用2.2版本,可能需要修改加载声音资源类。十分简单。


    源码下载:http://www.okbase.net/file/item/27892

     

    (5)MoonWarriors雷电战神传说Cocos2d-X游戏源代码
    因为最近在研究cocos2d-x,前几日看到cocos2d-html5中有款飞机游戏MoonWarriors,想着能不能用cocos2d-x来做重构,一方面可以练习一下 
    这种飞行游戏的编程思路,另一方面也可以加深对cocos2d-x的了解。


    源码下载:http://www.okbase.net/file/item/27071

     

    (6)Cocos2d-x 3.x编写的3D跑酷游戏源码
    这是一个Cocos2d-x 3.3制作的3d跑酷demo,大家可以学习下Cocos2d-x 3.3 提供对Sprite3D的支持,包含教程。
    教程主要是通过分析一个跑酷的Demo,来向大家简单的介绍一下Cocos2d-x 3.3 里对3D游戏开发提供的一些功能,并介绍一下他们的使用方法。


    源码下载:http://www.okbase.net/file/item/27893

     

    (7)开心泡泡猫Cocos2d-x源码
    开心泡泡猫是一款一群喵星人闯入了风靡全球的泡泡龙游戏,游戏将将弹珠台的概念结合至传统泡泡类游戏之中,Cocos2D-X开发。

    源码下载:http://www.okbase.net/file/item/27900

     

    (8)Cocos2dx仿《王者之剑》游戏源码
    《王者之剑》作为国内首款横版即时格斗类手机网游,以欧洲圆桌骑士、亚瑟王的故事为背景,以精美细腻的美漫暗黑画风,再现了这段传奇史 
    诗。本代码是仿《王者之剑》,仅供学习参考。


    源码下载:http://www.okbase.net/file/item/27936

     

    (9)Cocos2dx手绘搞怪类游戏《奇怪大冒险》源码
    Cocos2dx 2.2游戏源码:奇怪大冒险,(原作熊同学) 质量很好,使用vs2013和cocos2dx 2.2打开即可编译运行。


    源码下载:http://www.okbase.net/file/item/27942

     

    (10)Cocos2dx游戏《喵汪大战》源码
    类似打飞机的猫狗大战游戏。
    开发环境:vs2012,cocos2dx2.2


    源码下载:http://www.okbase.net/file/item/27943

     

    (11)山寨版FlappyBird游戏源代码(cocos2dx)
    这是仿制的FlappyBird游戏,作者为xiaohexuehe。
    包括两个版本的代码:Unity版和cocos2dx版。
    FlappyBird不用多说了,一款极其简单,但是又很火的游戏。我在得知这款疯狂的游戏后,就有一种把它重现的冲动,然后花了我4个多小时, 
    产生出了一个可以玩的版本,分享给大家。

    源码下载:http://www.okbase.net/file/item/25707

     

    (12)三国策略战争游戏cocos2d-x源码
    利用 cocos2d-x 实现一个三国战争游戏。 

    作者说:搜到一个开源的半成品游戏代码(游戏主体部分没有),但最高兴的是有不错的资源(没有美工引发头疼问题)。游戏虽小,地图只有 
    一张,可玩,还会完善,希望做成个dota风格,外加塔防玩法的游戏。

    源码下载:http://www.okbase.net/file/item/27070

     

    (13)Cocos2d-x手机单机斗地主源码
    利用cocos2d-x实现手机单机斗地主游戏。 
    完成了斗地主的基本游戏规则,洗牌-发牌-出牌-压牌-判断胜负(计分)。


    源码下载:http://www.okbase.net/file/item/26919

     

    (14)cocos2d-x 多平台高仿微信打飞机源代码
    利用 cocos2d-x 实现多平台高仿微信打飞机游戏。目的是学习 Cocos2d-x 如何支持多平台开发。


    源码下载:http://www.okbase.net/file/item/24078

     

    (15)cocos2d-x俄罗斯方块游戏源代码
    基于cocos2d-x开发的俄罗斯方块游戏,是本人在学习cocos2d-x引擎时,在win7下使用vs2010的C++做的。
    附上完整的源代码。请根据自己的cocos2d-x安装路径更改vs工程项目的属性设置,即可调试运行。该代码仅供cocos2d-x游戏开发爱好者研究学习。

    源码下载:http://www.okbase.net/file/item/27944

    展开全文
  • 由于受论坛修改时间限制,后续不能修改的情况下,开新帖分享新源码和教程。 https://forum.cocos.com/t/cocoscreator/80131 https://forum.cocos.com/t/cocoscreator/83015 关注微信公众号公众号,根据提示获取...

    由于受论坛修改时间限制,后续不能修改的情况下,开新帖分享新源码和教程。

    https://forum.cocos.com/t/cocoscreator/80131

    https://forum.cocos.com/t/cocoscreator/83015

     

    关注微信公众号公众号,根据提示获取完整游戏源码和游戏开发教程。

     

    以上是已有游戏源码,由于游戏项目较多,后期还会不定期更新,需要先关注公众号,再获取对应游戏的源码工程,使用CocosCreator2.0.8,项目可以直接打开使用。已有的游戏源码有:动物同化、左右跳、重力球、推箱子、扫雷、消消乐、六边形消除、数钱、打飞机、跑酷、杆子游戏、打地鼠、口红机。大部分都是自己开发的,少部分拿的网上改编的。

    项目中的游戏资源时网络上搜集的,游戏效果如下:

    猴子吃香蕉
    动物同化
    左右跳
    重力球
    虚拟摇杆
    扫雷
    六边形
    数钱
    打飞机
    跑酷
    打地鼠
    口红机
    撑杆跳
    展开全文
  • cocos2dx 3.17 写的2048游戏,开发语言是C++,使用windows10+VS2017开发,楼主测试可以编译安卓apk,只上传了class和resource文件夹,大家自己新建个项目添加进去吧。 已知bug: 连续快速移动方块数字会变大,正常...
  • cocos2d制作的2048游戏源码,用的版本是3.x版本,加压后直接加载进去Classes中的代码,替换掉原来的资源文件,然后自己冲洗编译一下就可以了
  • 刚学Lua, 写个脚本试试看 [img=...实现了2048的游戏逻辑,触摸事件,动画等 直接将248.lua文件放到cocos2dx的HelloLua项目中即可,窗口大小 480 * 640 下载地址:[url=http://downl
    实现了2048的游戏逻辑,触摸事件,动画等
    直接将248.lua文件放到cocos2dx的HelloLua项目中即可,窗口大小 480 * 640
    下载地址:点击打开链接
    运行效果

    展开全文
  • Cocos2d-x 3.x版2048游戏开发 本篇博客给大家介绍如何快速开发2048这样一款休闲游戏,理解整个2048游戏的开发流程,从本篇博客你将可以学习到以下内容:2048游戏的逻辑Cocos2d-x中上下左右手势的识别游戏中卡片类的...
  • Cocos2d-X斗地主游戏完整源码,游戏分有新手场,初级场,中级场,高级场和大师场5个级别,画面非常精美。。
  • cocos creator引擎源码

    2020-07-30 23:32:02
    cocos creator引擎源码,API对中高级人来说,是个不错的选择。
  • 精品糖果三消游戏 cocos2dx3.10 线下 赚钱 精品糖果三消游戏
  • cocos creator开发的开心消消乐,需要的小伙伴可以下载研究一下。
  • cocos2d_x 捕鱼达人源码

    2020-07-28 23:32:56
    cocos2d_x 捕鱼达人源码 在2.0.3 2.0.4下编译通过
  • cocos2d-x 2048小游戏源码+素材
  • 多个cocos creator2.0版本源码demo分享
  • cocos creator完整牛牛前端源码
1 2 3 4 5 ... 20
收藏数 16,859
精华内容 6,743
关键字:

2048源码 cocos