### Install Dependencies and Launch Browser

Source: https://github.com/phaserjs/examples/blob/master/README.md

Installs project dependencies and launches the browser to display Phaser 4 examples. Press Ctrl + c to stop the http-server process.

```bash
npm install
```

--------------------------------

### Create Bootable Example File Element

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/index.html

Generates a card element for a bootable example, linking to 'boot.html' and displaying a thumbnail preview.

```javascript
function createBootFile (index, filename, filepath) {
    var div = $('<div></div>').addClass('card');
    var a = $('<a></a>', {
        href: 'boot.html?src=' + filepath
    });
    const imgPath = filepath
        .replace(/^src/, 'screenshots')
        .replace(/\.json$/, '.png')
        .replace(/\.js$/, '.png');
    var img = $('<img />', {
        src: imgPath,
        width: 240,
        height: 180
    });
    a.append(img);
    var p = $('<p></p>').addClass('card-text').text(currentCrumb);
    div.append(a).append(p);
    $('#folderList').append(div);
}
```

--------------------------------

### Initialize PouchDB and Load Example

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/edit.html

Initializes a PouchDB database for storing examples and attempts to load an example from the database or filesystem based on the URL query parameter.

```javascript
var db;
var editor;
var entry;
var version = 1;
var phaserVersion;

$(document).ready(function () {
    phaserVersion = getQueryString('v', versions[1].val);
    console.log('v', phaserVersion);

    db = new PouchDB('phaser3-examples');

    if (getQueryString('src')) {
        var filename = getQueryString('src');
        db.get(filename, function (err, doc) {
            if (err) {
                console.log(filename, 'loaded from filesystem');
                loadSource(filename, function (source) {
                    loadEditor(source, filename);
                });
            } else {
                console.log(filename, 'loaded from db - version', doc.version);
                entry = doc;
                version = doc.version;
                loadEditor(doc.code.join('\n'), filename);
            }
        });
    } else {
        var source = [
            'var config = { width: 800, height: 600 };',
            'var game = new Phaser.Game(config);'
        ].join('\n');
        loadEditor(source, 'example.js');
    }
});
```

--------------------------------

### Update Examples JSON File

Source: https://github.com/phaserjs/examples/blob/master/README.md

Builds a new 'examples.json' file, typically used after adding a new example to the repository.

```bash
npm run update
```

--------------------------------

### Launch Browser to Show Examples

Source: https://github.com/phaserjs/examples/blob/master/README.md

Launches the browser to display Phaser 4 examples. Press Ctrl + c to stop the http-server process.

```bash
npm start
```

--------------------------------

### Initialize Examples Browser

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/list.html

Loads example data from 'examples.json' and initializes the browser based on the 'dir' query parameter. If 'dir' is present, it loads the specified directory; otherwise, it displays top-level folders.

```javascript
var dir = ''; var data = {}; var folder = []; var trail = []; var well = []; var index = {};

$(document).ready(function () {
    $.getJSON('examples.json', function (json) {
        data = json;
        dir = getQueryString('dir');
        if (dir) {
            loadFolders(dir);
        } else {
            createTopLevelFolders();
        }
    });
});
```

--------------------------------

### Create Standard Example File Element

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/index.html

Generates a card element for a standard example file, linking to 'view.html' or '100.html' (for ScaleManager) and displaying a thumbnail.

```javascript
function createFile (index, filename, filepath) {
    if (filename.substr(0, 1) === '_') {
        return;
    }
    var div = $('<div></div>').addClass('card');
    if (dir === 'scalemanager/') {
        var a = $('<a></a>', {
            href: '100.html?src=' + filepath
        });
    } else {
        var a = $('<a></a>', {
            href: 'view.html?src=' + filepath
        });
    }
    const imgPath = filepath.replace(/^src/, 'screenshots').replace(/\.json$/, '.png').replace(/\.js$/, '.png').toLowerCase();
    var imgdiv = $('<div></div>').addClass('imageHolder');
    var img1 = $('<img />', {
        src: 'screenshots/loading.png',
        width: 400,
        height: 300,
        class: 'card-image shot2'
    });
    var img2 = $('<img />', {
        src: imgPath,
        width: 400,
        height: 300,
        class: 'card-image shot1'
    });
    imgdiv.append(img1);
    imgdiv.append(img2);
    a.append(imgdiv);
    var p = $('<p></p>').addClass('card-text');
    p.append($('<a></a>', {
        href: 'edit.html?src=' + filepath
    }).text(filename.replace('.js', '')));
    div.append(a).append(p);
    $('#folderList').append(div);
}
```

