A JavaScript game engine for smartphones

What is Arctic.js

Arctic.js is a game engine for smartphone web browsers written in JavaScript with HTML5 Canvas. It provides a hierarchical display lists, event propagation and useful animation features. These features are used through ActionScript3 friendly APIs which Flash developers are familier to.


MIT License

Getting started

1. Download Arctic.js
2. Import Arctic.js to your HTML
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="js/arctic.js"></script>
<script type="text/javascript" src="js/game.js"></script>
3. Create game class in your JavaScript file
var GameMain = arc.Class.create(arc.Game, {
  //This method is called in every frame

4. Use the game class
window.addEventListener('DOMContentLoaded', function(e){
  //Pass the width and height of your game and id of the canvas element
  var system = new arc.System(320, 416, 'canvas');

  //The second parameter will be passed as a parameter of initialize method in the game class
  system.setGameClass(GameMain, {hp:100, mp:100});

  system.addEventListener(arc.Event.PROGRESS, function(e){
      console.log(e.loaded + ", " + e.total);

  system.addEventListener(arc.Event.COMPLETE, function(){

  //After finishing its loading, an instance of the game class will be created automatically
  system.load(['a.png', 'b.png']);
}, false);


Ryo Chikazawa(@chikathreesix) Twitter | Blog