Articles of html canvas

一段时间后帆布的performance会慢慢下降

我正在创建一个简单的游戏,并看到性能开始下降的震惊。 它从来没有发生过我,很可能是因为我使用图像而不是上下文图纸。 所以我用了这个function,整个游戏变得很慢,30秒后就不能玩了。 Office.prototype.draw = function(){ for(var i = 0; i < this.tables.length; i++){ for(var j = 0; j < this.tables[i].length; j++){ Canvas2D.ctx.rect((373 * j) + 75, (370 * i) + 250, 170, 20); Canvas2D.ctx.fillStyle = 'green'; Canvas2D.ctx.fillRect((373 * j) + 75, (370 * i) + 250, this.moneyBar[(i*4)+j], 20); // Draw the experience bar. Canvas2D.ctx.rect((373 […]

在Javascript中的canvas上接收键盘事件

我需要在canvas元素中接收键盘事件。 点击事件收到,但按键不是。 这是我的代码,它不处理关键事件: var canvasElm = $('canvas'); Event.observe('canvas', 'keypress', function(e) { console.log('Key event is received!!'); console.log(e); }); 我怎样才能使它处理这些关键事件?

在低资源计算机上testingHTML5canvas游戏

我已经在HTML5&JS中做了一个游戏,并且想要在不同types的用户设置上testing它,因为我听说它在老的MacBook上performance不佳。 我怎样才能做到这一点? 我正在考虑像browserstack.com,但GPU,CPU和内存testing。

如何解决ArrayList outOfBoundsExeption?

我越来越: 09-02 17:15:39.140: E/AndroidRuntime(533): java.lang.IndexOutOfBoundsException: Invalid index 1, size is 1 09-02 17:15:39.140: E/AndroidRuntime(533): at java.util.ArrayList.throwIndexOutOfBoundsException(ArrayList.java:251) 当我用这种方法杀死敌人时: private void checkCollision() { Rect h1 = happy.getBounds(); for (int i = 0; i < enemies.size(); i++) { for (int j = 0; j < bullets.size(); j++) { Rect b1 = bullets.get(j).getBounds(); Rect e1 = enemies.get(i).getBounds(); if (b1.intersect(e1)) […]

根据用户的触摸沿着它的中心旋转canvas – Android

我想要基于用户的触摸旋转canvas的中心轴。 我想旋转基于中心,但其旋转基于左上角。 所以我只能看到1/4的图像旋转。 任何想法.. 就像一个老电话拨号器。 我已经尝试过,如下所示 onDraw(Canvas canvas){ canvas.save(); // do my rotation canvas.rotate(rotation,0,0); canvas.drawBitmap( ((BitmapDrawable)d).getBitmap(),0,0,p ); canvas.restore(); } @Override public boolean onTouchEvent(MotionEvent e) { float x = e.getX(); float y = e.getY(); updateRotation(x,y); mPreviousX = x; mPreviousY = y; invalidate(); } private void updateRotation(float x, float y) { double r = Math.atan2(x – centerX, […]

以与游戏运行速度不同的速度制作animation

我正在构建一个Javascript / canvas平台游戏,并且很好。 我真正想到的唯一问题就是我的玩家精灵的animation。 游戏循环每16ms运行一次,相当于60fps。 在每个游戏循环中,我使用我的玩家类(称为绘制)的方法来绘制玩家精灵。 精灵看起来像这样: http : //i.imgur.com/uM3Un.png 在每一次平局方法的调用中,我都在推进玩家精灵的“框架”,给玩家带来幻想。 据我所知,这是常见的做法。 但是,由于我的绘图方法每16ms运行一次游戏循环,所以我的玩家精灵的animation速度非常快,而且看起来并不现实。 有没有办法减慢到预定义的速度,或者我将不得不求助于我的播放器精灵增加重复帧的负载? 显然,这不是一个很好的解决scheme,为了在60fps的游戏速度下显得逼真,我需要有很多帧。 这是我的相关代码: // Sets off the main game loop setInterval("gameLoop()", gameSpeed); function gameLoop() { // Updates player.update(); // Draw c.clearRect(0, 0, canvas.width, canvas.height); player.draw(); } // Then in my player class… this.draw = function() { if(this.state == "idle") { c.drawImage(this.idleSprite, this.idleSprite.frameWidth […]

如何绘制Y轴较小的对象?

在我的游戏中有各种物体的大型2D地图。 例子 。 正如你所看到的,一旦创建了相同types的对象(例如树)被正确地放置,而另一种types的对象(敌人)被放置在不管位置的顶部。 现在,我怎么安排一切都按照它的位置来画? 另一个例子(狗应该在树前画,而不是在它之上):

在HTML5平台游戏中拍摄的问题

我只使用JavaScript和HTML5canvas编码2D sidescroller,在我的游戏中,我有两个拍摄问题: 1)玩家不断射出子弹。 即使拍摄button被按下,我也希望玩家只能拍摄一颗子弹。 2)另外,当所有项目符号被移除时,我得到一个错误“Uncaught TypeError:Can not call method'draw'of undefined”。 我的拍摄代码是这样的:当玩家射击,我做game.bullets.push(new Bullet(this, this.scale)); 在那之后: function Bullet(source, dir) { this.id = "bullet"; this.width = 10; this.height = 3; this.dir = dir; if (this.dir == 1) { this.x = source.x + source.width – 5; this.y = source.y + 16; } if (this.dir == -1) { this.x = […]

有没有什么好的html 5 mmodevise教程?

大家好。 在玩了gaia在线的zOMG之后,我感受到了一种灵感,并想要恢复我已经放置了几年的旧项目的想法。 我正在寻找与HTML5(即基于canvas,基于SVG的精灵和WebGL),以建立一个基于graphicsnetworking的MUD / MMO。 显然,这是一个新的想法,在search谷歌后,我还没有真正发现了很多好的资源。 但有没有人有任何教程或其他资源指向我在正确的方向吗?

在Javascript中创建HTML5canvas对象

我目前正在学习如何使用JavaScript制作HTML5 Canvas游戏。 我想用面向对象的JavaScript来管理游戏的元素,但是我遇到了麻烦。 我已经做了大量的研究,但似乎有万事万物的办法,没有一个人能够提供我想要得到我想要的结果的信息。 更具体地说,我在使用对象原型时遇到了麻烦。 我已经开始通过像我这样在代码中创建canvas var body = document.getElementsByTagName("body")[0]; var canvas = document.createElement('canvas'); body.appendChild(canvas); 我的思维过程让我思考,我应该让这个东西出来,所以如果需要,我可以稍后dynamic使用它。 所以我就这样实现了。 var gamearea = function(){ this.generate = function(){ var body = document.getElementsByTagName("body")[0]; var canvas = document.createElement('canvas'); body.appendChild(canvas); } 我知道我可能需要多个canvas元素的上下文,所以我想我应该为此创建一个原型。 var context = function() { return canvas.getContext('2d'); } 我的想法是,我可以通过使用像这样的原型将它们放置在需要的上下文中。 var background = Object.create(context); var foreground = Object.create(context); 但为了给这些对象分配ID,以便以后可以引用它们,我需要为它们分配ID。 我发现一个博客,指出正确的格式意味着实施以下。 var […]