Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >背包大乱斗与俄罗斯方块(代码篇)

背包大乱斗与俄罗斯方块(代码篇)

作者头像
keyle
发布于 2024-11-25 06:14:03
发布于 2024-11-25 06:14:03
14202
代码可运行
举报
文章被收录于专栏:礼拜八不工作礼拜八不工作
运行总次数:2
代码可运行

前一段时间写了一篇 背包大乱斗与俄罗斯方块(设计篇) ,具体的实现思路在这一文中已经讲清楚了,后来我抽空去实现了一版。目前看效果还不错

已经实现,形状的变换,定位,移动,消除,障碍判定等。本篇稍微讲一下具体的实现过程,以及如何去优化这个算法。

基于池去实现节点的创建与回收

一开始就基于这个池模板去管理所有数量上较多的对象,后期优化的压力会小一些。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public interface IReset
{
    void Reset();
}

public interface IPool<T> where T : IReset
{
    Stack<T> nodesPool { get; }

    T CreateOne<W>() where W : T, new();
    void ReturnOne(T item);
}


public class BasePool<T> : IPool<T> where T : IReset
{
    Stack<T> _nodesPool = new Stack<T>();
    public Stack<T> nodesPool { get { return _nodesPool; } }

    public virtual T CreateOne<W>() where W : T, new()
    {
        if (nodesPool.Count > 0)
        {
            return nodesPool.Pop();
        }
        return new W();
    }

    public virtual void ReturnOne(T node)
    {
        node.Reset();
        nodesPool.Push(node);
    }
}

分离算法与表现

我们的算法是需要适应不同的场景的,如果基于一套UI或者3D/2D渲染,混写代码,就会导致这个代码复用性低,迁移起来费时费力。

TileInfo.cs 作为管理单个形状( 物品) 渲染信息的最小单位。我们并不需要在这里书写任何如何去渲染的逻辑。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public class TileInfo :  IReset
{
    public List<GameObject> Cubes = new List<GameObject>();
    public GameObject Tile;
    public Color BaseColor;

    public void Reset()
    {
        BaseColor = Color.white;

        if (Cubes.Count > 0)
        {
            for (int i = 0; i < Cubes.Count; i++)
                PrefabPoolManager.GetInstance().PushGameObjectByType(PrefabPoolManager.PrefabType.Cube, Cubes[i]);
            Cubes.Clear();
        }
        PrefabPoolManager.GetInstance().PushGameObjectByType(PrefabPoolManager.PrefabType.Tile, Tile);
        Tile = null;
    }
}