--------------------------------

### Phaser 3 Debugging Setup

Source: https://github.com/phaserjs/examples/blob/master/public/debug.html

Initializes logging limits and dynamically injects a specified JavaScript file into the document body. This is useful for loading Phaser 3 examples.

```javascript
window.logIndex = 0; window.logLimit = 300; window.log = function () { if (window.logIndex < window.logLimit) { window.logIndex++; console.log.apply(this, arguments); } }
```

```javascript
$(document).ready(function () {
    var filename = getQueryString('src');

    if (filename.substr(-3) === '.js') {
        document.title = document.title.concat(' :: ' + filename);

        // Inject the example source
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = filename;

        document.body.appendChild(s);
    }
});
```

--------------------------------

### Open Folder and Render Contents

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/index.html

Clears the current folder list, checks for a 'boot.json' to determine if it's a bootable example, and then renders subfolders or files accordingly. Updates browser history.

```javascript
function openFolder () {
    $('#folderList').empty();
    createBackFolder();
    var isBootable = false;
    for (var i = 0; i < folder.length; i++) {
        var child = folder[i];
        if (child.name === 'boot.json') {
            isBootable = true;
            break;
        }
    }
    if (isBootable) {
        createBootFile(i, child.name, child.path);
    } else {
        for (var i = 0; i < folder.length; i++) {
            var child = folder[i];
            if (child.hasOwnProperty('children')) {
                createFolder(i, child.name, child.path);
            }
        }
        for (var i = 0; i < folder.length; i++) {
            var child = folder[i];
            if (!child.hasOwnProperty('children')) {
                createFile(i, child.name, child.path);
            }
        }
    }
    // Update browser history
    var stateObj = { well: well };
    history.pushState(stateObj, '', 'index.html' + getURLWell());
}
```

--------------------------------

### Phaser 3 Scene Creation and Setup

Source: https://github.com/phaserjs/examples/blob/master/public/src/games/firstgame/part5.html

Initializes the game scene by adding a background image, creating static platforms, and setting up the player sprite with physics and collision bounds.

```javascript
function create () {
    this.add.image(400, 300, 'sky');
    platforms = this.physics.add.staticGroup();
    platforms.create(400, 568, 'ground').setScale(2).refreshBody();
    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
    player = this.physics.add.sprite(100, 450, 'dude');
    player.setBounce(0.2);
    player.setCollideWorldBounds(true);
```

--------------------------------

### Phaser 3 Game Creation and Setup

Source: https://github.com/phaserjs/examples/blob/master/public/src/games/firstgame/part7.html

Initializes game objects, physics colliders, and player animations. This function runs once when the scene starts.

```javascript
function create () {
  this.add.image(400, 300, 'sky');

  platforms = this.physics.add.staticGroup();

  platforms.create(400, 568, 'ground').setScale(2).refreshBody();

  platforms.create(600, 400, 'ground');
  platforms.create(50, 250, 'ground');
  platforms.create(750, 220, 'ground');

  player = this.physics.add.sprite(100, 450, 'dude');
  player.setBounce(0.2);
  player.setCollideWorldBounds(true);

  this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', {
      start: 0,
      end: 3
    }),
    frameRate: 10,
    repeat: -1
  });

  this.anims.create({
    key: 'turn',
    frames: [ {
      key: 'dude',
      frame: 4
    } ],
    frameRate: 20
  });

  this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', {
      start: 5,
      end: 8
    }),
    frameRate: 10,
    repeat: -1
  });

  cursors = this.input.keyboard.createCursorKeys();

  this.physics.add.collider(player, platforms);
}
```

--------------------------------

### Game Scene Creation and Physics Setup

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/src/games/firstgame/part6.html

Initializes the game scene by adding a background, creating static platforms, adding a player sprite with physics properties, and setting up collision detection.

```javascript
function create () {
    this.add.image(400, 300, 'sky');
    platforms = this.physics.add.staticGroup();
    platforms.create(400, 568, 'ground').setScale(2).refreshBody();
    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
    player = this.physics.add.sprite(100, 450, 'dude');
    player.setBounce(0.2);
    player.setCollideWorldBounds(true);
    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', {
            start: 0,
            end: 3
        }),
        frameRate: 10,
        repeat: -1
    });
    this.anims.create({
        key: 'turn',
        frames: [ { key: 'dude', frame: 4 } ],
        frameRate: 20
    });
    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('dude', {
            start: 5,
            end: 8
        }),
        frameRate: 10,
        repeat: -1
    });
    this.physics.add.collider(player, platforms);
}
```

