温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML5怎么实现WebGL 3D版俄罗斯方块

发布时间:2022-03-15 16:10:46 来源:亿速云 阅读:172 作者:iii 栏目:web开发

今天小编给大家分享一下HTML5怎么实现WebGL 3D版俄罗斯方块的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

前言

摘要:2D 的俄罗斯方块已经被人玩烂了,突发奇想就做了个 3D 的游戏机,用来玩俄罗斯方块。。。实现的基本想法是先在 2D 上实现俄罗斯方块小游戏,然后使用 3D 建模功能创建一个 3D 街机模型,最后将 2D 小游戏贴到 3D 模型上。

首先,先完成 2D 小游戏

在查看官方文档的过程中,了解到 HT 的组件参数都是保存在 ht.DataModel() 对象中,将数据模型在视图中进行加载后呈现各种特效。

gameDM = new ht.DataModel(); //初始化数据模型

g2d = new ht.graph.GraphView(gameDM); //初始化2d视图

g2d.addToDOM(); //在页面上创建视图

开始游戏模型的创建

第一步,先让我们为游戏创建一个框体,为游戏限定范围。在文档中,我们可以知道 ht.Node 是 graphView 呈现节点图元的基础类,除了可以显示图片外,还能支持多种预定义的图形。所以我打算使用该类创建4个长方形,用它们来做游戏的范围限定。

var lineNode = new ht.Node();

lineNode.s({

    "shape": "rect", //矩形

  "shape.background": "#D8D8D8", //设置底色

  "shape.border.width": 1, //边框宽度 1

  "shape.border.color": "#979797" // 边框颜色

});

lineNode.setPosition(x, y); // 设置图元展示位置,左上角为0, 0 图元坐标指向它们的中心位置

lineNode.setSize(width, height); // 设置图元宽、高属性

gameDM.add(lineNode); // 将设置好后的图元信息加入数据模型中

设置 x:552, y:111, width:704, height:22 后我们可以得到第一个图形:

边框的top已经有了,现在让我们再创建另外三条边来组成一个框体:

x:211, y:562, width:22, width:880

x:893, y:562, width:22, width:880

x:552, y:1013, width:704, width:22

得到效果如下:

边框基本完成,在浏览的过程中发现4个边框可以被拖拽。接下来对边框初始化的方法进行调整:

lineNode.s({

 "shape": "rect", //矩形

  "shape.background": "#D8D8D8", //设置底色

  "shape.border.width": 1, //边框宽度 1

  "shape.border.color": "#979797", // 边框颜色

  "2d.editable" : false, // 是否可编辑

  "2d.movable" : false, //是否可移动

  "2d.selectable" : false //是否可选中

});

生成方块,我的想法是生成多个正方形,将它们组合成我们需要的图形,通过坐标的计算来将它们摆放在相应的位置:

方块生成后,开始对图形进行旋转操作。这其中有两个方案,第一种是将图形的翻转后的图形坐标按顺序保存在数组中,每次改变形状时取数组中的前一组或后一组坐标来进行改变;第二种是使用 ht.Block() 对象将对应的图元组合成一个整体,在变形时只需按对应的方向选择 90° 即可。在这里,我选择了第二中方式,代码如下:

function createUnit(x, y) {

 var node = new ht.Node();

    node.s({

      "shape": "rect",

      "shape.background": "#D8D8D8",

      "shape.border.width": 1,

      "shape.border.color": "#979797"

    });

    node.setPosition(x, y);

    node.setSize(44, 44);

    gameDM.add(node);

    return node;

}

var block = new ht.Block();

block.addChild(createUnit(552, 133));

block.addChild(createUnit(552, 89));

block.addChild(createUnit(508, 133));

block.addChild(createUnit(596, 133));

block.setAnchor(0.5, 0.75); //设置组合的中心位置, 旋转时将安装此点来进行

block.setPosition(552, 144);    

以上就是“HTML5怎么实现WebGL 3D版俄罗斯方块”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI