初学者Cocos(TypeScritp)简单实现2048游戏

最新推荐文章于 2024-05-13 19:00:19 发布
最新推荐文章于 2024-05-13 19:00:19 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： Cocos 文章标签： Cocos TypeScritp 2048
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sam_ONE/article/details/85322118
版权

       因为一些原因最近比较空闲，本来一直以来的目标是想向着Unity大神进发的，抱着毕其一生的心态，毕竟Unity的前景摆在眼前，可现在闲着也是闲着就玩一下Cocos，还用是TypeScript语言，哈哈！在我一个前辈的建议下先做了个程序员都知道的2048小游戏，说真的2048这个游戏我之前就看人玩过，自己从来没有上过手，连规则都不知道。。所以还专门下了个玩了会才开始动手。

原谅我把这个技术博客写成了个人生活日记一般了。。哈哈！真是闲着蛋疼又很久没人没地和人扯淡了，就当在这发泄一下了！既然这么多废话，那我索性把它当作初学者的心得写吧。

用cocos前，当前还是先把整个官方文档都过了一边啦，因为有Unity的开发经验，所以文档里的大部分功能基本都能理解，看起来挺轻松的。然后我就跑去看Js的官方文档了。。。没错。。我还粗略看了一边js文档。。因为我开始并不知道可以用TS，哈哈哈！最后我还是又把TS的官方文档粗略的看完了一边，真的是粗略，甚至还没Js文档看得仔细，我就动手用Ts写这个游戏了。我想，一定是那个啥，二八原则！80%的问题都可以用20%的技术解决，哈哈哈哈！不扯，真正的原因是2048用的Ts语言的东西不多，后面要写复杂的游戏肯定还有坑要踩。

好了先上结果吧：

 

确实是简单的实现，其他UI部分都没有的。

下面上代码：

核心部分

import GameCtrl from './GameCtrl';

const {ccclass, property} = cc._decorator;

@ccclass
export default class GameCore{

    private static _instance : GameCore = null;
    public static Instance():GameCore{
        if(GameCore._instance ===null){
            GameCore._instance = new GameCore();
        }
        return GameCore._instance;
    }

    map : Array<Array<any>> = new Array<Array<any>>();
    mapContrast : Array<Array<any>> = new Array<Array<any>>();
    SpaceAmount : number;    //剩余空格数量

    Init(){

        this.SpaceAmount = 0;

        let x : number = Math.random() * 4;
        let y : number = Math.random() * 4;

        x = Math.floor(x);
        y = Math.floor(y);

        for(let i=0; i < 4; i ++)
        {
            this.map[i] = [];
            this.mapContrast[i] = [];
            for(let j=0; j < 4; j ++)
            {
                this.map[i][j] = 0;
                this.mapContrast[i][j] = 0;
            }
        }
        
        console.log(x +" <---> " + y);
        this.map[x][y] = 2;
        this.mapContrast[x][y] = 2;

        GameCtrl.ShowUI(this.map);

        this.map.forEach((val,idx,array)=>{

            console.log(idx +" --- " + val);
        });
    }

    onKeyUp(event){

        //console.log("uppppppp");
        this.SpaceAmount = 0;
        switch(event.keyCode)
        {
            case cc.macro.KEY.up:
            this.MergeToUp();
            break;

            case cc.macro.KEY.down:
                this.MergeToDown();
            break;

            case cc.macro.KEY.left:
                this.MergeToLeft();
            break;

            case cc.macro.KEY.right:
                this.MergeToRight();
            break;
        
        }
        this.AddNewNumber();

        GameCtrl.ShowUI(this.map);

        this.map.forEach((val, idx, ar)=>{
    
            console.log(idx +" === " + val);
        });
    }

    //增加新数字
    AddNewNumber(){

        if(this.SpaceAmount == 0)
        {
            GameCtrl.Instance().GameOver();
            return;
        }

        let isCanAdd = false;
        
        let dic: { [key: number]: cc.Vec2; } = {};
        let idx = 0;

        for(let i =0; i < 4; i++)
        {
            for(let j = 0; j < 4; j++)
            {
                if(this.map[i][j] == 0)
                {
                    //记录空白处的XY，即数组中空白处的xy值
                    dic[idx] = new cc.Vec2(i, j);
                    idx +=1;
                }
                if(this.map[i][j] != this.mapContrast[i][j])
                {
                    //和记录的对照数组做对比，与上一次的数组出现不同则说明可以增加数字
                    isCanAdd = true;
                }
            }
        }

        if(isCanAdd)
        {
            //随机
            let randomIdx = Math.floor(Math.random() * idx);
            //前提是存在空白的xy
            if(dic != null && dic.hasOwnProperty(randomIdx))
            {
                this.map[dic[randomIdx].x][dic[randomIdx].y] = 2;
                console.log(" ## random add --> " + dic[randomIdx].x + dic[randomIdx].y);
            }
        }
    }