--------------------------------

### Navigate and Display Folders

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/list.html

Manages the display of folders and files within the examples browser. It creates folder and file entries, handles navigation up and down directory levels, and updates breadcrumbs.

```javascript
function openFolder () {
    $('#folderList').empty();
    createBackFolder();
    var isBootable = false;
    for (var i = 0; i < folder.length; i++) {
        var child = folder[i];
        if (child.name === 'boot.json') {
            isBootable = true;
            break;
        }
    }
    if (isBootable) {
        createBootFile(i, child.name, child.path);
    } else {
        for (var i = 0; i < folder.length; i++) {
            var child = folder[i];
            if (child.hasOwnProperty('children')) {
                createFolder(i, child.name, child.path);
            }
        }
        for (var i = 0; i < folder.length; i++) {
            var child = folder[i];
            if (!child.hasOwnProperty('children')) {
                createFile(i, child.name, child.path);
            }
        }
    }
    // Update browser history
    var stateObj = { well: well };
    history.pushState(stateObj, '', 'list.html' + getURLWell());
}
```

```javascript
function createBackFolder () {
    var div = $('<div></div>').addClass('card');
    var a = $('<a></a>', {
        href: 'list.html' + getURLWell(true)
    });
    var img = $('<img />', {
        src: 'images/back.png',
        width: 32,
        height: 32
    });
    img.click(function (event) {
        upLevel();
    });
    a.append(img);
    div.append(a);
    $('#folderList').append(div);
}
```

```javascript
function createBootFile (index, filename, filepath) {
    var div = $('<div></div>');
    var a = $('<a></a>', {
        href: 'boot.html?src=' + filepath
    });
    const imgPath = filepath
        .replace(/^src/, 'screenshots')
        .replace(/\.json$/, '.png')
        .replace(/\.js$/, '.png');
    var img = $('<img />', {
        src: imgPath,
        width: 240,
        height: 180
    });
    a.append(img);
    var p = $('<p></p>').addClass('card-text').text('Play Game');
    // p.append($('<a></a>', { href: 'edit.html?src=' + filepath }).text(filename.replace('.js', '')));
    div.append(a).append(p);
    $('#folderList').append(div);
}
```

```javascript
function createFile (index, filename, filepath) {
    if (filename.substr(0, 1) === '_') {
        return;
    }
    var div = $('<div></div>').addClass('entry');
    var a = $('<a></a>', {
        href: '100.html?src=' + filepath
    });
    const imgPath = filepath
        .replace(/^src/, 'screenshots')
        .replace(/\.json$/, '.png')
        .replace(/\.js$/, '.png');
    var img = $('<img />', {
        src: imgPath,
        width: 120,
        height: 90
    });
    a.append(img);
    var p = $('<p></p>').addClass('card-text');
    p.append($('<a></a>', {
        href: '100.html?src=' + filepath
    }).text(filename.replace('.js', '')));
    div.append(a).append(p);
    $('#folderList').append(div);
}
```

```javascript
function createFolder (index, filename, filepath) {
    if (filename === 'archived' || filename.substr(0, 1) === '_') {
        return;
    }
    var div = $('<div></div>').addClass('card');
    var a = $('<a></a>', {
        href: 'list.html' + getURLWell(false, filename)
    });
    var p = $('<p></p>').addClass('card-text');
    p.append($('<a></a>', {
        href: 'list.html' + getURLWell(false, filename)
    }).text(filename));
    div.append(a).append(p);
    $('#folderList').append(div);
}
```

```javascript
function createTopLevelFolders () {
    $('#folderList').empty();
    trail = [];
    well = [];
    folder = data.children;
    for (var i = 0; i < folder.length; i++) {
        createFolder(i, folder[i].name, folder[i].path);
    }
}
```

```javascript
function downLevel (index, filename, skipOpen) {
    if (skipOpen === undefined) {
        skipOpen = false;
    }
    if (!folder[index].hasOwnProperty('children')) {
        // console.log('No children, aborting');
        return;
    }
    // Record the trail
    trail.push(folder);
    folder = folder[index].children;
    well.push(filename);
    addBreadcrumb(filename);
    if (!skipOpen) {
        openFolder();
    }
}
```

