Articles of html canvas

检查一个点是否触摸HTML5canvas中的用户绘制曲线

我无法检测到球是否与红色曲线碰撞。 下面的曲线是用户可以在canvas上绘制的示例。 我想不出任何快速的方法来检测绿球和红线之间的碰撞。 我曾经想过在球的位置每检查一次像素的颜色,但这是非常缓慢的,圆球将会比中心像素填充更多。 我也想过logging每一个X,Z点,曲线抽屉已经插入,然后检查球是否接近点,但这也似乎是一个不好的方法。 从用户画在屏幕上的红色曲线中,检测点是否与红线相碰撞的最佳方法是什么? 我应该存储红色曲线的每一个点,或者检查点上的像素的颜色,看它是否是红色的?

HTML5canvas屏幕到等距坐标转换

我正在尝试使用HTML5canvas创建等距游戏,但不知道如何将HTML5canvas屏幕坐标转换为等距坐标。 我现在的代码是: var mouseX = 0; var mouseY = 0; function mouseCheck(event) { mouseX = event.pageX; mouseY = event.pageY; } 这给了我的canvas坐标。 但是,如何将这些坐标转换为等距坐标? 我正在使用16×16的瓷砖。

如何在我的地图上显示来自视口的当前视图?

我正在做HTML5 Canvas开发,目前有一个大视口(左侧)和一个地图(右侧)。 喜欢这个: 我需要在地图上显示当前正在查看的内容。 而我正在迷失如何计算这个。 这是我想要的: 我通过一个变换matrix操纵主视口。 像[1,0,0,1,0,0] 这是在不同的游戏和应用程序中体面的通用function。 所以我认为有资源如何做到这一点。 但我一直没有find任何。

HTML5 / JS – Choppy游戏循环

