Please note that carrotJS is in a very early state and not ready to use. Issues are disabled for now.
carrotJS is a 2D game framework for making HTML5 games which follows a different approach: Instead of using Canvas2D or WebGL for rendering it is entirely based on DOM elements (divs, to be exactly) and CSS. It's an experiment to see what is possible since it is commonly known that DOM manipulations are rather slow in comparison to Canvas2D or WebGL. I'm also developing it just because it's fun and a possibility to learn more about Javascript, CSS and the DOM. ✨
A game can be created and started by a single line of code:
var game = new Carrot.Game();
This creates an empty game container and returns the core object which one should reference. One can also pass that function a few parameters as well, in the following order:
width
Defines the width of the game container. Optional. The default is800
.height
Defines the height of the game container. Optional. The default is600
.container
If one already has a div on the page ready to be taken by carrotJS, pass its id. If the div cannot be found or if none is passed (for example, because none exists), carrotJS will create one itself. The default isnull
.scene
An object which contains the custom states for the game as the propertiespreload
,create
,update
andrender
. One can also leave that parameter empty or only pass one, two or three of the functions. The default isnull
.transparent
Defines if the container div shall be have a transparent background. Iffalse
or parameter not passed, the container will have a black background. The default isfalse
.
A game is made of scenes. For example a loading scene, a game over scene, the actual game scene, ... carrotJS uses states to define such a scene.
preload
is called once the game is created and can be used for loading assets (images, sounds, JSON, ...).create
is being called once all assets are successfully loaded and the game actually starts.update
is then being called each logic frame (60 per second, most of the time) after the internal_update
core loop.render
is being called as fast as possble with a maximum of 60 per second after the internal_render
core loop. This state could be used to display debug info.
A passed scene object could look like this: { preload: function(){}, create: function(){}, update: function(){}, render: function(){} }
.
https://github.com/bonsaiheldin/carrotJS/tree/master/examples/basics
https://bonsaiheldin.github.io/carrotJS/
For now carrotJS uses https://github.com/IceCreamYou/MainLoop.js (MIT licensed) for the two core loops. Thank you!
The carrot logo was made by @qubodup and released under the Creative Commons 0 License (Public Domain). https://opengameart.org/content/easter-carrot-pick-up-item - Thank you!