```javascript
function upLevel () {
    removeBreadcrumb();
    if (trail.length === 1) {
        createTopLevelFolders();
    } else {
        folder = trail[trail.length - 1];
        trail.pop();
        well.pop();
        openFolder();
    }
}
```

```javascript
function loadFolders (param) {
    trail = [];
    well = [];
    folder = data.children;
    var dirs = [];
    var raw = param.split('/');
    for (var i = 0; i < raw.length; i++) {
        raw[i] = decodeURI(raw[i]);
        if (raw[i] !== '') {
            dirs.push(raw[i]);
        }
    }
    var current = data.children;
    dirs.forEach(function(level) {
        for (i = 0; i < current.length; i++) {
            if (current[i].name === level) {
                downLevel(i, current[i].name, true);
                current = current[i].children;
                break;
            }
        }
    });
    openFolder();
}
```

--------------------------------

### Initialize Phaser Search

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/index.html

Initializes the Phaser search functionality and fetches example data. This should be called when the document is ready.

```javascript
$(document).ready(function () {
    PHASER.search.initialize();
    $.getJSON('examples.json', function (json) {
        data = json;
        dir = getQueryString('dir');
        var q = getQueryString('q');
        $('#search-query').val(q);
        if (q) {
            search(q);
        }
        if (dir) {
            loadFolders(dir);
        } else {
            createTopLevelFolders();
        }
    });
});
```

--------------------------------

### Phaser 3 Examples Navigation Logic

Source: https://github.com/phaserjs/examples/blob/master/public/list.html

This JavaScript code handles the dynamic loading, display, and navigation of Phaser 3 examples. It manages folder structures, breadcrumbs, and URL updates.

