简体繁体 English

在HTML5 Canvas中创建平台，移动球

[英]Creating Platforms in HTML5 Canvas, Moving Ball

原文 2012-05-23 19:22:40 7 1 html5/ canvas/ physics

I'm new to canvas and have an elementary knowledge of Javascript. 我是画布的新手，并且具有Javascript的基础知识。 I'm developing a (seemingly) simple game in which a ball rolls from the top left of the screen along a platform. 我正在开发一个（看似）简单的游戏，其中一个球从屏幕的左上方沿着平台滚动。 球的形象

So the ball needs to have some kind of physics applied to it (I suppose) so that it not only moves from right to left but that is also has gravity and the ability to fall off the platform. 因此，球需要对其施加某种物理作用（我想），以便它不仅从右向左移动，而且还具有重力和从平台上掉落的能力。

I am not sure how to achieve creating the platforms nor the ball physics. 我不确定如何创建平台或球物理。 I realize this is an extremely general question - and I'm not asking someone to program this for me - but I just thought I'd poke around a little and see if someone can give me a good push in the right direction. 我意识到这是一个非常笼统的问题-我并没有要求别人为我编写程序-但我只是以为我会开一下一下，看看是否有人可以给我正确的方向。 I'm a little lost here. 我在这里迷路了。

Any help would be appreciated! 任何帮助，将不胜感激！

1 个解决方案

Have a look at Box2DJS which is a JavaScript physics engine for canvas. 看看Box2DJS ，这是一个用于画布的JavaScript物理引擎。 It's a port of a very popular C++ physics engine called Box2D (more accurately, it's a port of the ActionScript 3.0 version which is itself a port of the original). 它是一个非常流行的名为Box2D的 C ++物理引擎的端口（更准确地说，它是ActionScript 3.0版本的端口，后者本身就是原始版本的端口）。

There are a ton of resources out there for the ActionScript 3.0 version which you might find helpful as JavaScript syntax and ActionScript syntax are essentially the same. ActionScript 3.0版本有大量资源，您可能会发现这很有用，因为JavaScript语法和ActionScript语法本质上是相同的。 There are also a few demos out there for the JavaScript version. 还有一些JavaScript版本的演示。 This hello world demo probably has everything you need to get started (right click to view source). 这个Hello World演示可能包含您入门所需的一切（右键单击以查看源代码）。