基于HTML5的WebGL实现的2D3D迷宫小游戏

为了实现一个基于HTML5的场景小游戏，我采用了HT for Web来实现，短短200行代码，我就能实现用“第一人称”来操作前进后退上下左右，并且实现了碰撞检测。

先来看下实现的效果： http://hightopo.com/guide/guide/core/3d/ht-3d-guide.html#ref_collision

或者http://v.youku.com/v_show/id_XMzA5MzUzODc4NA==.html?spm=a2h3j.8428770.3416059.1视频中出现的帧的问题是我屏幕录制器的问题，真正操作的时候不会有，建议用上面的链接自己操作

玩玩，鼠标或者触屏都可以，不过我觉得最方便的还是操作键盘wsad控制上下左右。

我的想法是先把场景布局好，代码如下：

createHT([100, -20, 100], '#E74C3C');
createHT([-100, -20, 100], '#1ABC9C');
createHT([100, -20, -100], '#3498DB');
createHT([-100, -20, -100], '#9B59B6');
createCurve([0, -20, 0]);
createCircle();

这几个都是自定义的函数，createHT为描绘HT形状的图，场景中有四个，所以调用了四次；createCurve是描绘场景中间的黄色的曲线；createCircle是描绘最外层的圆，因为不是全包的圆，所以也是描点画的。

HT中封装了一个组件，ht.Shape（以下简称Shape），能够根据描点来自由描绘图形，可以通过shape.setPoints(pointsArray)将所有的点添加进数组中，并且设置到shape中，然后通过setSegments()设置线段数组信息，也就是用什么样的方式来连接两点，在Shape手册中有着重描写，感兴趣的可以参考HT for Web Shape 手册。抽其中的一个描绘点的函数来看看：

