JavaScript CSS HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


npm release license maintained

© 2017, Nicolas Ramz (@warpdesign). MIT licence.

A simple framework for building 2D games in HTML5 and JavaScript.

Like this one:


  • Read the tutorials to get started with AthenaJS
  • Visit the API documentation for a list of classes and methods available
  • Clone samples repository to get started with AthenaJS
  • For an example of a complete game written using AthenaJS check the athenajs-tetris repository


Here is a non-exhaustive list of features of AthenaJS:

  • Unlimited number of scenes with an unlimited number of sprites
  • Image-based Sprites with any number of animations
  • Tiles-based Maps with horizontal & vertical scrolling
  • Special scene transition effects like Fades, Mosaic can be added easily
  • Map VS Sprite and Sprite vs Sprite collision detection
  • Map Triggers support
  • Sound support with volume and horizontal panning
  • Keyboard & Joytisck input event supported (touch support is planned)


Using the webpack starter

The easiest way to start using AthenaJS is to clone the athenajs-webpack-starter:

git clone
cd athenajs-webpack-starter
npm install && npm start

This will install the necessary dependencies and configuration files to get you started working with AthenaJS using ES2015 and Webpack and create a development server on

You can then edit the file js/main.js.

Manual Way

You can of course install AthenaJS by yourself using npm:

npm install athenajs --save

Or if you're as old school as me, maybe you'll like to do it the way ancients do it :)

<script type="text/javascript" src=""></script>

Quick Start

Once installed, here is how you may start using AthenaJS:


import { Game, Scene, SimpleText } from 'athenajs';

// create a new game
const myGame = new Game({
    name: 'first-game',
    width: 320,
    height: 200
// create a new empty scene
myScene = new class MyScene extends Scene{
    start() {
        const myText = new SimpleText('my text', {
            text: 'This is a test',
            color: 'black'
        // add the object onto the scene

// play this scene


in your html file:

<script type="text/javascript" src="athenajs.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var Game = AthenaJS.Game,
            Scene = AthenaJS.Scene,
            SimpleText = AthenaJS.SimpleText;

        // create a new game
        var myGame = new Game({
            name: 'first-game',
            width: 320,
            height: 200

        // first extend the scene class which results in lots of code in Es5
        // call Scene constructor from MyScene constructor
        function MyScene() {

        // inherit from Scene.prototype
        MyScene.prototype = Object.create(Scene.prototype);

        // redefine the start() method
        MyScene.prototype.start = function () {
            var myText = new SimpleText('my text', {
                text: 'This is a test',
                color: 'black'
            // add the object onto the scene

        // finally correctly set the constructor to MyScene
        MyScene.prototype.constructor = MyScene;

        var myScene = new MyScene();

        // // play this scene

Apps written using AthenaJS


If you are interested in contributing to the AthenaJS code base, simply fork the repository and make a pull-request.

Once you have cloned the repository, simply type:

npm install && npm link && npm start

This will install the prerequisites, add a link to athenajs into your global npm modules directory and build & start watching for changes.

Now to start using athenaJS for testing, simply type the following in the directory of your project using AthenaJS:

npm link athenajs

This will add a link from your project to the global athenajs link that was just created.


Copyright (c) Nicolas Ramz.

Licensed under the MIT License.