npm - punter.js - Versions diffs - 1.0.1 → 1.1.0 - Mend

punter.js 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.MD CHANGED Viewed

@@ -14,7 +14,7 @@ A simple, dependency-free 2D game engine for the browser. No build step, no fram
 - [Install](#install)
 - [Run the Example](#run-the-example)
 - [How it Works](#how-it-works)
-- [punter.init()](#punter-init)
+- [Setup](#setup)
 - [Scenes](#scenes)
 - [Events](#events)
 - [Sprites](#sprites)
@@ -61,15 +61,15 @@ Then open **http://localhost:3000/games/pong.html** in your browser.
 Every punter.js game follows the same three-step pattern:
-1. **init** - specify which canvas to use and which images/sounds to preload
+1. **setup** - specify which canvas to use and which images/sounds to preload
 2. **scene** - define a named scene (level, menu, etc.) with update/draw logic
 3. **ready** - switch to a scene once everything has loaded
 ```js
 // 1. Load assets
-punter.init({
+punter.setup({
   canvas: '#game',
-  sprites: { player: 'images/player.png' },
+  images: { player: 'images/player.png' },
   sounds:  { jump: 'sounds/jump.mp3' }
 });
@@ -96,15 +96,15 @@ punter.on('ready', function () {
 });
 ```
-## `punter.init()`
+## Setup
 Call this once at the start. The `ready` event fires once all assets have loaded.
 ```js
-punter.init({
+punter.setup({
   canvas: '#game',   // CSS selector or HTMLCanvasElement
   debug: false,      // true = show FPS and bounding boxes
-  sprites: {
+  images: {
     player: 'images/player.png',
     coin:   'images/coin.png'
   },
@@ -117,7 +117,7 @@ punter.init({
 Option    | Required | Description
 ----------|----------|------------------------------------------------
 `canvas`  | Yes      | CSS selector (`'#game'`) or `HTMLCanvasElement`
-`sprites` | No       | Key/path pairs of images to preload
+`images`  | No       | Key/path pairs of images to preload
 `sounds`  | No       | Key/path pairs of audio files to preload
 `debug`   | No       | Enables the debug overlay. Default: `false`
@@ -179,7 +179,7 @@ var player = punter.createSprite({
 Option           | Default    | Description
 -----------------|------------|----------------------------------------------------------------------------------------------------
 `id`             | -          | **Required.** Unique name for this sprite.
-`key`            | -          | **Required.** Image key from `config.sprites`. Pass an array (`['frame1','frame2']`) for animation.
+`key`            | -          | **Required.** Image key from `config.images`. Pass an array (`['frame1','frame2']`) for animation.
 `x`              | -          | **Required.** Horizontal position in pixels or `'50%'`.
 `y`              | -          | **Required.** Vertical position in pixels or `'50%'`.
 `w`              | auto       | Width in pixels or percent. Inferred from the image if omitted.
@@ -294,7 +294,7 @@ punter.on('update', function () {
 ## Sound
 ```js
-punter.init({
+punter.setup({
   sounds: { jump: 'sounds/jump.mp3', music: 'sounds/theme.mp3' }
 });
@@ -419,7 +419,7 @@ html:not([data-punter-loading]) #loader { display: none; }
 ## Debug Mode
 ```js
-punter.init({ canvas: '#game', debug: true }); // enable at startup
+punter.setup({ canvas: '#game', debug: true }); // enable at startup
 punter.debug = true;                            // or toggle at runtime
 ```

package/games/pong.html CHANGED Viewed

@@ -1,13 +1,26 @@
 <!doctype html>
 <html>
   <head>
+    <title>Pong</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Pong</title>
     <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body { width: 100%; height: 100%; background: #1e2230; overflow: hidden; }
-      canvas { display: block; }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html, body {
+        width: 100%;
+        height: 100%;
+        background: #1e2230;
+        overflow: hidden;
+      }
+      canvas {
+        display: block;
+      }
     </style>
     <script src="../punter.js"></script>
   </head>
@@ -80,9 +93,9 @@
       // SETUP
       // Load the two sprite images before the game starts.
       // =========================================================
-      punter.init({
+      punter.setup({
         canvas: '#game',
-        sprites: {
+        images: {
           paddle: '../images/pong/sprites/paddle.png',
           ball:   '../images/pong/sprites/ball.png'
         }

package/package.json CHANGED Viewed

@@ -1,13 +1,14 @@
 {
   "name": "punter.js",
-  "version": "1.0.1",
-  "description": "A lightweight, dependency-free JavaScript 2D game engine for the browser. Drop in a script tag and start building.",
+  "version": "1.1.0",
+  "description": "A simple, dependency-free 2D game engine for the browser. No build step, no frameworks - just one script tag.",
   "main": "punter.js",
   "directories": {
     "test": "tests"
   },
   "scripts": {
     "start": "npx serve .",
+    "start:pong": "npx serve . -l 4000 & npx open-cli http://localhost:4000/games/pong.html",
     "test": ". \"$NVM_DIR/nvm.sh\" && nvm use && NODE_ENV=test TZ=UTC node_modules/.bin/jasmine --config=tests/jasmine/config.json"
   },
   "repository": {

package/punter.js CHANGED Viewed

@@ -106,11 +106,11 @@
     })();
     /**
-     * Initialises the engine with canvas, sprites, sounds, and buttons
+     * Initialises the engine with canvas, images, sounds, and buttons
      * @param {Object} config - configuration object
      * @returns {void}
      */
-    function init(config) {
+    function setup(config) {
         config = config || {};
@@ -151,11 +151,11 @@
         _boundsCanvas = document.createElement('canvas');
         _boundsCtx = _boundsCanvas.getContext('2d', { willReadFrequently: true });
-        loadSprites(config.sprites || {}).then(function() {
+        loadImages(config.images || {}).then(function() {
             // precompute bounds for all sprite frames
-            if (config.sprites) {
-                for (var key in config.sprites) {
+            if (config.images) {
+                for (var key in config.images) {
                     var img = images[key];
                     if (img && img.complete && img.naturalWidth) {
                         // this warms up the boundingCache
@@ -182,13 +182,13 @@
     }
     /**
-     * Loads and decodes all sprite images
-     * @param {Object} sprites - Key-value map of sprite keys to image URLs
+     * Loads and decodes all images
+     * @param {Object} images - Key-value map of image keys to image URLs
      * @returns {Promise} - Resolves when all images are loaded and decoded
      */
-    function loadSprites(sprites) {
+    function loadImages(imageMap) {
-        var keys = Object.keys(sprites);
+        var keys = Object.keys(imageMap);
         var total = keys.length;
         if (!total) return Promise.resolve();
@@ -234,7 +234,7 @@
             for (var i = 0; i < total; i++) {
                 var key = keys[i];
-                var url = sprites[key];
+                var url = imageMap[key];
                 var img = new Image();
                 img.key = key; // for debugging
                 img.onload = handleLoad.bind(img, key);
@@ -1003,7 +1003,7 @@
      */
     function startLoop() {
-        if (!_initilised) throw new Error('punter.init must be called first');
+        if (!_initilised) throw new Error('punter.setup must be called first');
         _canvasCtx = _canvas.getContext('2d', { alpha: true, desynchronized: true });
         _canvasCtx.imageSmoothingEnabled = false;
@@ -1067,7 +1067,7 @@
     function pauseLoop() {
-        if (!_initilised) throw new Error('punter.init must be called first');
+        if (!_initilised) throw new Error('punter.setup must be called first');
         if (_loopId !== null) {
             cancelAnimationFrame(_loopId);
@@ -1090,7 +1090,7 @@
      */
     function playSound(name, options) {
-        if (!_initilised) throw new Error('punter.init must be called first');
+        if (!_initilised) throw new Error('punter.setup must be called first');
         var buffer = sounds[name];
         if (!buffer) return;
@@ -1131,7 +1131,7 @@
     function stopSound(name) {
-        if (!_initilised) throw new Error('punter.init must be called first');
+        if (!_initilised) throw new Error('punter.setup must be called first');
         var arr = playingSounds[name];
         if (!arr || !arr.length) return;
@@ -1296,7 +1296,7 @@
     var api = {
         // initialization
-        init: init,
+        setup: setup,
         // scene lifecycle
         scene: function (name, handler) {
@@ -1304,7 +1304,7 @@
         },
         go: function (name) {
-            if (!_initilised) throw new Error('punter.init must be called first');
+            if (!_initilised) throw new Error('punter.setup must be called first');
             if (!_scenes[name]) throw new Error('punter.go: unknown scene "' + name + '"');
             // remove existing game loop handlers
@@ -1355,7 +1355,7 @@
         // sprite factory
         createSprite: function(opts) {
-            if (!_initilised) throw new Error('createSprite: punter.init must be called first');
+            if (!_initilised) throw new Error('createSprite: punter.setup must be called first');
             return new Sprite(opts);
         },
         getSprite: function(id) {

package/tests/fixtures/index.html CHANGED Viewed

@@ -20,9 +20,9 @@
         window.__ready = true;
     });
-    punter.init({
+    punter.setup({
         canvas: '#game',
-        sprites: { hero: heroImg },
+        images: { hero: heroImg },
         sounds: { beep: '/tests/fixtures/silence.wav' }
     });
 </script>

package/tests/interface-spec.js CHANGED Viewed

@@ -19,7 +19,7 @@ describe('Interface', function () {
     it('exposes the expected methods', async function () {
         var result = await page.evaluate(function () {
             return {
-                init: typeof punter.init,
+                setup: typeof punter.setup,
                 scene: typeof punter.scene,
                 go: typeof punter.go,
                 on: typeof punter.on,