    MergeToUp(){
        for(let i = 0; i < 4; i++)
        {
            let temp : number[] = [0,0,0,0];
            
            for(let j=0; j < 4; j++)
            {
                temp[j] = this.map[j][i];
            }

            //重新赋值每列的数
            let newArr = this.MergeArr(temp);

            for(let k = 0; k < 4; k++)
            {
                this.map[k][i] = newArr[k];
            }

        }

        // this.map.forEach((val, idx, ar)=>{

        //     console.log(idx +" === " + val);

        // });
    }

    MergeToDown(){
        for(let i = 0; i < 4; i++)
        {
            let temp : number[] = [0,0,0,0];
            
            let tempidx = 0;
            for(let j= 3; j >=0; j--)
            {
                temp[tempidx] = this.map[j][i];
                tempidx +=1;
            }

            //重新赋值每列的数
            let newArr = this.MergeArr(temp);

            tempidx = 0;
            for(let k = 3; k >=0; k--)
            {
                this.map[k][i] = newArr[tempidx];
                tempidx +=1;
            }

        }

        // this.map.forEach((val, idx, ar)=>{

        //     console.log(idx +" === " + val);

        // });
    }

    //向左合并
    MergeToLeft(){

        for(let i = 0; i < 4; i ++)
        {
            //重新赋值每列的数
            this.map[i] = this.MergeArr(this.map[i]);
        }

        // this.map.forEach((val, idx, ar)=>{

        //     console.log(idx +" === " + val);

        // });
    }

    //向右合并
    MergeToRight(){

        for(let i = 0; i < 4; i++)
        {
            let temp : number[] = [0,0,0,0];
            
            let tempidx = 0;
            for(let j = 3; j >=0; j--)
            {
                temp[tempidx] = this.map[i][j];
                tempidx +=1;
            }

            //重新赋值每列的数
            let newArr = this.MergeArr(temp);

            tempidx = 0;
            for(let k = 3; k >=0; k--)
            {
                this.map[i][k] = newArr[tempidx];
                tempidx +=1;
            }

        }

        // this.map.forEach((val, idx, ar)=>{
    
        //     console.log(idx +" === " + val);
    
        // });
    }

    //核心合并
    MergeArr (arr : Array<Number>)
    {
        let myArr : Array<Number> = [0,0,0,0];
        let myArrIdx = 0;
        let isCompara = false;

        for(let i = 0; i < 4; i ++)
        {
            if(arr[i] >0)
            {
                if(isCompara)
                {
                    //可以比较则比较是否相等
                    if(myArr[myArrIdx -1] == arr[i])
                    {
                        myArr[myArrIdx -1] = (arr[i] as number) * 2;
                        isCompara = false;
                        continue;
                    }
                }
                myArr[myArrIdx] = arr[i];
                myArrIdx +=1;
                //新加入的数字，可以进行比较
                isCompara = true;
            }
        }

        //记录空格数量
        this.SpaceAmount += 4 - myArrIdx;
        
        return myArr;   
    }

}

游戏控制部分

import GameCore from './GameCore';
import ShopCtrl from './ShopCtrl';

const {ccclass, property} = cc._decorator;

@ccclass
export default class GameCtrl extends cc.Component {

    private static _instance : GameCtrl = null;
    public static Instance():GameCtrl{
        return GameCtrl._instance;
    }

    @property(cc.Node)
    shopsRoot : cc.Node = null;

    // @property(cc.Label)
    // allShops : cc.Label[] = [];

    showShops: cc.Label[] = [];

    shopCtrls : ShopCtrl[] = [];

    onLoad () {

        GameCtrl._instance = this;
        //获取所有shopLab
        this.showShops = this.shopsRoot.getComponentsInChildren(cc.Label);
        this.shopCtrls = this.shopsRoot.getComponentsInChildren(ShopCtrl);

        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,this.onKeyUp, this);
        // FBInstant
        
    }

    start()
    {
        GameCore.Instance().Init();
    }

    onDestroy(){
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP,this.onKeyUp, this);
    }

     
    onKeyUp(event){

        console.log("uppppppp");
        GameCore.Instance().SpaceAmount = 0;
        switch(event.keyCode)
        {
            case cc.macro.KEY.up:
                GameCore.Instance().MergeToUp();
            break;

            case cc.macro.KEY.down:
                GameCore.Instance().MergeToDown();
            break;

            case cc.macro.KEY.left:
                GameCore.Instance().MergeToLeft();
            break;

            case cc.macro.KEY.right:
                GameCore.Instance().MergeToRight();
            break;
        
        }
        GameCore.Instance().AddNewNumber();

        GameCtrl.ShowUI(GameCore.Instance().map);
        
        // GameCore.Instance.map.forEach((val, idx, ar)=>{
    
        //     console.log(idx +" === " + val);
    
        // });
    }

    GameOver(){
        console.log(" ~~~~~ game over ~~~~~");
    }

    static ShowUI(Arr : Array<Array<any>>){

        let idx = 0;
        for(let i = 0; i < 4; i++)
        {
            for(let j = 0; j < 4; j ++)
            {
                //this._instance.showShops[idx].string = Arr[i][j];
                this._instance.shopCtrls[idx].showNumber(Arr[i][j]);
                idx +=1;
            }
        }
    }

    // update (dt) {}
}

