JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Playground

    Playground.js is a framework for your javascript based games. It gives you out-of-box access to essentials like mouse, keyboard, sound and well designed architecture that you can expand to your needs.
    Filed under 

    • 🔾32%Overall
    • 351
    • 8.4 days
    • 🕩40
    • 👥10

    Playground.js

    Out-of-box access to essentials like mouse, keyboard, sound and well designed architecture that you can expand to your needs.

    Need instant help? Join our official slack

    Core feature

    Playground lets you establish a new application and bind essential events in one shot.

    var app = playground({
    
      width: 640,           /* force width */
      height: 480,          /* force height */
      scale: 2,             /* force scale */
      smoothing: false,     /* antialiasing */
    
      /* silently preload assets before main loader */
    
      preload: function() { },
    
      /* assets from preloader available, push some more for main loader */
    
      create: function() { },
    
      /* called when main loader has finished  - you want to setState here */
    
      ready: function() { },
    
      /* called after container/window has been resized */
    
      resize: function() { },
    
      /* called each frame to update logic */
    
      step: function(dt) { },
    
      /* called each frame to update rendering */
    
      render: function(dt) { },
    
      /* states related events (called only for application */
    
      createstate: function() { },
      enterstate: function() { },
      leavestate: function() { },
    
      /* keyboard events */
    
      keydown: function(data) { },
      keyup: function(data) { },
    
      /* pointer events (mouse + touch) */
    
      pointerdown: function(data) { },
      pointerup: function(data) { },
      pointermove: function(data) { },
      pointerwheel: function(data) { },
    
      /* mouse trap */
    
      mousedown: function(data) { },
      mouseup: function(data) { },
      mousemove: function(data) { },
    
      /* finger trap */
    
      touchstart: function(data) { },
      touchend: function(data) { },
      touchmove: function(data) { },
    
      /* gamepad events */
    
      gamepaddown: function(data) { },
      gamepadup: function(data) { },
      gamepadmove: function(data) { }
    
    });
    

    Loaders

    create: function() {
      this.loadData("maps", "units");
      this.loadImages("soldier", "tank", "base");
      this.loadSounds("fire", "medikit", "music");
    }
    

    States

    ready: function() {
      this.setState(Game);
    }
    

    Read more in documentation.

    Show All