```javascript
var dir = '';
var data = {};
var folder = [];
var trail = [];
var well = [];
var index = {};

function openFolder () {
    $('#folderList').empty();
    createBackFolder();
    var isBootable = false;
    for (var i = 0; i < folder.length; i++) {
        var child = folder[i];
        if (child.name === 'boot.json') {
            isBootable = true;
            break;
        }
    }
    if (isBootable) {
        createBootFile(i, child.name, child.path);
    } else {
        for (var i = 0; i < folder.length; i++) {
            var child = folder[i];
            if (child.hasOwnProperty('children')) {
                createFolder(i, child.name, child.path);
            }
        }
        for (var i = 0; i < folder.length; i++) {
            var child = folder[i];
            if (!child.hasOwnProperty('children')) {
                createFile(i, child.name, child.path);
            }
        }
    }
    // Update browser history
    var stateObj = { well: well };
    history.pushState(stateObj, '', 'list.html' + getURLWell());
}

function getURLWell (skipLast, add) {
    if (skipLast === undefined) {
        skipLast = false;
    }
    var output = '';
    var len = (skipLast) ? well.length - 1 : well.length;
    for (var i = 0; i < len; i++) {
        output = output.concat(encodeURI(well[i])) + '/';
    }
    if (add !== undefined) {
        output = output.concat(encodeURI(add)) + '/';
    }
    return '?dir=' + output;
}

function addBreadcrumb (filename) {
    var nav = $('<a></a>', {
        class: 'breadcrumb-item',
        href: 'list.html' + getURLWell()
    }).text(filename);
    $('#breadcrumb').append(nav);
}

function removeBreadcrumb () {
    $('#breadcrumb > a').last().remove();
}

function downLevel (index, filename, skipOpen) {
    if (skipOpen === undefined) {
        skipOpen = false;
    }
    if (!folder[index].hasOwnProperty('children')) {
        // console.log('No children, aborting');
        return;
    }
    // Record the trail
    trail.push(folder);
    folder = folder[index].children;
    well.push(filename);
    addBreadcrumb(filename);
    if (!skipOpen) {
        openFolder();
    }
}

function upLevel () {
    removeBreadcrumb();
    if (trail.length === 1) {
        createTopLevelFolders();
    } else {
        folder = trail[trail.length - 1];
        trail.pop();
        well.pop();
        openFolder();
    }
}

function createBackFolder () {
    var div = $('<div></div>').addClass('card');
    var a = $('<a></a>', {
        href: 'list.html' + getURLWell(true)
    });
    var img = $('<img />', {
        src: 'images/back.png',
        width: 32,
        height: 32
    });
    img.click(function (event) {
        upLevel();
    });
    a.append(img);
    div.append(a);
    $('#folderList').append(div);
}

function createBootFile (index, filename, filepath) {
    var div = $('<div></div>');
    var a = $('<a></a>', {
        href: 'boot.html?src=' + filepath
    });
    const imgPath = filepath
        .replace(/^src/, 'screenshots')
        .replace(/\.json$/, '.png')
        .replace(/\.js$/, '.png');
    var img = $('<img />', {
        src: imgPath,
        width: 240,
        height: 180
    });
    a.append(img);
    var p = $('<p></p>').addClass('card-text').text('Play Game');
    // p.append($('<a></a>', { href: 'edit.html?src=' + filepath }).text(filename.replace('.js', '')));
    div.append(a).append(p);
    $('#folderList').append(div);
}

function createFile (index, filename, filepath) {
    if (filename.substr(0, 1) === '_') {
        return;
    }
    var div = $('<div></div>').addClass('entry');
    var a = $('<a></a>', {
        href: '100.html?src=' + filepath
    });
    const imgPath = filepath
        .replace(/^src/, 'screenshots')
        .replace(/\.json$/, '.png')
        .replace(/\.js$/, '.png');
    var img = $('<img />', {
        src: imgPath,
        width: 120,
        height: 90
    });
    a.append(img);
    var p = $('<p></p>').addClass('card-text');
    p.append($('<a></a>', {
        href: '100.html?src=' + filepath
    }).text(filename.replace('.js', '')));
    div.append(a).append(p);
    $('#folderList').append(div);
}

function createFolder (index, filename, filepath) {
    if (filename === 'archived' || filename.substr(0, 1) === '_') {
        return;
    }
    var div = $('<div></div>').addClass('card');
    var a = $('<a></a>', {
        href: 'list.html' + getURLWell(false, filename)
    });
    var p = $('<p></p>').addClass('card-text');
    p.append($('<a></a>', {
        href: 'list.html' + getURLWell(false, filename)
    }).text(filename));
    div.append(a).append(p);
    $('#folderList').append(div);
}

function createTopLevelFolders () {
    $('#folderList').empty();
    trail = [];
    well = [];
    folder = data.children;
    for (var i = 0; i < folder.length; i++) {
        createFolder(i, folder[i].name, folder[i].path);
    }
}

function loadFolders (param) {
    trail = [];
    well = [];
    folder = data.children;
    var dirs = [];
    var raw = param.split('/');
    for (var i = 0; i < raw.length; i++) {
        raw[i] = decodeURI(raw[i]);
        if (raw[i] !== '') {
            dirs.push(raw[i]);
        }
    }
    var current = data.children;
    dirs.forEach(function(level) {
        for (i = 0; i < current.length; i++) {
            if (current[i].name === level) {
                downLevel(i, current[i].name, true);
                current = current[i].children;
                break;
            }
        }
    });
    openFolder();
}

$(document).ready(function () {
    $.getJSON('examples.json', function (json) {
        data = json;
        dir = getQueryString('dir');
        if (dir) {
            loadFolders(dir);
        } else {
            createTopLevelFolders();
        }
    });
});
```

--------------------------------

### Phaser 3 Scene Creation and Physics Setup

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/src/games/firstgame/part7.html

Initializes the game scene by adding a background, creating static platforms, adding a player sprite with physics properties, and setting up collision detection.

```javascript
function create () {
  this.add.image(400, 300, 'sky');
  platforms = this.physics.add.staticGroup();
  platforms.create(400, 568, 'ground').setScale(2).refreshBody();
  platforms.create(600, 400, 'ground');
  platforms.create(50, 250, 'ground');
  platforms.create(750, 220, 'ground');
  player = this.physics.add.sprite(100, 450, 'dude');
  player.setBounce(0.2);
  player.setCollideWorldBounds(true);
  this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
  });
  this.anims.create({
    key: 'turn',
    frames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
  });
  this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
  });
  cursors = this.input.keyboard.createCursorKeys();
  this.physics.add.collider(player, platforms);
}
```

--------------------------------

### Example Result Item HTML

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/index.html

HTML template for displaying a single search result or directory item. Includes links to the example or directory path.

```html
<div class="result">
    <a href="{{fullPath}}"> {{title}} </a>
    <a href="?dir={{path}}" class="path"> {{path}} </a>
</div>
```

--------------------------------

### Initialize Folder Navigation Data

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/index.html

Initializes variables used for managing the directory structure and navigation within the examples.

```javascript
var dir = '';
var data = {};
var folder = [];
var trail = [];
var well = [];
var index = {};
var currentCrumb = '';
```