方格控制脚本，我习惯每个方格挂脚本，传参数让它自己管理


const {ccclass, property} = cc._decorator;

@ccclass
export default class ShopCtrl extends cc.Component {

    label: cc.Label = null;

    // @property(cc.Sprite)
    bg: cc.Node = null;

    // LIFE-CYCLE CALLBACKS:

    onLoad () {

        this.label = this.node.getComponentInChildren(cc.Label);
        this.bg = this.node;
        
    }

    showNumber(number : number)
    {
        this.label.string = number.toString();

        let col = cc.Color.WHITE;

        switch(number)
        {
            case 0 :

            break;
            case 2 :
            col = cc.Color.YELLOW;
            break;
            case 4 :
            col = cc.Color.BLUE;
            break;
            case 8 :
            col = cc.Color.CYAN;
            break;
            case 16 :
            col = cc.Color.GRAY;
            break;
            case 32:
            col = cc.Color.GREEN;
            break;
            case 64:
            col = cc.Color.MAGENTA;
            break;
            case 128:
            col = cc.Color.ORANGE;
            break;
            case 256:
            col = cc.Color.RED;
            break;
            case 512:
            col = cc.Color.YELLOW;
            break;
            case 1024:
            col = cc.Color.GREEN;
            break;
            case 2048:
            col = cc.Color.TRANSPARENT;
            break;

        }
      
        this.bg.color = col;

    }
}

最后，结束本并没有很好的做好判断，只是粗略的写了下。

