Articles of html canvas

我应该如何有效地清理和重绘我的canvas与许多animation的精灵?

我目前的解决scheme是清除整个canvas,并重绘每个requestFrame()上的所有精灵。 这工作,但感觉效率低下: 我只需要清除由animation使无效的canvas部分。 我只需要重绘与canvas的无效部分相交的对象。 我可以跟踪无效的部分,并在requestFrame()我可以找出哪些对象相交无效部分,只重绘他们,但我不知道,如果这是一个改进或退后一步。 如果我有100个精灵,其中10个正在移动,那意味着我需要在所有100个精灵中进行10次search。 每个请求帧的高阶顺序。 我也可以把每个精灵放在自己的canvas上,从等式中删除精灵的交互,但是我一直没能发现有多lesscanvas太多。 这似乎是一个已经解决的问题,但是我还没有find关于这个主题的任何资源。

如何自动化游戏

我是新来的游戏开发,我有一个游戏,汽车移动,挑选怪物。但现在我想自动化游戏,所以它看起来像它自动播放。 控制键由更新function给出,如下所示: update(){ if (keys.ArrowUp) { // Player holding up this.y -= this.speed * frameTime; this.dir = Math.PI * 0; // set direction } if (keys.ArrowDown) { // Player holding down this.y += this.speed * frameTime; this.dir = Math.PI * 1; // set direction } if (keys.ArrowLeft) { // Player holding left this.x -= this.speed […]

我怎样才能围绕HTMLcanvas上的一个点围绕一个圆?

我有一份工作就是在HTML5中为canvas制作引擎和灯光游戏。 我喜欢我所做的事情,集中在我给予的X,Y位置,我不知道为什么,这只能帮助我更清楚地思考它们。 我已经把它设置为矩形,我所要做的就是从x / y中减去一半的宽度和一半的宽度,如下所示: c.fillRect(x-width/2,y-height/2,width,height); 但是当我试图用弧来做这件事的时候,我很难过。 起初我认为这将是简单的,我只是这样做: c.beginPath(); c.arc(x-rad/2,y-rad/2,rad,0,Math.PI*2,false); c.closePath(); 但是,当我尝试出来的时候,他们的样子是这样的,4个增加宽度/高度的矩形和4个增加半径的圆圈。 有谁知道计算正确的弧度偏移所需的math?

计算子弹旅行知道坐标和弧度

我有一个玩家精灵,有斧头和Y坐标,还有一个弧度。 弧度决定了精灵在自上而下的游戏界面中所面对的方式。 在这种情况下,弧度从玩家精灵指向鼠标光标,所以玩家总是面向鼠标。 我正在这样计算: this.radian = Math.atan2(inputs.mousey – this.ypos, inputs.mousex – this.xpos); 现在我想让玩家能够发射子弹。 子弹精灵是5×5像素,我希望它在玩家方向上直接从玩家手中射出(所以它基本上是朝着鼠标光标的方向射击)。 玩家发射的子弹被称为(方便) bullets的arrays。 这是一个二维数组,看起来像这样: var bullets = [ [xpos, ypos, radian], // first bullet [xpos, ypos, radian], // second bullet [xpos, ypos, radian] // third bullet ] 子弹将按照弧度确定的方向在每个游戏节拍上移动5个像素。 但是我很难为此做math。 我已经把子弹画在canvas上,我可以让它移动,但不知道如何使它跟随弧度指向的方向。 任何人都可以帮忙,也许是一个代码示例? 谢谢。

matrix的matrix旋转,以“面对”2D中的给定点

假设你有一个以点(0,0)为中心的矩形,现在我想旋转它,使它面向点(100,100),那么我怎样才能纯粹用matrixmath呢? 给一些更具体的我正在使用JavaScript和canvas,我可能有这样的事情: var position = {x : 0, y: 0 }; var destination = { x : 100, y: 100 }; var transform = Matrix.identity(); this.update = function(state) { // update transform to rotate to face destination }; this.draw = function(ctx) { ctx.save(); ctx.transform(transform); // a helper that just calls setTransform() ctx.beginPath(); ctx.rect(-5, -5, 10, […]

简单的方法来做一个简单的游戏引力?

我正在寻找一种简单的,初学者友好的方式在平台上做重力。 我已经看过Box2D的教程,但他们都显得非常复杂。 我想要的只是一个课程,如果我的玩家接地,或者是气球,并且跳跃的时候有一个很好的曲线。 我知道这不应该超过几行代码,学习一个库似乎过度。 任何人都在帮助我?

JavaScript渲染:canvas还是DIV?

我正在计划开发一个多人RPG(有点像RuneScape,但不用担心,用不同的游戏),我想在浏览器中做到这一点。 在说“MMORPG很难做”或“其他人也尝试过”之前,请记住,我不是在做一个巨大的游戏,我只是想看到“呼吸”的想法。 我selectJavaScript和HTML5而不是其他技术的原因是我有一些Web开发经验(这当然包括对JS的深入理解)。 我已经浏览了网上的一些库(或所谓的引擎),我发现一些可能有我需要的。 我的问题是: 在浏览器中渲染这种游戏的最佳方式是什么?也可以建议我认为最适合这种工作的图书馆吗?

计算两个向量之间的角度以转向目标

我一直试图在2D赛车游戏中实现一个跟随 AI的转向行为的path 。 我有两个向量: futurePosition表示给定汽车当前航向的预测未来位置。 futurePathPosition表示预测未来位置的最近点。 通过计算这两个向量的相对方向,我应该能够确定汽车是否需要向左或向右转,以便朝向path的中心。 我尝试了不同的计算方法,但是我不能一直遵循这个path。 偶尔汽车会转错方向,并“卡住”。 我正在使用交叉产品来确定角度,如此处所示 。 var a = Vector2D.normalize(this.futurePathPosition); var b = Vector2D.normalize(this.futurePosition); var d = Vector2D.cross(a, b); if(this.futureDistanceFromPath > this.trackRadius) { if(d > 0) this.steerLeft(); else if(d < 0) this.steerRight(); else if(d == 0) this.steerAngle = 0; } else this.steerAngle = 0; 什么可能会导致此错误的任何提示,将不胜感激。 另外,我想知道轴的方向是否会影响向量上的计算? 在canvas上,y轴面向“南”,但在我看过的vector教程中,我没有看到提到的轴方向。

canvassetTransform函数的澄清

我目前正在构建某种假3D地牢,而且我在理解setTransform()函数的行为方面遇到了一些困难。 这是我的简化代码: var can = document.getElementById('c'), ctx = can.getContext('2d'), angle = Math.PI / 4; ctx.fillStyle = "grey"; ctx.setTransform(1, Math.tan(angle), 0, 1, 0, 0); ctx.fillRect(100, 0, 50, 50); 这里也是用相同的代码为您查看结果的JsBin: http ://jsbin.com/oxaSIpe/7/edit 在fillRect改变x坐标似乎也会影响y坐标。 这个不成立。 歪一个元素改变了它的位置? 没有文件提到这样的事情。 如果有人可以请尝试解释这个function和它的怪异行为,我将非常感激。

对象始终具有相同的“速度”JavaScript

我尝试用大地图和多个对象创建2D游戏。 玩家总是在屏幕中间,所有其他的物体都在移动,所以感觉就像一个大的地图。 我希望玩家总是在鼠标位置之后移动。 我已经修改了鼠标的位置(0,0): var mouseX = 0; var mouseY = 0; if (e.pageX < window.innerWidth/2) { mouseX = -(window.innerWidth/2-e.pageX); }else{ mouseX = e.pageX-window.innerWidth/2; } if (e.pageY < window.innerHeight/2) { mouseY = -(window.innerHeight/2-e.pageY); }else{ mouseY = e.pageY-window.innerHeight/2; } 这工作得很好。 当谈到运动的部分,我不能让它以相同的“速度”运动。 我已经做了一些animation来解释它是如何现在以及我想如何。 现在如何: DC是我的玩家会走的速度,正如你可以看到,当它最接近x = 0和y = 0时,移动速度最快,我已经做到了这一点: var all = mouseX + mouseY; clientsID[key]['x'] += […]