function createHT(p3, color){shape = new ht.Shape();                shape.s({'shape.background': null,'shape.border.width': 10,'shape.border.color': color,'all.color': color }); shape.setTall(40); shape.setThickness(5); shape.setPoints([ // draw H {x: 20, y: 0}, {x: 20, y: 100}, {x: 20, y: 50}, {x: 80, y: 50}, {x: 80, y: 0}, {x: 80, y: 100}, // draw T {x: 120, y: 0}, {x: 180, y: 0}, {x: 150, y: 0}, {x: 150, y: 100} ]); shape.setSegments([ // draw H 1, // moveTo 2, // lineTo 1, // moveTo 2, // lineTo 1, // moveTo 2, // lineTo // draw T 1, // moveTo 2, // lineTo 1, // moveTo 2 // lineTo  ]); shape.p3(p3); dataModel.add(shape); return shape; }

因为“HT”这个字眼要描绘的点比较多，所以代码看起来有点大，如果你看到如何描绘一个不完全的圆用20行代码来完成，而且包括样式，还是会惊讶的：

shape = new ht.Shape();
shape.s({'shape.background': null,'shape.border.width': 10,'shape.border.color': '#D26911','all.color': '#D26911'
});
shape.setTall(40); shape.p3(0, -20, 0); shape.setThickness(10); var r = 300; for(var i=0; i<36; i++){ var angle = Math.PI * 2 * i / 36; shape.addPoint({ x: r * Math.cos(angle), y: r * Math.sin(angle) }); } dataModel.add(shape); return shape;

场景设置完毕，接下来要将在3d中“我”处于的位置在2d中也显示出来。首先我得先设置“我”是“第一人称漫游模式”，直接将g3d.setFirstPersonMode(true)即可。第一人称漫游模式本质是控制eye和center，如果没有设置第一人称漫游模式，那么鼠标或者触控板拖拽会绕着center旋转。详情参考HT for Web 3D手册。

因为HT 3D中封装了两个方法getEye和getCenter，这两个方法分别是获取camera的位置和目标中心点的位置，前者按照想象来说就比方你头上有个摄像机，你走到哪里它的中心点就拍摄到哪里，可以很方便的记录你的位置；后者就相当于你看出去的位置，但是这里跟我们人不太一样，因为人是可以广度看到大范围的，但是这个center相当于你眼球和都不能转动，是正前方的某一点的位置就是你的视线聚焦位置。

了解了getEye和getCenter后我们就可以获取当前位置和视线位置了：

g2d.addTopPainter(function(g){var eye = g3d.getEye(),center = g3d.getCenter();g.fillStyle = 'red';g.strokeStyle = 'black';g.lineWidth = 1; g.beginPath(); g.arc(eye[0], eye[2], 12, 0, Math.PI * 2, true); //绘制圆，而且还能实时获取3d中“我”的位置  g.fill(); g.stroke(); g.strokeStyle = 'black'; g.lineWidth = 2; g.beginPath(); g.moveTo(eye[0], eye[2]); g.lineTo(center[0], center[2]); //绘制线，能实时更改“我”和“我的视线位置” 之间的线段  g.stroke(); });

但是在代码中我们发现，这个方法只被绘制了一次，如果不一直重绘，那么2d界面的“我”的位置和移动也是不会变的，所以我们又监听了3d中属性的变化：

g3d.mp(function(e){//根据3d上的“我”的位置和视线来实时更新2d界面if(e.property === 'eye' || e.property === 'center'){ //如果e属性变化为get/setEye，get/setCenter，那么重绘2d界面g2d.redraw();}
});

在2D中，我可以编辑图元，移动它的点，变化某个图元的大小，等等功能，只要变化了图元，那么我的碰撞测试就得更新：

function updateBoundaries(){boundaries = [];dataModel.each(function(data){//HT curve circle              boundaries = boundaries.concat(ht.Default.toBoundaries(data.getPoints(), data.getSegments()));// ht.Default.toBoundaries将不连续曲线转化成Graph3dView#setBoundaries(bs)需要的参数格式}); g3d.setBoundaries(boundaries);//setBoundary()可指定碰撞边界
}

那么我们好奇的点在于，如何在拖拽图元改变大小的时候还能保持碰撞检测呢？

HT中有一个对于属性变化的监听事件addDataPropertyChangeListener()，可简写为md()，在我们拖拽图元的时候，绘制这个图元的基础points就会被改变，所以我们只要监听points有没有被改变就行了，如何使用这个事件可以参考HT for Web 数据模型手册

dataModel.md(function(e){//data属性变化事件    if(e.property === 'points'){//如果data属性变化为getPoints/setPoints，那么更新边界updateBoundaries();}
});

基于HTML5的WebGL实现的2D3D迷宫小游戏相关推荐

河内塔php,基于HTML5的WebGL设计汉诺塔3D游戏
在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏. 知道了汉诺塔的规则和算法,现在就开始创建元素.用HT for Web(http://www.hight ...
[埋坑系列] 基于QT/C++的杰瑞走迷宫小游戏 :1.大体构造
本次数据结构课程设计本打算做老鼠走迷宫,毕竟也比较喜欢迷宫,也有过经验, 框架大体设计好之后发现挑战性并不强,对这些算法都有一些经验,所以决定先去搞树做词典,在此埋个坑 |_ _ _QT图形界面 | ...
基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型
2019独角兽企业重金招聘Python工程师标准>>> 前言随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展 ...
html5做一个展示页面,基于HTML5的WebGL实现json和echarts图表展现在同一个界面
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
基于html5的矢量图绘制方法研究,基于HTML5和WebGL的三维地形可视化方法研究
摘要: 近年来地理信息的需求急速增长,越来越多的GIS应用走向网页化.移动化.WebGIS应用也在逐渐从二维层面向三维层面发展,三维地形可视化是三维GIS的基础,基于Web的三维地形可视化也成为新的研 ...
基于Java的迷宫小游戏
一.实验内容: 1)迷宫游戏是非常经典的游戏,在该题中要求随机生成一个迷宫,并求解迷宫: 2) 要求查找并理解迷宫生成的算法,并尝试用两种不同的算法来生成随机的迷宫. 要求迷宫游戏支持玩家走迷宫,和系 ...
分享一个C语言矿井逃生迷宫小游戏【附源码】
用C语言写的一个迷宫小游戏,游戏玩法是通过鼠标控制帽子上的灯走出迷宫 // 定义常量 #define PI 3.141592653589 // 圆周率 #define UNIT_GROUND 0 // ...
python迷宫小游戏
一款基于 Python + Pygame + AI算法的迷宫小游戏 (一)课题内容实现走迷宫. 主要功能为界面显示.上下左右键的响应以及当前步数统计. 通过该课题全面熟悉数组.字符串等的使用,掌 ...
Python游戏开发，pygame模块，Python实现过迷宫小游戏
前言今天为大家带来解闷用的过迷宫小游戏分享给大家好了.让我们愉快地开始吧~ 效果展示开发工具 Python版本: 3.6.4 相关模块: pygame模块: 以及一些Python自带的模块. 环境 ...

基于HTML5的WebGL实现的2D3D迷宫小游戏

基于HTML5的WebGL实现的2D3D迷宫小游戏相关推荐

最新文章

热门文章