Articles of html canvas

持久的实时游戏authentication(JWT,Passport)

上下文 我正在用canvas创建一个HTML5的MMO游戏。 我在客户端上从头开始在服务器& JS上使用NodeJS 。 我也使用socket.io管理实时。 游戏是持久的,每个玩家保持他们的装备/技能等,即使注销后。 要做到这一点,玩家需要注册电子邮件和密码,然后login。 客户端是浏览器,但将来可能是其他设备,如电话。 我使用HTTPS来encryption通信。 问题 在这种情况下,我决定使用基于令牌的authentication系统。 我从Auth0看JWT,发现: https ://jwt.io/introduction/ 我注意到:他们正在谈论JWS的JWS实施,而不是JWE。 看过https://github.com/auth0/node-jsonwebtoken之后,我看到它是一样的,JWS和JWE都没有。 我认为由Auth0开发的JWT模块不提供JWT的JWE实现,而只提供JWS实现。 我是对的还是我错过了什么? 在我的特殊情况下(游戏场景),我不知道是否必须使用JWE进行encryption(我不认为敏感数据会通过令牌传递),您认为JWS足够了吗? 在这项研究中,我检查了护照( http://www.passportjs.org/docs/ )。 我阅读文档,但是我们没有find有关他们在删除会话时如何执行身份validation的信息( http://www.passportjs.org/docs/downloads/html/#disable-sessions )。 我试图用session: false来实现它session: false但没有返回令牌。 我想我需要自己实现它,但在这种情况下,基于令牌的身份validation护照的目标是什么? 然后是关于socket.io的最后一个问题 如果我实现基于JWS令牌的身份validation来签名我的请求和HTTPS来encryption通信,如何保护双向通信? 它看起来像两个不同的沟通渠道,用socket.io实现它是否容易?

Javascript等距绘制优化