Sam_ONE
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
cocos creator 2048源文件
12-11
cocos creator 和 ts 开发的2048消除游戏，玩法简单，所以实现的逻辑页稍微简单，适合新手作为培养逻辑的案例。
Cocos Creator 游戏开发2048视频教程（从软件安装到最终打出游戏安装包APk）
03-14
本课程以实战为主，游戏中需要什么功能，我们就讲解相应的知识点，这样学到的知识会马上用起来也就不会枯燥。本课程讲解相当完整，从最基础的软件安装开始，到最后打出安卓apk，一套完整的课程讲解。购买了本课程，可以在课件下载一栏，下载本课程中所用到的软件开发的安装包，和每一课时相关的完整项目。
Cocos 2048从创建到发布上线
吃糖牙疼的博客
05-13 401
cocos创建小游戏，2048
CocosCreator | 2048使用Typescript实现及原理
u011607490的博客
11-03 3442
查看所有代码请点击 2048-typescript-cocoscreator 先放上游戏体验的链接  Saber2pr/2048-typescript-cocoscreator 算法来自2048 游戏实现原理 算法看链接里就好，里面提供了最最核心的数学原理，就是不知道是哪位大佬想出来的，那位博主看起来也是转的。 言归正传，我们该怎么把它做成游戏。 先搭建一个这样子的场景 中间的正方...
[游戏开发]2048 游戏实现
Blue_carrot_的博客
04-06 497
2048的C#From项目，以及TS的2048核心代码实现
1.用CocosCreator开发拼图小游戏——基础问题
MS1021172013的博客
05-17 1456
上一篇忘说道，该系列严格意义上对纯新手不太友好，因为不会较系统的过一遍怎么开发拼图小游戏，更多的只是提下思路，说一下里面的关键实现方法。如果纯新手有需求麻烦私聊在下。 上一篇说道，做一款拼图小游戏，需要解决的基础问题有： 1）图片的处理，是一开始就将图片用切图软件切好，还是通过代码来实现图片切割效果； 2）块图片的顺序打乱； 3）如何判断图片拼回了原样。 那么顺序了解下上面说的问题。 一、图片的处理，是一开始就将图片用切图软件切好，还是通过代码来实现图片切割效果。 首先是根据项目需求来看，如果需求是： “要
cocos-js小游戏2048游戏源码以及素材
03-18
本篇将深入探讨使用cocos-js实现的2048小游戏的源码结构、素材应用以及游戏机制。 首先，cocos-js是Cocos Creator的JavaScript版本，它是一个强大的2D游戏开发框架，提供了一套完整的图形渲染、物理引擎、动画编辑...
cocos creator的2048游戏源码
11-01
通过学习Cocos Creator的2048游戏源码，初学者不仅能掌握基本的游戏开发流程，还能了解到如何利用Cocos Creator的特性来实现复杂的游戏逻辑。同时，这也是一次提升问题解决能力和编程技巧的好机会。在实践中，你可以...
基于cocos2dx平台的2048游戏
06-13
在Cocos2dx平台上实现2048游戏，主要涉及以下几个关键知识点： 1. **Cocos2dx基础知识**：首先，你需要了解Cocos2dx的基本架构，包括场景（Scene）、层（Layer）、精灵（Sprite）等基本元素。这些是构建游戏界面的...
cocos creator 全名2K 2048小游戏源码下载 可做区块链游戏
06-10
cocos creator 全名2K 2048小游戏源码下载 可做区块链游戏 cocos creator 全名2K 2048小游戏源码下载 可做区块链游戏 cocos creator 全名2K 2048小游戏源码下载 可做区块链游戏 cocos creator 全名2K 2048小游戏源码...
基于Cocos引擎实现的拳皇游戏课程设计
最新发布
06-29
【作品名称】：基于Cocos引擎实现的拳皇游戏【课程设计】 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：基于Cocos...
Typescript写2048小游戏
12-03
Typescript写的2048小游戏，基于layaAir box 开发平台
2048-2:用TypeScript重写的著名2048游戏的前叉
05-07
2048 ++ 原始基于TypeScript的实现，它是基于 （也是一个克隆）的一个小克隆。 仅出于娱乐目的而制作，并且通常用于学习Web，尤其是用于TypeScript。 完全重写了所有业务逻辑，并从原始2048借用了UI。更改了逻辑，并添加了级别的概念。 现在，您有了目标！ 。 对于每个人，您都需要“合并”稳定的瓦片，而每次合并都会越来越难。 。 执照 2048已根据获得
用TypeScript开发的一个游戏源码-Greg The Robot
11-23
展示一个使用TypeScript的HTML5风格的游戏，以及一Phaser游戏开发库。这个项目是对80年代街机游戏的致敬，更具体地说，是Konami在1986年制作的令人敬畏的游戏“骑士”。希望能吸引那些寻找一个基本游戏结构来构建的人。相信TypeScript能提高开发效率，开发过程不仅限于游戏项目，也适用于JavaScript开发。
cocos2dx学习之路--拼图游戏
blubluhao的博客
09-06 1936
作为一名初学者想通过写博客来记录自己学习的过程，第一个例程是一个简单的拼图游戏。 1.头文件CuttingPhotos.h #pragma once #include "cocos2d.h" USING_NS_CC; class CuttingPhotos:public Layer { public: CuttingPhotos(); ~CuttingPhotos(); //
游戏开发16课 拼图游戏
s178435865的专栏
11-20 408
cocoscreator 拼图游戏
适合编程初学者的开源项目：小游戏2048（鸿蒙ArkTS版）
蓝不蓝编程
01-14 1503
为编程初学者打造入门学习项目，使用各种主流编程语言来实现。
JavaScript实现2048小游戏，我终于赢了一把，前端开发须知
jixuczy的博客
03-30 940
break;default://默认颜色break;//计算坐标等this.cal();//执行绘制//是否绘制文字的处理=0){
用javascript制作2048游戏的思路（原创若 转载请附上本链接）
anruanba4181的博客
11-28 193
一、项目已上传至github，地址：https://github.com/forjuan/2048game 二、学习了javascript基础后，想要捣鼓点东西做，做了一个自己以前很爱玩的2048游戏。经过初期的思路设计手工画了设计思路图。手工图有空在用图画出来。 实现2048的功能：1、核心：上下左右移动。 2、...
cocoscreator之2048-------（1）思路及基础页面搭建
Guard777的博客
09-14 1167
前言 此开发过程借鉴于 Prpr_Saber大佬的文章， 所以此文中会有大佬写的代码的影子，感兴趣的可以直接跳转至大佬的文章，而且大佬把原工程放在Git上了，可以直接拉取。 如果此文侵权，即刻删除。 思路 以4*4的格子举例，如图 1.我们需要先生成4*4的二维数组 2.在二维数组中随机位置生成一个数字2 3.当我们向左滑动时候，修改二维数组 4.同时再生成一个新的数字，2 5.再次向左滑动，两个2在同一行合并成为，4 这就是2048的主要逻辑 一、布置场景 我用的是cocoscreator2.3.4，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sam_ONE

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值