--------------------------------

### Game Object Creation and Physics Setup

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/src/games/firstgame/part9.html

Initializes game objects like platforms, player, and stars, and sets up their physics properties and collisions. The player's bounce and world bounds collision are configured here.

```javascript
function create () {
    this.add.image(400, 300, 'sky');
    platforms = this.physics.add.staticGroup();
    platforms.create(400, 568, 'ground').setScale(2).refreshBody();
    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
    player = this.physics.add.sprite(100, 450, 'dude');
    player.setBounce(0.2);
    player.setCollideWorldBounds(true);
    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });
    this.anims.create({
        key: 'turn',
        frames: [ { key: 'dude', frame: 4 } ],
        frameRate: 20
    });
    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
        frameRate: 10,
        repeat: -1
    });
    cursors = this.input.keyboard.createCursorKeys();
    stars = this.physics.add.group({
        key: 'star',
        repeat: 11,
        setXY: { x: 12, y: 0, stepX: 70 }
    });
    stars.children.iterate(function (child) {
        child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
    });
    scoreText = this.add.text(16, 16, 'score: 0', {
        fontSize: '32px',
        fill: '#000'
    });
    this.physics.add.collider(player, platforms);
    this.physics.add.collider(stars, platforms);
    this.physics.add.overlap(player, stars, collectStar, null, this);
}
```

--------------------------------

### Directory Navigation Logic

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/index.html

Parses a directory path from a query string and navigates through the example data structure. Handles decoding directory names and updating the current view.

```javascript
var dirs = [];
var raw = param.split('/');
for (var i = 0; i < raw.length; i++) {
    raw[i] = decodeURI(raw[i]);
    if (raw[i] !== '') {
        dirs.push(raw[i]);
    }
}
var current = data.children;
dirs.forEach(function(level) {
    for (i = 0; i < current.length; i++) {
        if (current[i].name === level) {
            downLevel(i, current[i].name, true);
            current = current[i].children;
            break;
        }
    }
});
openFolder();
```

--------------------------------

### Phaser 3 Scene Creation with Platforms

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/src/games/firstgame/part4.html

Creates the initial game scene by adding a sky background and several static platforms using the physics system.

```javascript
function create () {
    this.add.image(400, 300, 'sky');
    platforms = this.physics.add.staticGroup();
    platforms.create(400, 568, 'ground').setScale(2).refreshBody();
    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
}
```

--------------------------------

### Load Folders from Data

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/index.html

Initializes the folder navigation by setting the initial trail and well to empty, and then assigning the root children to the 'folder' variable.

```javascript
function loadFolders (param) {
    trail = [];
    well = [];
    folder = data.children;
}
```

--------------------------------

### Initialize Monaco Editor and Load Phaser Definitions

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/edit.html

Sets up the Monaco editor with JavaScript language support and loads Phaser 3 TypeScript definitions for enhanced autocompletion and type checking.

```javascript
function loadEditor(source, filename) {
    require.config({
        paths: { 'vs': './js/vs' }
    });

    require(['vs/editor/editor.main'], function () {
        editor = monaco.editor.create(document.getElementById('editor'), {
            value: source,
            language: 'javascript'
        });

        fetch('https://raw.githubusercontent.com/photonstorm/phaser/master/types/phaser.d.ts')
            .then(response => response.text())
            .then(text => {
                const libSource = text;
                const libUri = 'ts:/public/definitions/phaser.d.ts';
                monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
            });

        window.onresize = function () {
            editor.layout();
        };

        var windowObjectReference;
        var run = document.getElementById('run');
        var save = document.getElementById('save');
        var frame = document.getElementById('sandboxed');
        var download = document.getElementById('download');

        if (filename) {
            document.getElementById('filename').value = filename;
        }

        launch.onclick = function () {
            var filename = getQueryString('src');
            var strWindowFeatures = 'menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes';
            windowObjectReference = window.open('view.html?src=' + filename + '&v=' + phaserVersion, 'Phaser3Viewer', strWindowFeatures);
        };

        run.onclick = function () {
            frame.contentWindow.postMessage('reload', '*');
        };

        download.onclick = function () {
            var name = document.getElementById('filename');
            var src = editor.model.getLinesContent().join('\n');
            var blob = new Blob([src], { type: 'text/plain;charset=utf-8' });
            saveAs(blob, name.value);
        };

        save.onclick = function () {
            var example = {
                _id: filename,
                code: editor.model.getLinesContent(),
                version: version++
            };

            if (entry) {
                // update instead of insert
                example._rev = entry._rev;
            }

            db.put(example, function callback(err, result) {
                if (!err) {
                    console.log(filename, 'saved to db - version', example.version);
                    console.log(result.rev);
                    entry._rev = result.rev;
                } else {
                    console.log(filename, 'failed to save:', err);
                }
            });
        };

        window.addEventListener('message', function (event) {
            // console.log('editor received message');
            // console.log(event);
            var mainWindow = event.source;
            if (event.data === 'getCode') {
                var src = editor.model.getLinesContent();
                frame.contentWindow.postMessage(src.join('\n'), '*');
            }
        });
    });
}
```

