Javascript game framework or library for board games? - javascript

I am trying to build a card game in Javascript. Currently I am using Raphael to draw my graphics, but I'm bad at math, like really bad. I'm wondering if there is a library or framework out there that would allow me to build a card game in Javascript without having to manually figure out the x and y coordinates of every object I want to draw.

You could look into a Javascript Game Engine, depending on your exact requirements you should find one for you.
Usually a game engine include facilities to manage sprites, layers, and scene; handle events; easy animations; redrawing regions, detecting collisions, etc.
Render Engine is an open source game engine that seems pretty good.
Many more are available under a commercial license.
A list of both open source and commercial game engines is available here, with brief descriptions to allow you to quickly find your way (discarding the not-yet-mature engines and choosing based on features or focus).

Related

Projecting arbitrary HTML onto a plane in 3D space

I need to render an essentially 2-dimensional grid in the web-browser; a chess-board, say.
But I want to give the user the option to rotate this chess-board in a 3D space, so it can be seen from arbitrary angles. (Eventually other 3D objects may co-exist in this space, but that's irrelevant for now.)
I'm now facing the choice of how to render this board. Choices include WebGL, or HTML coupled with CSS / Javascript transformations. I would prefer an HTML / CSS / Javascript solution. This would have the advantage that I can continue to use frameworks like AngularJS to manage the data on the board.
Question: Are currently available CSS3 + Javascript techniques reliable enough for use in production code? And can you recommend specific libraries or websites to look at?
Good browser-coverage would be nice, but is not the main concern. This will be a special purpose application; if necessary, we can ask our users to install the latest public release of Chrome or Firefox.

HTML5/JS - A good game engine which doesn't rely on Canvas?

I'm looking to build an RTS game built mainly in HTML/CSS. There would be a map, but I am unsure if to build it in Canvas or some other way.
The map needs to stretch out for different window sizes, so I was thinking maybe SVG.
I've literally found a ton of game engines, but they seem to mainly rely on canvas.
I guess my main priorities are:
sound
frame limiting
time traversal
AI
I'm looking for a game engine library to use in Javascript that lets me render DOM elements and not just canvas elements.
Try Crafty game engine. It lets you choose between canvas and DOM rendering. And it got lots of other good stuff.
BabylonJS is the best gaming engine right now. It supports geometry instancing which provides good performance to render large amounts of units on screen. Plus it comes with its own physics engine, supports WebGL, imports Blender models and ton of other great features.
http://www.babylonjs.com/

Temple Run Breakdown

This question is about understanding how a game like temple run might be implemented in HTML with/without using the canvas. I have a vague idea about how swipeLeft, swipeRight
etc. might be implemented. But I am not able to gauge how the environments might be developed.
I am not asking for any help with the code here .I just want to have your opinions about implementing the environment. Is it just one huge sprite? If so, how will the user see random environments in the game each time he spawns?
It is not a single sprite. Assuming we're talking about the same Temple Run, it's a 3D game, probably using OpenGL. The fog effect means the game doesn't have to render objects in the distance. If you want to make a similar game, I suggest you look at one of the fine 3D game platforms available for Android and/or iOS.
You can do 3D games in HTML, and there are libraries that help, but unless you're making a website and not a mobile app, then it's better to do it native.

2D interactive animation engine in HTML5

I'm looking for a simple JavaScript library or framework to create interactive 2D animations in the browser. (Excuse the buzzword in the title, but I'm not set on any particular rendering technology like Canvas or SVG.)
This should make it simple to draw and animate arbitrary (though not very sophisticated) shapes on a canvas screen and allow users to select and move these shapes as objects (kind of like a very basic RTS game engine).
Ideally, the following features should be supported (directly or indirectly; I'd implement it myself if necessary):
panning
zooming
fisheye partial zooming
box selection (selecting multiple objects by drawing a box around them)
Not being familiar with such things yet, I find it tricky to research what's out there (e.g. regarding search terms). Also, I have no illusions about some magical package that doesn't require any effort on my part - indeed, I'd prefer simple and readable libraries so I can learn about the basics by reading the source.
If you like simple libraries, perhaps take a look at GameJS. It claims to be "a thin library on top of the HTML5 canvas element." It's a port of PyGame to JavaScript, which in my experience is a fairly nice abstraction layer that at the same time doesn't overdo it.
If that doesn't cut it, have a look at this list of JS game (and animation) engines.
You probably did make a search and found dozens of js game engines. I will just narrow it down for you. It is impossible to just spit out one single js game engine. Also, you might find some to be more appropriate than others based on the type of game you want to make. So here they are
LimeJS
Impact
Crafty

Suitable tool for simple interactive web application

I want to create not complex interactive web application. It has some pinboard and user can create many simple objects on this pinboard (e.g. many small circles). After this user can:
move these objects
delete some of them or create new ones
make multiple selection and move/rotate elements of selected group
place members of the selected group in some special order (grid, line, circle, etc)
Zoom in/out pinboard
I think that I can use Flash/Flex or JavaScript/SVG/VML for this purpose. Disadvantage of Flash is that user must have plugin. Minus of JS/SVG/VML is that there aren't such powerfull developing tools as in Flash case, but if we use some library (like http://raphaeljs.com/) application won't require flash plug-in.
I'm finding right tool for this aim. So give me some recommendations, please. Thanks in advance.
I believe that you can achieve your goals without Flash using HTML(5), JavaScript and not the least the Canvas element present in HTML5.
Bottomline is, unless you today require your application to animate a lot of objects with framerates approaching three digits, the above should suffice fine and will also pair you with a prospective Web development platform. I am often sceptical of the new stuff, but HTML5 and Canvas are fairly standardized, patent-free and are being actively adopted.
The only benefit of going with Flash that I can think of is being backed by a rich API that does 2D as well as 3D, and the fact that you can later port your ActionScript code to say, JavaScript when you finally decide to go with HTML+JavaScript instead. Aside from having to perhaps rewrite part of your drawing stack, your ActionScript code will require minimal (syntactic mostly) changes.
I would still advise you to go with my first suggestion, unless you need live (camera) video publishing, 3D, sound editing and few features not available easily outside Flash Player. Which I don't think you will need.
You might want to have a look at existing similar projects, such as SVG Edit (MIT license).

Categories