将这个逻辑放到一个单独的Render脚本中,这样处理现在我们已经将渲染画面的功能完全隔离到了 BlockRender。 如果我们有3D的画面,就可以写一个3DBlockRender 或者是 UIBlockRender ,只需要抽象出接口做新的实现即可。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public class BlockRender 
{
    public TileInfo UpdatePreSelectNode(PreSelect node, LogicMap map)
{
        return UpdateTile(node, node.Shape, node.x, node.y, map);
    }

    public TileInfo UpdatePreSelectNode(PreSelect node, IShape shap, LogicMap map) 
{
        return UpdateTile(node, shap, node.x,node.y,map);
    }
 
    ...

至此我们已经完成了基础逻辑,他包含一个通用的池实现,与一个通用的渲染层。

核心算法

一般来说游戏的业务逻辑复杂度都不高,真要说复杂的,那肯定是渲染逻辑。 这段放置图形的代码,就是背包大乱斗最复杂的业务逻辑了。

通过当前节点的相对点加图形的数据结构中存储的x与y值,就可以推算出逻辑节点的坐标。 注意这边的逻辑节点,需要配置map的信息,比如map的位置信息与缩放进行一个定位,才能换算出真实坐标。

当然下面的代码并没有添加,是否这个位置有阻挡或者已经被占用的判定,由于我们的玩法尚未定型,则将这个判定放到了渲染层,在最后的演示中,你可以看到如果两个图形有重叠部分,重叠部分的区域会变成红色。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public INode PlaceShape(INode node,IShape shape) 
{
    node.Shape = shape;

    //解析data
    var data = shape.Data;
    var rows = data.GetLength(1);
    var columns = data.GetLength(0);

    for (int y = 0; y < rows; y++)
    {
        for (int x = 0; x < columns; x++)
        {
            if (data[x, y] == 0)
                continue;

            INode usedNode = GetNodeWithXY(node.x + x, node.y + y);
            usedNode.State = NodeState.CUBE;
        }
    }

    return node;
}

演示

通过空格键可以在左下角创建出方块,wasd去移动,qe可以转换方向,再次空格键可以放下方块。

页面有9M大小,加载较慢。演示地址 :

https://px.vrast.cn/index.html

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-11-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 礼拜八不工作 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
美国队长的盾(二)五角星
前面我们已经把四个同心圆画好了(美国队长的盾(一) 同心圆),就缺“画龙点睛”之笔的五角星了。那么今天我们就来纯手工打造这样一个五角星。
生信交流平台
2020/08/06
1.2K0
美国队长的盾(二)五角星
靠数学“拿了”两次诺贝尔奖,彭罗斯从“铺地砖”帮忙发现2011年化学奖的秘密
晓查 发自 凹非寺  量子位 报道 | 公众号 QbitAI 诺贝尔奖没有数学奖,但是如果数学足够好的话,可以拿两次诺贝尔奖: 帮别人拿一次,自己再拿一次。 刚刚获得诺贝尔奖的英国数学家罗杰·彭罗斯(Roger Penrose)就是这样。 今年,彭罗斯凭借数学在广义相对论和黑洞研究中的应用,获得了诺贝尔物理学奖。 而在几十年前,彭罗斯的另一项数学发现曾帮助别人获得过诺贝尔奖。 2011年,以色列科学家丹尼尔·舍特曼(Daniel Shechtman)因为发现准晶体获得了当年的诺贝尔理综化学奖。 准晶体于
量子位
2023/03/10
8550
靠数学“拿了”两次诺贝尔奖,彭罗斯从“铺地砖”帮忙发现2011年化学奖的秘密
数学原来这么有趣,66组超炫动图唤醒你的思维!
无论怎样,看完这一组动图,你不仅能够感受到数学美丽的一面,同时也会对我们常见的公式定理有更深刻、直观的理解!
IT阅读排行榜
2019/01/23
1.3K0
数学原来这么有趣,66组超炫动图唤醒你的思维!
Python之turtle模块-正多边形
前面我们用turtle画了正方形,也就是正四边形,虽然我们平时不这么叫它。我们今天来画正多边形。顾名思义就是边数大于等于三条,并且每条边的长度都一样。美国的五角大楼就是正五边形。
生信交流平台
2020/08/06
2K0
Python之turtle模块-正多边形
MFC绘图小实验(2)
1,以正五边形的5个顶点为基础,隔点存储构成五角星。填充模式采用WINDING。五角星边界线为5个像素宽的蓝色实线,内部使用红色填充。 CRect rect; //定义矩形 GetClientRect(&rect); //获得客户区矩形 pDC->SetMapMode(MM_ANISOTROPIC); //设置映射模式 pDC->SetWindowExt(rect.Width(),rect.Height()); //设置窗口 pDC->SetViewportE
Zoctopus
2018/06/04
1.6K0
python与分形0015 - 【教程】五星红旗
不知不觉,今天又周五,513330都快破6了,倒金字塔加仓都加到地下室了,真是服气了。
滚神大人
2021/12/09
8750
python与分形0015 - 【教程】五星红旗
OpenCV-Python学习(13)—— OpenCV 多边形填充与绘制(cv.fillPoly、cv.polylines)
1. 知识点 学习 cv.polylines 函数的使用; 学习 cv.fillPoly 函数的使用。 2. 绘制折线或多边形 cv.polylines 函数说明 2.1 函数使用 cv.polylines(img, pts, isClosed, color[, thickness[, lineType[, shift]]]) → img 2.2 参数说明 参数 说明 img 表示要在其上绘制矩形的图像的img对象。 pts 表示一个或多个点集。 isClosed 表示标志,决定所绘制的多边形是否闭合。若为
Rattenking
2022/11/14
4.3K0
OpenCV-Python学习(13)—— OpenCV 多边形填充与绘制(cv.fillPoly、cv.polylines)
网页CAD二次开发实现圆转多边形的详细教程
在线CAD SDK的集成过程中,甲方客户可能有实现圆转多边形功能的需求,作为开发者如何利用WEB CAD SDK展现此功能效果呢?本章节我们重点讲述一下。
梦想云图网页CAD
2024/04/09
1910
网页CAD二次开发实现圆转多边形的详细教程
三角形的内角和等于180°?不对!
导读: “三角形内角和等于180°”,这对于我们来说是再熟悉不过的一个常识,陈省身教授从一个不同的角度去看待这个问题,并将这个问题延伸推广,于1944年,找到了一般曲面上封闭曲线方向改变量总和的公式(高斯—比内—陈公式),把几何学引入了新的天地,被誉为划时代的贡献。
IT阅读排行榜
2018/08/17
1.3K0
Flutter 绘制番外篇 - 圆中取形
对一些有趣的绘制 技能和知识, 我会通过 [番外篇] 的形式加入《Flutter 绘制指南 - 妙笔生花》小册中,一方面保证小册的“与时俱进” 和 “活力”。另一方面,是为了让一些重要的知识有个 好的归宿。
张风捷特烈
2022/03/18
8030
Flutter 绘制番外篇 - 圆中取形
Android关于Path你所知道的和不知道的一切
张风捷特烈
2024/01/26
3000
Android关于Path你所知道的和不知道的一切
OpenGL ES 2.0 (iOS)[03]:熟练图元绘制,玩转二维图形
文章的大前提是,你得有《OpenGL ES 2.0 (iOS): 一步从一个小三角开始》的基础知识。
半纸渊
2018/09/04
1.7K0
OpenGL ES 2.0 (iOS)[03]:熟练图元绘制,玩转二维图形
requireJs的使用,以canvas绘制星空为例
RequireJS是符合AMD规范(Asynchronous module definition异步模块加载)一种js加载方式,目的是为了防止加载js的时候阻塞html页面渲染,其使用非常简单。 首先要去下载一个require.js,网址:http://requirejs.org/docs/download.html 在html文件中引入require.js: <script type="text/javascript" data-main="js/main" src="js/require.js" de
lonelydawn
2018/02/09
1.2K0
requireJs的使用,以canvas绘制星空为例
绘图-UIBezierPath
UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装。 所以 UIBezierPath 是基于 Core Graphics 实现的一项绘图技术。
進无尽
2018/09/12
1.4K0
绘图-UIBezierPath
小游戏系列之五环盾牌
本节主要介绍pygame的初级教程,以及如何用pygame去绘制奥运五环及美国队长盾牌。
公众号guangcity
2019/09/20
8840
小游戏系列之五环盾牌
Android关于Path你所知道的和不知道的一切
零、前言 1.canvas本身提供了很多绘制基本图形的方法,普通绘制基本满足 2.但是更高级的绘制canvas便束手无策,但它的一个方法却将图形的绘制连接到了另一个次元 3.下面进入Path的世界,[注]:本文只说Path,关于绘制只要使用Canvas.drawPath(Path,Paint)即可 4.本文将对Path的所有API进行测试。 ---- 一、引:认识Path 例1.绘制网格 在Canvas篇我用Path画过一个网格辅助,在这里分析一下 moveTo相当于抬笔到某点,lineTo
张风捷特烈
2018/12/07
2.6K0
大学课程 | 计算机图形学,基于MFC和二维变换的画图软件
本文描述了二维复合变换的基本方法和思想,根据鼠标位置坐标获取起始点pStart和终止点pEnd的坐标,设计实现每个基本图形的画图方法,根据pStart和pEnd即可确定基本图形的控制点,进而绘制对应图形。规范化齐次坐标以后,图形几何变换可以表示为图形控制点点集合的规范化齐次坐标矩阵与二维变换矩阵相乘的形式,分别设置二维变换矩阵的参数信息,设计实现对应的方法,即可实现图形的二维变换功能。
Justlovesmile
2021/12/14
2.6K0
大学课程 | 计算机图形学,基于MFC和二维变换的画图软件
开源计划之--Android绘图库--LogicCanvas
在html5时,我用JavaScript封装了一个HTML5的canvas库。
张风捷特烈
2018/09/02
1.4K0
开源计划之--Android绘图库--LogicCanvas
手 Q 人脸识别动画实现详解
该文介绍了如何通过自定义View和动画实现圆形进度条的绘制,主要利用了Canvas、Path、Paint等类进行实现。同时介绍了如何实现圆形进度条在Canvas上的动画展示,包括自定义动画、ObjectAnimator、属性动画等。同时,还介绍了如何实现圆形进度条和圆形图片的切换,主要利用了自定义属性动画和ObjectAnimator进行实现。该文还介绍了如何实现圆形进度条的长度调节和点击调节,主要利用了自定义调节器和动画监听器进行实现。最后,该文介绍了如何将圆形进度条应用到圆形图片的展示上,主要利用了自定义圆形图片控件和圆形进度条组件进行实现。
QQ空间开发团队
2017/11/02
4.9K1
手 Q 人脸识别动画实现详解
用SVG实现一个优雅的提示框
Tooltips常被称为提示框(或信息提示框),提示框能够以较强的交互性、自由度为用户提供相应的提示信息。今天我们要聊的不是如何实现强大的交互行为,而是来看看如何以最好的方式来还原他们的视觉效果,并且能适用于不同的场景。
ConardLi
2020/06/10
2.6K0
用SVG实现一个优雅的提示框
相关推荐
美国队长的盾(二)五角星
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验