--------------------------------

### Phaser 3 Game Configuration and Initialization

Source: https://github.com/phaserjs/examples/blob/master/public/src/games/firstgame/part1.html

Sets up the core configuration for a Phaser 3 game, including canvas dimensions, rendering mode, and the initial scene. This is the entry point for any Phaser game.

```javascript
body { margin: 0; }

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload () {
}

function create () {
}

function update () {
}
```

--------------------------------

### Game Scene Creation

Source: https://github.com/phaserjs/examples/blob/master/public/src/games/firstgame/part9.html

Initializes game objects, physics, animations, and input handling. Sets up collision and overlap events.

```javascript
function create () {
  this.add.image(400, 300, 'sky');
  platforms = this.physics.add.staticGroup();
  platforms.create(400, 568, 'ground').setScale(2).refreshBody();
  platforms.create(600, 400, 'ground');
  platforms.create(50, 250, 'ground');
  platforms.create(750, 220, 'ground');
  player = this.physics.add.sprite(100, 450, 'dude');
  player.setBounce(0.2);
  player.setCollideWorldBounds(true);
  this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
  });
  this.anims.create({
    key: 'turn',
    frames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
  });
  this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
  });
  cursors = this.input.keyboard.createCursorKeys();
  stars = this.physics.add.group({
    key: 'star',
    repeat: 11,
    setXY: { x: 12, y: 0, stepX: 70 }
  });
  stars.children.iterate(function (child) {
    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
  });
  scoreText = this.add.text(16, 16, 'score: 0', {
    fontSize: '32px',
    fill: '#000'
  });
  this.physics.add.collider(player, platforms);
  this.physics.add.collider(stars, platforms);
  this.physics.add.overlap(player, stars, collectStar, null, this);
}
```

--------------------------------

### Creating Game Scene and Objects

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/src/games/firstgame/part8.html

Initializes the game scene by adding a background, platforms, player, stars, and setting up physics colliders and overlaps.

```javascript
function create () {
  this.add.image(400, 300, 'sky');
  platforms = this.physics.add.staticGroup();
  platforms.create(400, 568, 'ground').setScale(2).refreshBody();
  platforms.create(600, 400, 'ground');
  platforms.create(50, 250, 'ground');
  platforms.create(750, 220, 'ground');
  player = this.physics.add.sprite(100, 450, 'dude');
  player.setBounce(0.2);
  player.setCollideWorldBounds(true);
  this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
  });
  this.anims.create({
    key: 'turn',
    frames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
  });
  this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
  });
  cursors = this.input.keyboard.createCursorKeys();
  stars = this.physics.add.group({
    key: 'star',
    repeat: 11,
    setXY: { x: 12, y: 0, stepX: 70 }
  });
  stars.children.iterate(function (child) {
    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
  });
  this.physics.add.collider(player, platforms);
  this.physics.add.collider(stars, platforms);
  this.physics.add.overlap(player, stars, collectStar, null, this);
}
```

--------------------------------

### Initialize Logging and Script Injection

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/debug.html

Sets up a limited console logging function and injects a script specified in the URL query string.

```javascript
window.logIndex = 0;
window.logLimit = 300;
window.log = function () {
    if (window.logIndex < window.logLimit) {
        window.logIndex++;
        console.log.apply(this, arguments);
    }
}
```

```javascript
$(document).ready(function () {
    var filename = getQueryString('src');
    if (filename.substr(-3) === '.js') {
        document.title = document.title.concat(' :: ' + filename);
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = filename;
        document.body.appendChild(s);
    }
});
```

--------------------------------

### Creating Game Elements and Player

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/src/games/firstgame/part5.html

Initializes the game scene by adding a background, static platforms, and the player sprite with physics and collision bounds.

