Articles of html canvas

如何在没有html的情况下在canvas上绘制图像

我正在试图添加一个精灵到我的游戏canvas上。 不过,我不想使用图片标签。 但是,无论我多么努力地search,我都没有find办法做到这一点。 就像是: var image = 'sample.jpg' draw(image)

如何让太空侵略者破坏风景并将其塑造成一个形状?

我们都喜欢可以被大块分解的基地, 我最初实现它通过使一个矩形充满个别方块(2×2像素大小的CANVASmatrix)碰撞检测任何子弹(在^ 2效率非常低)。 我现在正在试图让基地变成一个形状,而不是一个无聊的矩形。 我也想在一个被击中的时候执行附近广场的集合,这样就可以把基地拿下来,而不仅仅是被击中的部分。 (容易做一个矩形arrays) 2尺寸仍然是实现这个目标的最好方法吗? 有没有办法创建这个数组,通过某种方式执行一个PNG的图像分析来填充这个数组? 在[i] [j]中,透明零件不会包含任何基础零件。

为什么我的健康状态栏会在我的角色受到伤害时消失?

我正在为我的游戏制作健康栏,如下所示: public void healthBar(Canvas canvas) { float healthScale = happy.getHP() / happy.getMaxHP(); Rect rect = new Rect(20, 20,(120 * (int)healthScale), 40); Paint paint = new Paint(); paint.setColor(Color.RED); canvas.drawRect(20, 20, 220 * healthScale, 40, paint) } 这是每次我的游戏呈现。 游戏开始的时候就是我想要的地方,但是一旦我的角色(快乐)受到任何伤害,它就消失。 而且我知道他的HP每次被击中时只会被减5。 所以这不应该发生? 例: @Startup: happy.getHP() == 100, happy.getMaxHP == 100. when damaged HP -=5, -> happy.getHP() == 95 […]

JavaScript游戏引擎,可以“无缝”与反应原生

我有Unity的经验,但是我不喜欢Unity把你的游戏直接编译成APK(或者相当于IOS)的事实。 我想修改游戏,为多人游戏模式等提供聊天界面。所以,我想这样做 – 创建一个应用程序,并在其中embedded一个多人游戏。 这种方法意味着我必须分别为Android和iOS开发。 然后我遇到了React-Native库,这是stream行的React框架的移动扩展。 我已经决定使用React-Native创建一个应用程序,但是现在我对我应该使用哪个游戏引擎感到困惑。 我认为,由于React-Native是JavaScript,因此游戏引擎需要使用JavaScript进行无缝集成。 我打算使用WebView将游戏embedded到我的react-native应用程序中。 任何人都可以提出一个好的JavaScript游戏引擎,可以与反应原生一起使用吗? 我已经对Phaser和Pixi进行了一些研究,但他们使用WebGL进行渲染,并且我在某处读到WebView对WébGL或Canvas没有很好的支持。

有没有人使用PhoneGap为iPhone制作2D游戏?

我喜欢简单的休闲游戏。 最近我一直在乘公共汽车,那么简单,不用花哨的游戏就非常有趣,而且值得我在App Store上的小额支付。 它让我思考…我很了解HTML5,CSS3和JS。 我研究了PhoneGap ,看起来这是我可以用来制作iPhone应用程序的东西。 我一直在充实自己的游戏是非常简单的2D事务。 有趣,简单和高品质。 这就是我在玩游戏之后所做的事情……我也制作音乐,我的朋友是数字插画师,所以我们一起涵盖了所有的媒体。 是否有人使用PhoneGap为iPhone制作2D游戏? 我假设,因为我想用JS代码,并使用HTML5的Canvas标签,该PhoneGap没有什么比为WebKit视图提供包装? 我知道它不会像使用本机一样快…但使用PhoneGap一个可行的select?

改进旧版Android的性能

我正在学习为移动设备制作html5游戏。 我担心旧版Android上的FPSanimation…因为我使用了很多setTimeouts来更新某些方面,并希望能够采用其他方法的一些建议。 任何建议使这个运行更顺畅?

在HTML5canvas上实施战争迷雾

我一直在努力制造一阵战争迷雾。 实际上我确实创建了它,但是我认为这个实现过于耗费资源而无法使用。 初始信息:我为项目使用了createjs / easeljs框架/库,现在实现了战争迷雾,所以有一个“雾化”图像的图层和地图的底部和顶部的数据是地图的非雾化/清晰层。 在透明层中,我只通过过滤图层来显示特定的部分,其余部分是不可见的。 所以只显示可见的区域。 另外请注意,即使雾化的部分是部分可见的,例如地图的整个地形在战争迷雾之下总是可见的。 这将创建2个具有相同地图信息的不同图层,而不是创建一个单独的战争雾图层,而只包含雾图,并将其过滤以显示未雾化的部分。 到目前为止,我一直无法做到这一点。 所以基本上我现在可以使用filter来显示图层的某些部分,但不能使其中的一部分具有alpha值。 例如,如果我有一个雾层(包含雾),并且想要显示除某些圆形部分(这将显示下面的地图,alpha = 0),那么这是如何实现的? 现在我只能使用过滤来显示图层的某些部分,而不是隐藏它们/使得具有alpha或反向过滤。

HTML5canvas:旋转后获取矩形坐标(相对于屏幕)

update: function(delta) { for (var i = 0; i < this.bullets.length; i++) { this.bullets[i].velocity = this.bullets[i].speed * delta; this.bullets[i].contextX += this.bullets[i].velocity; } }, draw: function(ctx) { for (var i = 0; i < this.bullets.length; i++) { ctx.save(); // Move the context to where the player is then make it face the target degree ctx.translate(this.bullets[i].startX, this.bullets[i].startY); […]

设置一个不同的animation速度来移动不使用精灵的玩家

我正在尝试开始使用HTML5与一个帆布和一些JS简单的游戏。 我有一个我感到很舒服的球员,但是球员动作的速度太快了。 现在,我处理animationATM的方式是,它不使用根据移动而定位不同的图像,而是根据移动的方向在两个不同的图像之间交替。 代码应该更清楚一点。 我认为解决scheme的一部分可能是在不同部分处理交替图像,但是我承认我并不太熟悉这一点,而且这是我第一次做这样的游戏。 $(document).ready(function(){ //****************************************************// //****** Create and get Canvas and its info *******// //****************************************************// var canvas = $("#canvas")[0]; var ctx = canvas.getContext("2d"); var w = $("#canvas").width(); var h = $("#canvas").height(); var score = 0; //the background, loaded and drawn onto canvas var FPS = 30; setInterval(function() { draw(); update(); }, 1000/FPS); //****************************************************// […]

svg太空船游戏机芯2d

我一直在寻找一种方法来使一个svg框移动到所有使用js的方向。 我已经看过很多关于如何做网格的教程,但我希望它有一个可以转动,向前,向后和侧向的方形。 在运动方面,我想要像https://www.chromeexperiments.com/experiment/arena5,除了会有一个正方形而不是三角形,没有敌人。 我的问题是,我不知道如何使一个svg广场stream动,没有网格,但运动只会使用键盘,没有鼠标。 请耐心等待我是js游戏的新手。 这里是我尝试的版本的最大原因,这是svg,现在我正在试图在canvas上。 http://codepen.io/julian-a-avar/pen/PqZvxp