我在等轴测图瓷砖有麻烦。 目前,我得到了我想绘制的瓷砖arrays。 这一切工作正常,直到我增加数组的大小。 因为我在地图上绘制了所有的图块,所以真的会影响游戏性能(显然):D。 我的问题是我没有天才,当谈到JavaScript,我没有设法只是绘制什么在视口。 对于专家来说应该是相当简单的,因为它的固定大小等等。canvas是960×480像素,每个区块64×32。 这样在第一行就有16个瓦片,下一个就有15个瓦片,共有16行。 瓷砖0,0位于右上角。 并绘制X向下,Y从右向左。 从左向右穿过第一行的瓦片,为+ X -Y。 这是我的drawMap()的相关部分 function drawMap(){ var tileW = 64; // Tile Width var tileH = 32; // Tile Height var mapX = 960-32; var mapY = -16; for(i=0;i<map.length;i++){ for(j=0;j<map[i].length;j++){ var drawTile = map[i][j]; var drawObj = objectMap[i][j]; var xpos = (ij)*tileH + mapX; var ypos […]

HTML5单击canvas中的对象

我有一个函数在我的JS,获取用户的鼠标点击canvas上。 现在让我们说我的canvas上有一个随机的形状(其实是一个矩形的PNG图像),但我不想包含任何alpha空间。 我的问题在于让我说,我点击一些地方,它涉及其中一个图像的像素。 第一个问题是,你如何计算像素位置是地图上的一个对象(而不是背后的草地砖)。 其次,如果我点击所述图像,如果每个图像包含其自己的独特信息,你如何处理点击加载正确的数据。 注意我不使用库我个人更喜欢原始方法。 依靠图书馆不教我很多,我发现。

如何把孩子的要素地位转化为世界的地位

我正在用canvas制作一个2D的空间游戏。 在这个游戏中,有一堆飞船,定位在世界空间,有炮塔,相对于他们的母船定位。 这些对象也有一个方向。 如何有效地计算世界坐标中的炮塔位置? (即当它发生火灾,我需要知道在哪里放置子弹的世界)? 计算炮塔的方向是微不足道的 – 我只是把炮塔的相对角度加到它的父母身上。 尽管如此,我想我可以做一堆三角函数,但这必须是一个好的/快速的通用解决scheme的常见问题? 我应该重新学习如何做matrixmath吗? 🙂 更新: 在下面的答案之后,我走了,并阅读matrixmath – 为此,我可以强烈推荐“3Dmath入门的graphics和游戏开发”弗莱彻邓恩和伊恩帕尔伯里。 关于matrix的整洁的事情是你不需要了解每个转换涉及的math,只是如何使用它们。 由于我的项目是在JavaScript中,我还需要一个matrix库,并与gl-matrix.js一起,因为它是快速的,并有一个干净的(我的口味)的API。 Sylvester.js的function也很丰富,值得一看,虽然不如gl-matrix快

我如何用HTMLcanvas程序化地创建一个定向光锥?

为了创建一个定向灯光效果,我想在HTMLcanvas上使用context2d来绘制这种透明度蒙版: 我也希望能够dynamic地生成这样的掩码。 我尝试过使用arc来创建这种光锥,但我无法画出漂亮,光滑和自然的光线。 我怎样才能做到这一点?

在HTML5中为mode7游戏倾斜图像

我正在制作像马里奥卡丁车这样的mode7游戏,我需要在绘制图像之前将图像倾斜,我尝试使用缓冲区canvas来倾斜图像,然后在游戏canvas上绘制它,但这会使图像变得迟钝(因为图像的地图是1280 x 2556.) 所以我的问题是: 如何在绘制之前旋转图像

最佳实践/客户与服务器交谈的方式

我正在使用Express和Socket.io在HTML5 Canvas和Node中制作多人游戏。 这是一个平台游戏风格的游戏,到目前为止,玩家可以看到对方,在屏幕上移动。 它工作得很好,但我的游戏逻辑大部分是客户端,我相信可能会成为一个问题。 其他玩家此时的动作根本不是很顺畅。 到目前为止,服务器所做的唯一事情就是获得玩家的位置和速度,然后将其广播给所有其他玩家,以便他们可以看到对方。 我想知道是否有一个更聪明的办法去做到这一点? 碰撞检测,移动,按键input等一切都用于客户端。 这应该是服务器端呢? 我可以想象,如果我计算碰撞检测和移动服务器方面的东西,那么玩家就没有办法通过浏览器控制台编辑他们的位置,改变他们的大小等等。 我希望这不是太复杂。 我还没有写太多的代码,因为我想确保从一开始就以正确的方式进行操作,而不必更改和重写大量的代码。 让我知道如果你想看我的代码。

DrawImage问题相邻精灵?

上下文 我从头开始建立一个2D游戏。 我现在正在使用rpgmxp tilesets来绘制地图,只是为了获得一些资源: 每个瓷砖是32 * 32像素。 我用ctx.drawImage方法使用canvasAPI来显示它: ctx.drawImage(tile.tilesetImg, tile.sX, tile.sY, this.tile.w, this.tile.h, canvasX, canvasY, Engine.Camera.tile.w, Engine.Camera.tile.h); 我使用不同的图像源大小( this.tile.w & this.tile.h )和图像目标大小( Engine.Camera.tile.w , Engine.Camera.tile.h )的参数。 这具有缩放游戏的效果,就像每个用户具有完全显示的相同的地图(32个地图* 24个地图)。 目前瓷砖纵横比失真对我来说暂时不重要。 结果以4:3的比例显示给玩家: 问题 当我改变窗口的大小,如果我不保持比例4:3(因为我总是显示32个瓦片* 24瓦片的玩家)我的瓦片types之一导致奇怪的视觉文物。 这发生在铬和Firefox和可能所有的浏览器。 这很奇怪,因为所有其他的瓷砖都是从相同的方法绘制的,但不会performance出这种行为。 这种行为似乎只发生在比例与4:3非常不同的情况下。 这是我正在谈论的一个例子。 有一些透明线条显示每个“坏”瓷砖右侧的背景。 注意这个瓦片恰好是瓦片集中的第一个瓦片(上面的第一张图片)。 如果单独更改高度,则会发生同样的情况,除非该行将显示在底部。 更奇怪的是,如果我改变瓷砖在第一个瓷砖的右边画一条红线: 绘制地图时,透明线被红线代替: 从debugging(console.log),没有任何原因,瓦片源大小将是33px,而不是32px,但伪像的效果,看起来就是这样的情况。 题 我似乎正在使用drawImage所有帐户正确,所以search,看看这是否是一个已知的问题。 当我发现:(特别是第12部分的最后一个注释)时,我正在阅读w3文档 , 因此,缩放图像的部分或全部将具有相同的效果。 这意味着当来自单个精灵表的精灵被缩放时,精灵表中的相邻图像可能会干扰。 这可以通过确保工作表中的每个精灵都被一个透明的黑色边框所包围,或者通过复制精灵来缩放到临时的canvas元素并从那里绘制缩放的精灵来避免。 这是否解释了这个问题? 有没有人知道问题更详细? 先谢谢你,最好的问候。

Sprite上的Canvas旋转碰撞检测

我正在使用此代码来检测两个矩形精灵之间的碰撞。 intersect: function(other) { return this.x < other.x + other.width && other.x < this.x + this.width && this.y < other.y + other.height && other.y < this.y + this.height; }, 我的问题是如何解释精灵的旋转。 这只会与 精灵的初始旋转位置。 有人能指出我正确的方向吗? 谢谢。

HTML5中无故障交叉淡入淡出

在我的HTML5帆布游戏中,我需要交叉淡入淡出的两个精灵。 (辉光被支持成精灵。) 最初,第一个精灵是可见的。 在淡入淡出时,第一个精灵将消失,并被第二个精灵取代。 褪色是如何完成的 – 无关紧要,只要光滑,没有视觉障碍。 我已经尝试了两种技术: 在交叉淡入淡出过程中,我同时插入第一个精灵的alpha值,从1.0到0.0,第二个精灵的alpha值从0.0到1.0。 使用这种技术,我可以在交叉淡入淡出的中间看到背景。 这是因为大部分时间这两个精灵都是半透明的。 在交叉淡入淡出过程中,我首先将第二个精灵的alpha从0.0插入到1.0(第一个精灵alpha在1.0),然后将第一个精灵的alpha从1.0插入到0.0。 使用这种技术的背景是没有看到的,但是在双方的交锋中,精灵周围的光芒闪烁 – 当两个精灵都接近完全可见的时候。 在非HTML5游戏中,我会使用着色器在RGB和Alpha通道中分别进行交叉淡入淡出处理。 有没有一个技巧来做HTML5需要的交叉淡入淡出效果?