我一直在试验HTML5 / JS,试图创建一个简单的游戏,当我撞墙。 我对游戏循环的select太过分了,以至于无法在游戏中使用。 我想要一个固定的时间步进循环,只在需要时渲染。 我简单地使用requestAnimationFrame来运行Game.update ,它会查找自上次更新以来经过的时间,并调用State.update来更新和呈现当前状态。 State.prototype.update = function(ms) { this.ticks += ms; var updates = 0; while(this.ticks >= State.DELTA_TIME && updates < State.MAX_UPDATES) { this.updateState(); this.updateFrameTicks += State.DELTA_TIME; this.updateFrames++; if(this.updateFrameTicks >= 1000) { this.ups = this.updateFrames; this.updateFrames = 0; this.updateFrameTicks -= 1000; } this.ticks -= State.DELTA_TIME; updates++; } if(updates > 0) { this.renderFrameTicks […]

如何在RTS游戏的3D HTMLcanvas上实现用户友好的屏幕平移

我怎么能得到RTS地图平移,就像在C&C红色警报(在屏幕边缘的鼠标移动屏幕朝着那个方向)中做的一样,在HTMLcanvas中使用Babylon.js RTS游戏? 如果我强迫游戏全屏,这将是简单的,但我不认为这是可行的。 我正在考虑检查鼠标是否靠近canvas的边缘进行平移,但这可能会让用户烦恼。 也许我可以强制鼠标在canvas的边界(非全屏模式),直到用户按下一些快捷键,但我可能会打破浏览器的实验。 你的建议?

HTML5 Canvas fillStyle作为数字不是文本

在canvas中绘制vectorgraphics时,使用像这样的rgbastring设置fillStyle … context.fillStyle = "rgba(255, 223, 191, 1)"; 是否有可能提供一个javascript对象(或只是数字)。 似乎很傻,我需要构建一个string来喂养这个值,如果我想dynamic的颜色。 context.fillStyle = "rgba(255, 223, 191, " + alpha + ")"; 规范清楚地说“一个CSS颜色string”,但它似乎很疯狂。 我错过了什么吗? http://www.w3.org/TR/2dcontext/#fill-and-stroke-styles 更新:我切换到使用globalAlpha这个具体的例子。 但似乎还是疯了。

HTML5canvas游戏计时器

如何为HTML5 Canvas游戏创建好计时器? 我正在使用RequestAnimationFrame( http://paulirish.com/2011/requestanimationframe-for-smart-animating/ ) 但是对象的移动太快了。 像我的代码是: http://pastebin.com/bSHCTMmq 但是,如果按UP_ARROW播放器不移动一个像素,但移动5,8或10或更多或更less的像素。 如果我按UP_ARROW播放器移动1像素怎么办? 感谢帮助。

JavaScript – 2D自上而下的瓷砖碰撞检测

我正在开发一个小型的自上而下的游戏(就像老的塞尔达游戏),我碰到一个碰撞检测问题(实际的理论本身,而不是指定瓷砖等) 我有一个叫做“checkTileCollision”的函数,它带有两个参数X和Y,并通过Player的Move函数调用。 X和Y是玩家在移动之后的位置,因为它假定检查玩家正在移动的位置以获得坚实的Tile,并且如果发现任何位置,则返回true以停止移动。 我的播放器大于一个瓷砖(例如,假设每个瓷砖是32×32,播放器是26×60),我需要知道一个有效的方法来检测玩家是否尝试踩到一个实体瓷砖。 玩家不能在网格上移动并且自由移动,所以X和Y是真实的位置而不是平铺坐标。 请注意; 我知道的东西,如Box2D,但我想这样做,而不使用第三方库。 任何帮助表示赞赏!

HTML5 – 滚动大地图的dynamiccanvas网格

我一直在为基于JS的游戏开发不同的滚动algorithm。 我的主要问题是我需要绘制一个巨大的地图,并让它滚动顺畅。 我已经做了一些尝试,虽然它们是高效的(代码和帧率),但它们仍然看起来很诡异,不得不经常重绘(尽管不是每一帧,但仍然过多地重绘)。 我最近的想法是在相机周围实现一些3×3的网格,这将延迟滚动。 我的意思是“延迟”? 如果以前玩过“暗黑破坏神2”,试试看一下Maphack的应用并启用Automap Screen Areafunction:你看,暗黑破坏神II的地图是通过“房间”的概念和玩家在特定区域通常是屏幕尺寸)被拖出屏幕以允许滚动。 我想以正交的角度来实现这个(就像2D zelda一样),就像这样: 蓝色的网格由我的相机位置周围的canvas制成。 我知道我可以用简单的x +(floor(camera.x / tile_size)* tile_size)公式来定位它们,有些偏移让它们像这样在摄像机中移动: 当画外屏区域必须保持在相同的位置以允许滚动时,会出现问题。 我已经做了第二个图像说明这一点: 注意,彩色瓷砖(或屏幕尺寸的屏幕外区域)如何保持在相同的位置,直到它们距离相机“太远”(红点)。 但是,当他们有相同的位置时,请注意瓷砖#(在每个蓝色瓷砖下方)更改。 我不能这样做,因为它需要重绘,而且我的目标是避免这种重绘,如果这个位置没有改变的话。 然而,这意味着,在示例蓝色瓦片6(位于第一个animation帧处的0,1处),它将变为瓦片5,然后变为瓦片1.虽然这是真的,但是想法是将其保持在瓦片6,只能重新使用最近的那些需要重绘的最远的油画。 我用这种方式说明我的问题,因为我以前的问题甚至没有得到一个单一的评论( https://stackoverflow.com/questions/22185858/infinite-scroll-a-canvas-with-a-tiled-map-without所以我不得不努力工作,回答我自己的问题……甚至没有任何帮助,因为别人可能有一个更好的主意,但似乎没有人这样做。 这就是为什么我在gamedev上玩这个游戏的原因,也许这里有一些更有技巧的人可以对我想要做的事情有一个想法或者一个镜头。 另外,请不要使用其他游戏或JS引擎。 如果我是这样,我不会在这里问这个,因为我知道他们实现了滚动滚动等,但这是为了我自己的学习和创造一个适合我自己的游戏需要的定制引擎。 任何帮助,真的很受欢迎。 提前致谢! – DARKGuy 编辑:好吧,在这个问题上挣扎了2天后,我终于设法做到了。 我不想这样做,所以我不知道是否有任何方法来优化这个代码或避免它做这些增量,而是使用一个绝对定位它们的公式? 这里是我正在使用的代码(cv = canvas,cx = context(“2d”),grid = 3×3的canvas数组,而且我使用32×32的“grid”来看看它是如何工作的。屏幕大小(或在我的引擎的情况下的区域大小)): for(ix = 0; ix < grid.length; ix++) for(iy = 0; iy < grid.length; iy++) { […]

处理多个requestAnimationFrame调用

我有与requestAnimationFrame调用堆叠在彼此之上的问题。 我正在开发一个平台游戏,它有三个独立的function,需要animation(主菜单,在游戏中的过场animation)。 目前,我有标志来确定何时运行requestAnimationFrame。 例如,我只调用runCutscene()方法中的requestAnimationFrame if!onMainMenu和!inGame。 这些标志在init()方法中被重置,它决定了要运行的三种方法中的哪一种。 具体来说,当我从过场animation返回到主菜单时(在看似随机的时候,我不能不断地复制错误),就会出现我的问题。 主菜单似乎运行在正常速度的两倍(我认为这是因为堆叠requestAnimationFrame调用)。 什么是最有效的方法来调用requestAnimationFrame? 如果我把requestAnimationFrame调用放在init()方法中,游戏就会中断。 先谢谢你。