```javascript
function create () {
  this.add.image(400, 300, 'sky');
  platforms = this.physics.add.staticGroup();
  platforms.create(400, 568, 'ground').setScale(2).refreshBody();
  platforms.create(600, 400, 'ground');
  platforms.create(50, 250, 'ground');
  platforms.create(750, 220, 'ground');
  player = this.physics.add.sprite(100, 450, 'dude');
  player.setBounce(0.2);
  player.setCollideWorldBounds(true);
}
```

--------------------------------

### Phaser Sandbox Frame Initialization

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/frame.html

Initializes the sandbox by setting an alive flag, determining the Phaser version from query parameters, and dynamically loading the Phaser script. It then posts a 'getCode' message to the parent window upon script load.

```javascript
var _isAlive = false;
window.onload = function () {
    _isAlive = true;
    var i = window.top;
    var phaserVersion = getQueryString('v', versions[1].val, i.location);
    var phaserScript = document.createElement('script');
    phaserScript.onload = function () {
        i.postMessage('getCode', '*');
    };
    phaserScript.type = 'text/javascript';
    phaserScript.src = './build/' + phaserVersion + '.js';
    document.head.appendChild(phaserScript);
}
```

--------------------------------

### Create Top-Level Folders

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/index.html

Clears the navigation trail and well, then populates the folder list with the top-level directories from the main data.

```javascript
function createTopLevelFolders () {
    $('#folderList').empty();
    trail = [];
    well = [];
    folder = data.children;
    for (var i = 0; i < folder.length; i++) {
        createFolder(i, folder[i].name, folder[i].path);
    }
}
```

--------------------------------

### Phaser Sandbox Frame Initialization and Message Handling

Source: https://github.com/phaserjs/examples/blob/master/public/frame.html

This script initializes the Phaser Sandbox Frame, loads the specified Phaser version, and sets up event listeners for communication with the parent window. It handles messages for pinging, reloading, and executing code, including module loading.

```javascript
body { margin: 0; background-color: white; }

var _isAlive = false;
window.onload = function () {
    _isAlive = true;
    var i = window.top;
    var phaserVersion = getQueryString('v', versions[1].val, i.location);
    var phaserScript = document.createElement('script');
    phaserScript.onload = function () {
        i.postMessage('getCode', '*');
    };
    phaserScript.type = 'text/javascript';
    phaserScript.src = './build/' + phaserVersion + '.js';
    document.head.appendChild(phaserScript);
}

window.addEventListener('message', function (event) {
    // console.log('iframe received message');
    // console.log(event);
    var mainWindow = event.source;
    if (event.data === 'ping') {
        mainWindow.postMessage(_isAlive, event.origin);
    } else if (event.data === 'reload') {
        // Otherwise it fires a shutdown event when the page reloads
        window.onbeforeunload = function() {};
        window.location.reload();
        console.clear();
        // console.log.apply(console, ['%c >>>', 'background: #ff0000; color: #ffffff']);
    } else {
        try {
            // Module system
            if (event.data.substr(0, 10) === '// #module') {
                const script_tag = document.createElement("script");
                script_tag.type = "module";
                script_tag.text = event.data;
                document.body.appendChild(script_tag);
            } else {
                eval(event.data);
            }
        } catch (e) {
            console.warn(e);
        }
    }
});
```

--------------------------------

### Phaser 3 Scene Creation

Source: https://github.com/phaserjs/examples/blob/master/public/src/games/firstgame/part6.html

Initializes the game scene by adding a background, creating static platforms, adding a player sprite, and setting up collision detection and animations.

```javascript
function create () {
    this.add.image(400, 300, 'sky');
    platforms = this.physics.add.staticGroup();
    platforms.create(400, 568, 'ground').setScale(2).refreshBody();
    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
    player = this.physics.add.sprite(100, 450, 'dude');
    player.setBounce(0.2);
    player.setCollideWorldBounds(true);
    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });
    this.anims.create({
        key: 'turn',
        frames: [ { key: 'dude', frame: 4 } ],
        frameRate: 20
    });
    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
        frameRate: 10,
        repeat: -1
    });
    this.physics.add.collider(player, platforms);
}
```

--------------------------------

### Phaser 3 Game Configuration

Source: https://github.com/phaserjs/examples/blob/master/public/3.86/src/games/firstgame/part1.html

Sets up the game canvas, rendering mode, dimensions, and the main scene functions. This is the entry point for your Phaser game.

```javascript
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);
```