Articles of html canvas

如何在JavaScript中使用X和Y坐标移动对象

我正在用JavaScript和HTML5制作一个二维棒球比赛,并试图移动一个我用JavaScript绘制的图像,如下所示: //canvas var c = document.getElementById("gameCanvas"); var ctx = c.getContext("2d"); //baseball var baseball = new Image(); baseball.onload = function() { ctx.drawImage(baseball, 400, 425); }; baseball.src = "baseball2.png"; 我不知道如何移动它,我看到很多人似乎只是键入ballX和ballY但我不明白实际的x和y定义来自哪里。 这是我的代码到目前为止: http://jsfiddle.net/xRfua/ 我有一个不同的图像源,但它是本地源,所以我没有包括它。 提前感谢任何帮助!

HTML帆布使一切都在右侧

出于某种奇怪而突然的原因,我的canvas似乎在右边1/4 / 1更粗,更黑。 我已经尝试了多种浏览器和不同的电脑,除了适用于Android的Chrome浏览器之外,它们都具有相同的呈现问题。 这里是我画的testing线的截图: 这里是代码,如果有人想知道: var canvas = document.getElementById("foreground"); var context = canvas.getContext("2d"); var height = 450; var width = 600; canvas.width = width; canvas.height = height; function draw() { context.clearRect(0, 0, canvas.height, canvas.width); for (var i = 1; i < (800 – (0 * 2)) / 35; i++) { context.beginPath(); context.moveTo(200 + (i […]

滚动时Perlin噪声地形问题

我正在使用这个jsp项目的Perlin噪声在Javascript canvas中生成地形。 我有一个点的数组,当一个点离开窗口的左边时,它将被删除,并且新的点被添加到右边。 对于前几个点(在任何点移出窗口的LHS之前),它工作正常,但是一旦我开始从数组的开始删除点并将它们添加到结束Perlin停止工作。 的jsfiddle 有谁知道为什么会发生?

HTMLcanvas绘图 – Firefox错误

我在Firefox中运行我的游戏时遇到以下错误(3.6) 组件返回的失败代码:0x80040111(NS_ERROR_NOT_AVAILABLE)[nsIDOMCanvasRenderingContext2D.drawImage] 在其他主stream浏览器中不会出现这个问题,点击“确定”后,我的游戏运行完全正常。 以下是我已经将问题本地化的一些代码片段。 有没有人看过这个问题? 根据Google的说法,它在加载之前需要对图像进行绘制,但从我的理解来看,在使用之前我已经正确地加载了它。 球员类 var player = new (function(){ var that = this; that.image = new Image(); that.image.src = "res/enemy1_sprites.png"; that.width = 16; that.height = 16; that.frames = 2; that.actualFrame = 0; that.spriteXoffset = 0; that.spriteYoffset = 0; that.moved = false; that.boundary = false; that.num_balls = 5; that.rootX = 350; that.rootY = […]

Android,deltaTime有多重要?

我做的游戏越来越大,有时我的线程不得不跳过一个框架,到目前为止,我没有使用deltaTime来设置游戏中不同对象的速度,因为它还不是一个足够大的游戏海事组织。 但是它越来越大,我计划,所以我的问题是,德尔塔时间有多重要? 如果我应该使用德尔塔时间有一个问题,因为speedX和speedY是整数(他们必须为日食,让你做一个矩形),我不能添加德尔塔时间非常function据我所知,但可能是错误? 我试着在下面的代码中joindeltaTime,有时候我的敌人在产卵之后不动,他们就站在那里跑在同一个地方 将为我如何设置/使用速度添加一些代码: public void update(int dx, int dy) { double theta = 180.0 / Math.PI * Math.atan2(-(y – controls.pointerPosition.y), controls.pointerPosition.x – x); x +=dx * Math.cos(Math.toRadians(theta)); y +=dy * Math.sin(Math.toRadians(theta)); currentFrame = ++currentFrame % BMP_COLUMNS; } public void draw(Canvas canvas) { int srcX = currentFrame * width; int srcY = 1 * […]

HTML5平台游戏碰撞检测问题

我正在做一个2D平台游戏,我碰到了很多碰撞检测的麻烦。 我已经看了一些教程,问题在这里和Stackoverflow问,但我想我太愚蠢了,以了解我的代码有什么问题。 我想做一个简单的包围盒式的碰撞,并且能够确定碰撞发生在箱子的哪一侧,但是无论我做什么,我都会遇到一些奇怪的故障,比如玩家被困在墙上或跳跃是紧张的。 你可以在这里testing游戏: 平台引擎testing 。 箭头键移动,z =运行,x =跳转,c =拍摄。 尝试跳进第一个坑,并在墙上滑动。 这里是碰撞检测代码: function checkCollisions(a, b) { if ((ax > bx + b.width) || (ax + a.width < bx) || (ay > by + b.height) || (ay + a.height < by)) { return false; } else { handleCollisions(a, b); return true; } } function handleCollisions(a, b) […]

从哪里开始,开发一个在线西洋双陆棋游戏?

我想开发一个西洋双陆棋游戏,以对付其他玩家在线,作为学习更多Javascript / jQuery和一个小游戏开发的一种方式。 我是一个Web开发人员,我的大部分经验是在PHP中。 我有最小的Javascript的经验,没有游戏开发经验。 我应该从哪里开始? 是否有任何特定的书籍,教程,图书馆,或框架,将有助于给我一个jumpstart? 作为初学者,我最好使用DOM还是Canvas?

在狭窄的空间中绘制斜线

这本身不是一个游戏开发问题,但是这里是… 我有一个50×50的像素空间,在这个空间中我需要绘制五条线:X和Y轴,以及一条steepest , average和flattest斜线。 我正在使用(Java)代码,没有任何文档或评论,我从来没有在canvas上绘画过。 这是一个175×75像素的盒子的代码。 如上所述,这需要适应50×50的区域。 DrawingArea canvas = new DrawingArea(175, 75); canvasContainer.add(canvas); Rectangle rectangle = new Rectangle(0, 0, 174, 75); canvas.add(rectangle); Line slopeMainLineX = new Line(5, 70, 170, 70); slopeMainLineX.setStrokeOpacity(0.5); canvas.add(slopeMainLineX); Line slopeMainLineY = new Line(40, 70, 40, 0); slopeMainLineY.setStrokeOpacity(0.5); canvas.add(slopeMainLineY); steepestLine = new Line(40, 70, 0, 0); steepestLine.setStrokeWidth(3); canvas.add(steepestLine); avgSlopeLine = new […]

平铺地图坐标

我现在有这个代码: http : //jsfiddle.net/DK67k/2/在这里是二维瓷砖地图,当你点击瓦片,你会得到警报坐标。 但为了得到精确度坐标,你需要点击左上角的瓷砖(瓷砖是16×16),如果我点击右下角瓷砖,我得到第二个瓷砖坐标。 也许有人有想法如何解决这个问题?

如何让一个精灵在HTML5canvas上闪烁?

我想到了当一个角色受到伤害时,许多游戏所产生的闪光效果。 就像在可见的精灵像素上重叠一个较浅的颜色一秒钟。