Is this possible in JavaScript?

Question

I want to create a game similar to ElastoMania in JavaScript.

I was wondering, would the collision detection be impossible using divs because they are square, and the game principle revolves around driving up slopes etc?

Would this be doable in canvas?

Also, would using a library such as jQuery slow down the running of a JS game? I've noticed most games are built with vanilla JS, so I had the idea that using a library for this sort of application (a game) is a bad idea.

Thanks

UPDATE

This seems like a complicated game! I may still go ahead with it. If anyone wants to jump aboard this project, please contact me.

Answer 1

Found a link that might be useful to you

Collision Demo

Answer 2

Separate your model from your presentation.

The game logic and "physics" will require custom scripting, and have nothing to do with the presentation model (i.e. div's).

You may be able to use jQuery for the presentation side, but this is a special case, performance-intensive application, and, well, there's a reason most games are written in "vanilla" script.

Answer 3

It is very possible, if you use the Canvas Tag.

http://developer.mozilla.org/en/Canvas%5Ftutorial

Here is a tetris game in Canvas and the library behind this game is available to anyone:

http://tommysmind.com/gamejs/

If you are looking for some libraries that may be of help:

http://openjsan.org/ (a bunch of libraries anyone can contribute to)

It looks like such a game would be quite an effort to build. It would probably be similar to this implementation of super mario bros:

http://nihilogic.dk/labs/mario/mario%5Fsmall%5Fmusic.htm

Answer 4

This is a very good javascript implementation of a ball simulator.
Maybe you can learn something from that. Maybe it is usable for the tire collision detection in your project. This demo shows that it is possible to implement physical models in javascript at reasonable performance.

As you might already know, there is an open source implementation of a ElastoMania like game called X-Moto
X-Moto uses ODE.

Edit: I just found a JavaScript implementation of Box2D: Box2D-JS

Answer 5

You can get a slope effect by using different colors of borders of a div.

<div style="border-left: solid 10px black; border-top: solid 10px red">

will give you a diagonal border, which you might find useful.

Answer 6

If it's driving up slopes I'd rather used a 1-d array for storing the height at each point and referred to id every time I need to check the position of the player against the ground. So, you'd basicaly need an image of the slope AND the corresponding set of y-s at each x:

  ___
 /   ---
/       ____

024443330000... etc.

There is one problem however: you couldn't have ideally vertical edges there, as they'd need 2 y points per 1 x.