### Sandboxels Modding Tutorial and Example

Source: https://github.com/r74ncom/sandboxels/blob/main/mod-list.html

Provides resources for creating Sandboxels mods. Includes a link to a modding tutorial on the Sandboxels Wiki and an example mod file to use as a base.

```APIDOC
Modding Resources:

Modding Tutorial:
  URL: https://sandboxels.wiki.gg/wiki/Modding_tutorial
  Description: A comprehensive guide to creating mods for Sandboxels, covering JavaScript programming and GitHub integration.

Example Mod:
  URL: https://sandboxels.r74n.com/mods/example_mod.js
  Description: A starter template mod to help new developers begin creating their own Sandboxels modifications.
```

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

### PWA Install Prompt Handling

Source: https://github.com/r74ncom/sandboxels/blob/main/index.html

This JavaScript code handles the 'beforeinstallprompt' event for Progressive Web Apps (PWAs). It captures the event to allow users to install the app and makes an 'install-button' visible.

```javascript
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  document.getElementById("install-button").style.display = "inline-block";
});
```

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

### PWA Install Prompt Handling

Source: https://github.com/r74ncom/sandboxels/blob/main/offline.html

This JavaScript code handles the 'beforeinstallprompt' event for Progressive Web Apps (PWAs). It captures the event to allow users to install the app and makes an 'install-button' visible.

```javascript
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  document.getElementById("install-button").style.display = "inline-block";
});
```

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

### Nested Loop Reaction Example

Source: https://github.com/r74ncom/sandboxels/blob/main/mod-list.html

Demonstrates the use of nested for loops to implement reactions in Sandboxels. This specific example causes various elements to damage plants.

```javascript
nested_for_reaction_example.js

Example of using a nested for loop to add reactions. It makes various things kill plants
```

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

### Window Load Initialization

Source: https://github.com/r74ncom/sandboxels/blob/main/offline.html

Handles the initial setup of the game when the window loads. It sets the game to not be paused, adjusts UI elements for Firefox compatibility, iterates through a list of functions to run after loading, and defines a fallback 'unknown' element.

```javascript
//on window load
gameCanvas = null;
canvas = null;
ctx = null;
window.onload = function() {
    paused = false;
    // If the browser is Firefox, set #categoryControls padding-bottom:11px;
    // if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
    //     document.getElementById("categoryControls").style.paddingBottom = "11px";
    // }
    // Loop through runAfterLoadList and run each function
    for (var i = 0; i < runAfterLoadList.length; i++) {
        runAfterLoadList[i]();
    }
    // Unknown fallback element
    elements.unknown = {
        hidden: true,
        tool: function(){},
        canPlace: false,
        excludeRandom: true,
        hoverStat: function(pixel) {return pixel.invalidElement||"???";},
        "desc": "Fallback for invalid elements.",
        grain: 0,
        category: "special"
    }
    // Loop through behaviors and each behavior, if it is a string, split the items and replace the value with the array
    for (var behavior in behaviors) {
        if (typeof behaviors[beh
```

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

### Google Ad Setup

Source: https://github.com/r74ncom/sandboxels/blob/main/offline-use.html

This JavaScript code configures Google AdSense by defining an ad slot for a 300x250 ad, enabling single request mode, and activating services.

```javascript
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
  googletag.defineSlot('/23030676605/optima_slot300x250', [300, 250], 'div-gpt-ad-1701632379761-0').addService(googletag.pubads());
  googletag.pubads().enableSingleRequest();
  googletag.enableServices();
});
```

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

### Game Initialization and Event Handling

Source: https://github.com/r74ncom/sandboxels/blob/main/lite.html

Handles the initial setup of the game canvas, including resizing based on window dimensions, setting up the 2D rendering context, and attaching event listeners for mouse and touch interactions. It also manages keyboard input for controlling brush size, pausing the game, and other game actions.

```javascript
var gameCanvas = document.getElementById("game");
var ctx = gameCanvas.getContext("2d");
var newWidth = Math.ceil(window.innerWidth * 0.9 / pixelSize) * pixelSize;
var newHeight = Math.ceil(window.innerHeight * 0.675 / pixelSize) * pixelSize;

if (newWidth > 1000) {
    newWidth = 1000;
}

if (window.innerWidth > 1000 && newHeight > 600) {
    newHeight = 600;
}

ctx.canvas.width = newWidth;
ctx.canvas.height = newHeight;

width = Math.round(newWidth / pixelSize) - 1;
height = Math.round(newHeight / pixelSize) - 1;

pixelMap = {};
for (var i = 0; i < width; i++) {
    pixelMap[i] = [];
}

gameCanvas.addEventListener("mousedown", mouseClick);
gameCanvas.addEventListener("touchstart", mouseClick);
window.addEventListener("mouseup", mouseUp);
window.addEventListener("touchend", mouseUp);
window.addEventListener("mousemove", mouseMove);
gameCanvas.addEventListener("touchmove", mouseMove);
gameCanvas.ontouchstart = function (e) {
    if (e.touches) e = e.touches[0];
    return false;
}

shiftDown = false;

document.addEventListener("keydown", function (e) {
    if (e.keyCode == 219 || e.keyCode == 189) {
        if (shiftDown) {
            mouseSize = 1;
        } else {
            mouseSize -= 2;
            if (mouseSize < 1) {
                mouseSize = 1;
            }
        }
    }

    if (e.keyCode == 221 || e.keyCode == 187) {
        if (shiftDown) {
            mouseSize = (mouseSize + 15) - ((mouseSize + 15) % 15);
        } else {
            mouseSize += 2;
        }
        if (mouseSize > (height > width ? height : width)) {
            mouseSize = (height > width ? height : width);
        }
    } else if (e.keyCode == 16 || e.keyCode == 18) {
        shiftDown = true;
    }

    if (e.keyCode == 80 || e.keyCode == 32 || e.keyCode == 192 || e.keyCode == 75) {
        e.preventDefault();
        togglePause();
    } else if (e.keyCode == 69) {
        e.preventDefault();
        chooseElementPrompt();
    } else if (e.keyCode == 190) {
        e.preventDefault();
        doFrame();
    }
});

document.addEventListener("keyup", function (e) {
    if (e.keyCode == 16 || e.keyCode == 18) {
        shiftDown = false;
    }
});
```

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

### Window Load Initialization

Source: https://github.com/r74ncom/sandboxels/blob/main/index.html

Handles the initial setup of the game when the window loads. It sets the game to not be paused, adjusts UI elements for Firefox compatibility, iterates through a list of functions to run after loading, and defines a fallback 'unknown' element.

```javascript
//on window load
gameCanvas = null;
canvas = null;
ctx = null;
window.onload = function() {
    paused = false;
    // If the browser is Firefox, set #categoryControls padding-bottom:11px;
    // if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
    //     document.getElementById("categoryControls").style.paddingBottom = "11px";
    // }
    // Loop through runAfterLoadList and run each function
    for (var i = 0; i < runAfterLoadList.length; i++) {
        runAfterLoadList[i]();
    }
    // Unknown fallback element
    elements.unknown = {
        hidden: true,
        tool: function(){},
        canPlace: false,
        excludeRandom: true,
        hoverStat: function(pixel) {return pixel.invalidElement||"???";},
        "desc": "Fallback for invalid elements.",
        grain: 0,
        category: "special"
    }
    // Loop through behaviors and each behavior, if it is a string, split the items and replace the value with the array
    for (var behavior in behaviors) {
        if (typeof behaviors[beh
```

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

### Mod Dependency System Example

Source: https://github.com/r74ncom/sandboxels/blob/main/changelog.html

Demonstrates the implementation of a mod dependency system, with details on how to add elements dynamically and register callbacks for element additions. Refer to 'dependency_test.js' for more information.

```javascript
/*
 * Mod dependency system, see dependency_test.js for more info
 */

// Function to add elements dynamically
addElement(elementData);

// Function called when an element is added dynamically
onAddElement(callback);

// Array holding loaded mods
let loadedMods = [];

// Properties for custom views
let customViewProperties = {
  onSelect: callbackFunction,
  onUnselect: callbackFunction
};

// Portals display channel on hover
// 'mouseColor' setting

```

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

### Technical: runAfterLoad() Function Example

Source: https://github.com/r74ncom/sandboxels/blob/main/changelog.html

Demonstrates the usage of the `runAfterLoad()` function, which allows custom JavaScript code to execute after all mods have finished loading. This is useful for setting up mod-specific initializations or dependencies.

```javascript
function runAfterLoad() {
  // Your code here to run after all mods are loaded
  console.log("All mods loaded. Initializing custom features.");
}
```

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

### Sandboxels Initialization and Save Loading Logic

Source: https://github.com/r74ncom/sandboxels/blob/main/index.html

This JavaScript code handles the initial setup of the Sandboxels game, including loading temporary saves from local storage, handling Discord-based save loading via URL parameters, and managing temporary mod data. It also includes logic to hide the game canvas if the origin is detected as a game, browser, or specific domains.

```javascript
var origin = location.ancestorOrigins[0]; if (origin.indexOf("game") !== -1 || origin.indexOf("browser") !== -1 || origin.indexOf("yizhif") !== -1 || origin.indexOf(".io") !== -1) { gameCanvas.style.display = "none"; } } //get the first .elementButton in the first .category, and selectElement(button.element) var firstDiv = document.getElementsByClassName("category")[0]; var firstElementButton = firstDiv.getElementsByClassName("elementButton")[0]; selectElement(firstElementButton.getAttribute("element")); //post-load let tempSave = localStorage.getItem("SandboxelsTempSave"); if (tempSave) { let json = JSON.parse(tempSave); lastSaveJSON = json; loadSave(json,3,3) localStorage.removeItem("SandboxelsTempSave") } else if (urlParams.has("discord")) { let saveID = parseInt(urlParams.get("discord")); if (saveID) loadSaveURL("https://sandboxels.live/browser/api/save/" + urlParams.get("discord")); } let tempMods = localStorage.getItem("SandboxelsTempMods"); if (tempMods) { JSON.parse(tempMods).forEach((mod) => { removeMod(mod,true); }) localStorage.removeItem("SandboxelsTempMods") }
```

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

### Sandboxels Initialization and Save Loading Logic

Source: https://github.com/r74ncom/sandboxels/blob/main/offline.html

This JavaScript code handles the initial setup of the Sandboxels game, including loading temporary saves from local storage, handling Discord-based save loading via URL parameters, and managing temporary mod data. It also includes logic to hide the game canvas if the origin is detected as a game, browser, or specific domains.

```javascript
var origin = location.ancestorOrigins[0]; if (origin.indexOf("game") !== -1 || origin.indexOf("browser") !== -1 || origin.indexOf("yizhif") !== -1 || origin.indexOf(".io") !== -1) { gameCanvas.style.display = "none"; } } //get the first .elementButton in the first .category, and selectElement(button.element) var firstDiv = document.getElementsByClassName("category")[0]; var firstElementButton = firstDiv.getElementsByClassName("elementButton")[0]; selectElement(firstElementButton.getAttribute("element")); //post-load let tempSave = localStorage.getItem("SandboxelsTempSave"); if (tempSave) { let json = JSON.parse(tempSave); lastSaveJSON = json; loadSave(json,3,3) localStorage.removeItem("SandboxelsTempSave") } else if (urlParams.has("discord")) { let saveID = parseInt(urlParams.get("discord")); if (saveID) loadSaveURL("https://sandboxels.live/browser/api/save/" + urlParams.get("discord")); } let tempMods = localStorage.getItem("SandboxelsTempMods"); if (tempMods) { JSON.parse(tempMods).forEach((mod) => { removeMod(mod,true); }) localStorage.removeItem("SandboxelsTempMods") }
```

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

### Element Finalization After Loading

Source: https://github.com/r74ncom/sandboxels/blob/main/offline.html

Performs final setup for an element after its definition is loaded. This includes assigning a unique ID, applying language-specific names, setting default behavior (like `WALL`) if none is defined, and handling the `behavior` property by converting it to a `tick` function if necessary. It also ensures a default color and handles the `movable` property.

```javascript
function finalizeElementAfter(key) { elements[key].id = nextElemID; nextElemID++; // Language Loader Part 2 if (lang[key] !== undefined) { elements[key].name = lang[key] } // If the element has no behavior, set it to behaviors.WALL if (!elements[key].behavior && !elements[key].tick) { elements[key].tick = function(pixel) {}; } // If the behavior is a function, delete it and set tick to it instead if (typeof elements[key].behavior === "function") { if (elements[key].tick) { elements[key].tick1 = elements[key].tick; elements[key].tick2 = elements[key].behavior; elements[key].tick = function(pixel) { if (pixel.start === pixelTicks) {return} var id = elements[pixel.element].id; elements[pixel.element].tick1(pixel); if (!pixel.del && id === elements[pixel.element].id) { elements[pixel.element].tick2(pixel); } } } else { elements[key].tick = elements[key].behavior; } delete elements[key].behavior; } // If the element has no color, set it to white if (elements[key].color === undefined) { elements[key].color = "rgb(255,255,255)"; elements[key].colorObject = {r:255,g:255,b:255}; } if (elements[key].movable === false) { delete elements[key].movable } else if (elements[key].movable === undefined) { // If the element's behavior is an array and contains M1 or M2, set its movable to true if (elements[key].behavior && typeof elements[key].behavior[0] === "object") { var bstring = JSON.stringify(elements[key].behavior); if (bstring.indexOf("M1")!==-1 || bstring.indexOf("M2")!==-1) { elements[key].movable = true; } } if (elements[key].tick) { elements[key].movable
```

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

### Element Finalization After Loading

Source: https://github.com/r74ncom/sandboxels/blob/main/index.html

Performs final setup for an element after its definition is loaded. This includes assigning a unique ID, applying language-specific names, setting default behavior (like `WALL`) if none is defined, and handling the `behavior` property by converting it to a `tick` function if necessary. It also ensures a default color and handles the `movable` property.

```javascript
function finalizeElementAfter(key) { elements[key].id = nextElemID; nextElemID++; // Language Loader Part 2 if (lang[key] !== undefined) { elements[key].name = lang[key] } // If the element has no behavior, set it to behaviors.WALL if (!elements[key].behavior && !elements[key].tick) { elements[key].tick = function(pixel) {}; } // If the behavior is a function, delete it and set tick to it instead if (typeof elements[key].behavior === "function") { if (elements[key].tick) { elements[key].tick1 = elements[key].tick; elements[key].tick2 = elements[key].behavior; elements[key].tick = function(pixel) { if (pixel.start === pixelTicks) {return} var id = elements[pixel.element].id; elements[pixel.element].tick1(pixel); if (!pixel.del && id === elements[pixel.element].id) { elements[pixel.element].tick2(pixel); } } } else { elements[key].tick = elements[key].behavior; } delete elements[key].behavior; } // If the element has no color, set it to white if (elements[key].color === undefined) { elements[key].color = "rgb(255,255,255)"; elements[key].colorObject = {r:255,g:255,b:255}; } if (elements[key].movable === false) { delete elements[key].movable } else if (elements[key].movable === undefined) { // If the element's behavior is an array and contains M1 or M2, set its movable to true if (elements[key].behavior && typeof elements[key].behavior[0] === "object") { var bstring = JSON.stringify(elements[key].behavior); if (bstring.indexOf("M1")!==-1 || bstring.indexOf("M2")!==-1) { elements[key].movable = true; } } if (elements[key].tick) { elements[key].movable
```

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

### Technical: Custom Tools Example

Source: https://github.com/r74ncom/sandboxels/blob/main/changelog.html

Provides an example of how to implement custom tools in Sandboxels, referencing an external JavaScript file for detailed implementation. This is useful for modding the game.

```javascript
// See example_mod.js
```

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

### Get Neighboring Pixels

Source: https://github.com/r74ncom/sandboxels/blob/main/lite.html

Retrieves adjacent pixels (up, down, left, right) that are not empty. This is used for interactions and spread mechanics.

```javascript
function getNeighbors(pixel) {
  var neighbors = [];
  var x = pixel.x;
  var y = pixel.y;
  if (!isEmpty(x - 1, y, true)) {
    neighbors.push(pixelMap[x - 1][y]);
  }
  if (!isEmpty(x + 1, y, true)) {
    neighbors.push(pixelMap[x + 1][y]);
  }
  if (!isEmpty(x, y - 1, true)) {
    neighbors.push(pixelMap[x][y - 1]);
  }
  if (!isEmpty(x, y + 1, true)) {
    neighbors.push(pixelMap[x][y + 1]);
  }
  return neighbors;
}
```

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

### Console Welcome Message and Information

Source: https://github.com/r74ncom/sandboxels/blob/main/index.html

Logs a stylized welcome message to the browser's console, along with important project information, links to the official website and Discord, and copyright details.

```javascript
console.log("%c WELCOME TO R74n ","position: absolute; top: 50%; right: 50%; transform: translate(50%,-50%); font-family: Arial; font-size: 3em; font-weight: 700; color: #00ffff; text-shadow: 1px 1px 1px #14c9c9, 1px 2px 1px #14c9c9, 1px 3px 1px #14c9c9, 1px 4px 1px #14c9c9, 1px 5px 1px #14c9c9, 1px 13px 6px rgba(16,16,16,0.4), 1px 22px 10px rgba(16,16,16,0.2), 1px 25px 35px rgba(16,16,16,0.2), 1px 30px 60px rgba(16,16,16,0.4);padding:10px");
console.log("Sandboxels is developed by R74n and can be played on the official website: https://sandboxels.R74n.com/");
console.log("Can't access? Join our Discord: https://R74n.com/discord/");
console.log("Found this on another website? Let us know!");
console.log("©2021-" + new Date().getFullYear() + ". All Rights Reserved. https://sandboxels.R74n.com/license.txt");
```

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

### Sandboxels Modding API - Core Functions

Source: https://github.com/r74ncom/sandboxels/blob/main/changelog.html

Provides examples of JavaScript functions used within Sandboxels for modding, such as checking mod status and handling user prompts.

```JavaScript
// Check if a specific mod is enabled (e.g., 'glow.js')
if (modIsEnabled("glow.js")) {
  console.log("Glow mod is active!");
}

// Example of handling a multiple-choice prompt
function handleChoice() {
  const choice = promptChoose();
  if (choice === "Option A") {
    // Do something for Option A
  } else if (choice === "Option B") {
    // Do something for Option B
  }
}

// Example of handling a direction-based prompt
function handleDirection() {
  const direction = promptDir();
  if (direction === "up") {
    // Move up
  } else if (direction === "down") {
    // Move down
  }
}
```

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

### JavaScript Initialization and Event Handling

Source: https://github.com/r74ncom/sandboxels/blob/main/offline.html

Handles language selection, Playlight SDK initialization, and referrer tracking for the Sandboxels project. It dynamically loads scripts and sets up UI elements based on page context.

```JavaScript
if (standalone) {
  let span = document.getElementById("setting-span-lang");
  span.appendChild(document.getElementById("langSelect"));
  span.style.display = "block";
  document.getElementById("langSelectP").style.display = "none";
} else {
  if (document.referrer && document.referrer.indexOf("r74n.") === -1) {
    const refdomain = document.referrer.replace(/^https?:\/\//g, "").replace(/^www\./g, "").replace(/\/$/g, "");
    document.cookie = "R74nRef="+refdomain+";max-age=86400;path=/;domain=r74n.com";
  }
  function loadPlaylight() {
    if (!isOnSite) {
      location.href = "https://r74n.com";
      return;
    }
    if (typeof playlightSDK === "undefined") {
      document.getElementById("playlightButton").value = "Loading...";
      document.head.insertAdjacentHTML("beforeend",`<link rel=\"stylesheet\" href=\"https://sdk.playlight.dev/playlight-sdk.css\">`);
      let script = document.createElement("script");
      script.setAttribute("type","module");
      script.innerHTML = `try {
        const module = await import("https://sdk.playlight.dev/playlight-sdk.es.js");
        const playlightSDK = module.default;
        await playlightSDK.init({ button: { visible: false }, exitIntent: { enabled: false } });
        playlightSDK.setDiscovery(true);
        document.getElementById("playlightButton").value = "More Games";
      } catch (error) {
        console.error("Error loading the Playlight SDK:", error);
        document.getElementById("playlightButton").value = "Error...";
      }`;
      document.head.appendChild(script);
    } else {
      playlightSDK.setDiscovery(true);
    }
  }
}
```

```JavaScript
window.addEventListener('load', function() {
  var langSelect = document.getElementById("langSelect");
  if (langCode) {
    langSelect.value = langCode;
  } else if (settings.lang) {
    langSelect.value = settings.lang;
  } else {
    langSelect.value = "en";
  }
  if (lang["#lang.credit"]) {
    document.getElementById("langCredit").innerText = "Translation by "+lang["#lang.credit"];
    document.getElementById("langCredit").style.display = "block";
  }
})
```

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

### Sandboxels Element Tick Function

Source: https://github.com/r74ncom/sandboxels/blob/main/changelog.html

Demonstrates the 'tick' element attribute in Sandboxels, which accepts a function to be executed on each pixel per tick. An example shows a pixel attempting to move down.

```javascript
tick: function(pixel) {
  tryMove(pixel, pixel.x, pixel.y+1) // try to move down each tick
}
```

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

### JavaScript Initialization and Event Handling

Source: https://github.com/r74ncom/sandboxels/blob/main/index.html

Handles language selection, Playlight SDK initialization, and referrer tracking for the Sandboxels project. It dynamically loads scripts and sets up UI elements based on page context.

```JavaScript
if (standalone) {
  let span = document.getElementById("setting-span-lang");
  span.appendChild(document.getElementById("langSelect"));
  span.style.display = "block";
  document.getElementById("langSelectP").style.display = "none";
} else {
  if (document.referrer && document.referrer.indexOf("r74n.") === -1) {
    const refdomain = document.referrer.replace(/^https?:\/\//g, "").replace(/^www\./g, "").replace(/\/$/g, "");
    document.cookie = "R74nRef="+refdomain+";max-age=86400;path=/;domain=r74n.com";
  }
  function loadPlaylight() {
    if (!isOnSite) {
      location.href = "https://r74n.com";
      return;
    }
    if (typeof playlightSDK === "undefined") {
      document.getElementById("playlightButton").value = "Loading...";
      document.head.insertAdjacentHTML("beforeend",`<link rel=\"stylesheet\" href=\"https://sdk.playlight.dev/playlight-sdk.css\">`);
      let script = document.createElement("script");
      script.setAttribute("type","module");
      script.innerHTML = `try {
        const module = await import("https://sdk.playlight.dev/playlight-sdk.es.js");
        const playlightSDK = module.default;
        await playlightSDK.init({ button: { visible: false }, exitIntent: { enabled: false } });
        playlightSDK.setDiscovery(true);
        document.getElementById("playlightButton").value = "More Games";
      } catch (error) {
        console.error("Error loading the Playlight SDK:", error);
        document.getElementById("playlightButton").value = "Error...";
      }`;
      document.head.appendChild(script);
    } else {
      playlightSDK.setDiscovery(true);
    }
  }
}
```

```JavaScript
window.addEventListener('load', function() {
  var langSelect = document.getElementById("langSelect");
  if (langCode) {
    langSelect.value = langCode;
  } else if (settings.lang) {
    langSelect.value = settings.lang;
  } else {
    langSelect.value = "en";
  }
  if (lang["#lang.credit"]) {
    document.getElementById("langCredit").innerText = "Translation by "+lang["#lang.credit"];
    document.getElementById("langCredit").style.display = "block";
  }
})
```

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

### Console Welcome Message and Information

Source: https://github.com/r74ncom/sandboxels/blob/main/offline.html

Logs a stylized welcome message to the browser's console, along with important project information, links to the official website and Discord, and copyright details.

```javascript
console.log("%c WELCOME TO R74n ","position: absolute; top: 50%; right: 50%; transform: translate(50%,-50%); font-family: Arial; font-size: 3em; font-weight: 700; color: #00ffff; text-shadow: 1px 1px 1px #14c9c9, 1px 2px 1px #14c9c9, 1px 3px 1px #14c9c9, 1px 4px 1px #14c9c9, 1px 5px 1px #14c9c9, 1px 13px 6px rgba(16,16,16,0.4), 1px 22px 10px rgba(16,16,16,0.2), 1px 25px 35px rgba(16,16,16,0.2), 1px 30px 60px rgba(16,16,16,0.4);padding:10px");
console.log("Sandboxels is developed by R74n and can be played on the official website: https://sandboxels.R74n.com/");
console.log("Can't access? Join our Discord: https://R74n.com/discord/");
console.log("Found this on another website? Let us know!");
console.log("©2021-" + new Date().getFullYear() + ". All Rights Reserved. https://sandboxels.R74n.com/license.txt");
```

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

### Pointer Element Tick Function

Source: https://github.com/r74ncom/sandboxels/blob/main/offline.html

Provides the tick function for the 'pointer' element, which is responsible for its behavior during game ticks. The provided snippet shows the start of the function definition.

```javascript
{
  color: "#ff0000",
  tick: function(pixel) {
    if
```

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

### HTML Structure for Sandboxels Mods

Source: https://github.com/r74ncom/sandboxels/blob/main/mod-list.html

This HTML snippet sets up the main structure for the Sandboxels Mods page, including the title, a description of the mods, and instructions on how to enable them. It also includes a table to list the mods with columns for Mod Name, Description, and Creator.

```html
Sandboxels Mods + Tutorial                                      

[<](https://sandboxels.R74n.com) Sandboxels Mods
================================================

Sandboxels has a huge selection of mods that add new content to the simulator. They are created by community members and aren't endorsed by the developer of Sandboxels.

How to enable a mod
-------------------

1.  Go to the official [Sandboxels website](https://sandboxels.R74n.com/).
2.  Press the **Mods** button in the toolbar to open the Mod Manager.
3.  Type the full file name of the mod, listed below. You can also enter a whole URL. It MUST be exactly as written, case-sensitive and including the ".js" ending.
4.  Press enter, then refresh the page.

Sandboxels Mod List
-------------------

Mods submitted to our [GitHub repo](https://github.com/R74nCom/sandboxels/tree/main/mods) are listed here.

Mod Name

Description

Creator

Top-rated Mods

chem.js

Several chemistry and physics-related elements

lllllllllwith10ls

aChefsDream.js

More foods, animals, tools, and other cooking items [[YouTube Playlist]](https://www.youtube.com/playlist?list=PLWHqGb75vC8o7CLv-pMoVb56JL9BY9F0t)

SquareScreamYT

delete_all_of_element.js

Tool that deletes every pixel of the element(s) the user clicks on

Alice

survival.js

With limited resources, you must craft, sell, and buy to progress

[R74n](https://R74n.com)

alchemy.js

Start with only 4 elements and unlock more by reacting them together (Most are not possible)

[R74n](https://R74n.com)

nousersthings.js

Many chemical elements, compounds, and more

nousernamefound

spring.js

Many nature elements, like sakura trees, butterflies, beehives, and more

[R74n](https://R74n.com)

elementsManager.js

Create and edit custom elements

ggod

weapons.js

Variety of different weapons

Jayd

fey_and_more.js

Fairies, magic, and a lot of other things

Melecie

Official

alchemy.js

Start with only 4 elements and unlock more by reacting them together (Most are not possible)

[R74n](https://R74n.com)

building.js

Building generators and materials

[R74n](https://R74n.com)

classic_explosives.js

Re-adds 4 explosives removed in v1.9.3

[R74n](https://R74n.com)

classic_textures.js

Use textures from early versions of the game

[R74n](https://R74n.com)

color_everything.js

Allows every element to have a custom color

[R74n](https://R74n.com)

death_count.js

Messages counting when Humans die

[R74n](https://R74n.com)

devsnacks.js

Extra food ingredients and recipes; Only Tea stuff currently

[R74n](https://R74n.com)

devtests.js

Experimental features from the Sandboxels developer

[R74n](https://R74n.com)

edible_everything.js

Allows every element to be mixed into Batter and Dough

[R74n](https://R74n.com)

fools.js

Re-adds FOOLS Mode

[R74n](https://R74n.com)

fools24.js

Re-adds the 2024 Multiversal Update (v5.9.1)

[R74n](https://R74n.com)

fools25.js

Re-adds the 2025 Element Modulator

[R74n](https://R74n.com)

glow.js

[CHROME ONLY] Adds a cool lighting effect to many emissive pixels, like Fire

[R74n](https://R74n.com)

gravity_test.js

Test for altered gravity, makes all pixels move inward

[R74n](https://R74n.com)

mustard.js

Mustard and Mustard Seeds

[R74n](https://R74n.com)

rainbow_cursor.js

Makes your cursor multicolored

[R74n](https://R74n.com)

random_everything.js

Allows every element to be spawned with Random

[R74n](https://R74n.com)

smooth_water.js

Changes water mechanics so that it flows in one direction until it bounces off of something

[R74n](https://R74n.com)

souls.js

Human Souls, Ectoplasm, and Tombstones

[R74n](https://R74n.com)

spring.js

Many nature elements, like sakura trees, butterflies, beehives, and more

[R74n](https://R74n.com)

survival.js

With limited resources, you must craft, sell, and buy to progress

[R74n](https://R74n.com)

velocity.js

Beta for explosion velocity, and later wind, which may come to the base game in the future

[R74n](https://R74n.com)

Tools & Settings

betterModManager.js

Improvements to the Mod Manager

ggod

betterSettings.js

Additional settings and functionality

ggod

betterStats.js

Track actual running TPS of the simulation

mollthecoder

buildingreplicator.js

Scans and replicates builds anywhere on the screen, along with some preset submitted builds

nousernamefound

change.js

Tool that only replaces existing pixels

Alice
```

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

### Pointer Element Tick Function

Source: https://github.com/r74ncom/sandboxels/blob/main/index.html

Provides the tick function for the 'pointer' element, which is responsible for its behavior during game ticks. The provided snippet shows the start of the function definition.

```javascript
{
  color: "#ff0000",
  tick: function(pixel) {
    if
```

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

### Execute Post-Autogen Functions

Source: https://github.com/r74ncom/sandboxels/blob/main/offline.html

This snippet executes a list of functions stored in `runAfterAutogenList`. These functions are typically run after the autogeneration process is complete, allowing for final adjustments or setup.

```javascript
// Loop through runAfterAutogenList and run each function for (var i = 0; i < runAfterAutogenList.length; i++) { runAfterAutogenList[i](); }
```

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

### Execute Post-Autogen Functions

Source: https://github.com/r74ncom/sandboxels/blob/main/index.html

This snippet executes a list of functions stored in `runAfterAutogenList`. These functions are typically run after the autogeneration process is complete, allowing for final adjustments or setup.

```javascript
// Loop through runAfterAutogenList and run each function for (var i = 0; i < runAfterAutogenList.length; i++) { runAfterAutogenList[i](); }
```

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

### Initialize Game Canvas and Resize Logic

Source: https://github.com/r74ncom/sandboxels/blob/main/offline.html

This snippet initializes the game canvas and sets up the logic for automatically resizing it based on window dimensions and game settings like `pixelSize` and `bg`. It calculates new dimensions, ensuring they are divisible by `pixelSize` and applying constraints for larger screens.

```javascript
gameCanvas = document.getElementById("game"); canvas = document.getElementById("game"); // Get context ctx = gameCanvas.getContext("2d"); if (window.innerWidth < 700) { var newWidth = Math.ceil(window.innerWidth / pixelSize) * pixelSize; var newHeight = Math.ceil(window.innerHeight*0.6 / pixelSize) * pixelSize; } else { var newWidth = Math.ceil(window.innerWidth*0.9 / pixelSize) * pixelSize; var newHeight = Math.ceil(window.innerHeight*0.675 / pixelSize) * pixelSize; } // If the new width is greater than 1000, set it to 1000 if (newWidth > 1000) { newWidth = 1000; } // If we are on a desktop and the new height is greater than 500, set it to 500 if (window.innerWidth > 1000 && newHeight > 500) { newHeight = 500; } canvas.style.backgroundColor = settings.bg||"#000000"; autoResizeCanvas = function(clear) { pixelSize = parseInt(settings.pixelsize) || 6; if (window.innerWidth < 700) { pixelSize--; } if (window.innerWidth < 700) { var newWidth = Math.ceil(window.innerWidth / pixelSize) * pixelSize; var newHeight = Math.ceil(window.innerHeight*0.6 / pixelSize) * pixelSize; } else { var newWidth = Math.ceil(window.innerWidth*0.9 / pixelSize) * pixelSize; var newHeight = Math.ceil(window.innerHeight*0.675 / pixelSize) * pixelSize; } // If the new width is greater than 1000, set it to 1000 if (newWidth > 1002) { newWidth = 1002; } // If we are on a desktop and the new height is greater than 500, set it to 500 if (window.innerWidth > 1000 && newHeight > 500) { newHeight = 500; } newHeight -= newHeight % pixelSize; newWidth -= newWidth % pixelSize; document.getElementById("gameDiv").classList.remove("gameDiv-wide"); if (settings.pixelsize && settings.pixelsize.toString().slice(-1) === "w") { // resizeCanvas(window.innerHeight/ }
```

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

### Initialize Game Canvas and Resize Logic

Source: https://github.com/r74ncom/sandboxels/blob/main/index.html

This snippet initializes the game canvas and sets up the logic for automatically resizing it based on window dimensions and game settings like `pixelSize` and `bg`. It calculates new dimensions, ensuring they are divisible by `pixelSize` and applying constraints for larger screens.

```javascript
gameCanvas = document.getElementById("game"); canvas = document.getElementById("game"); // Get context ctx = gameCanvas.getContext("2d"); if (window.innerWidth < 700) { var newWidth = Math.ceil(window.innerWidth / pixelSize) * pixelSize; var newHeight = Math.ceil(window.innerHeight*0.6 / pixelSize) * pixelSize; } else { var newWidth = Math.ceil(window.innerWidth*0.9 / pixelSize) * pixelSize; var newHeight = Math.ceil(window.innerHeight*0.675 / pixelSize) * pixelSize; } // If the new width is greater than 1000, set it to 1000 if (newWidth > 1000) { newWidth = 1000; } // If we are on a desktop and the new height is greater than 500, set it to 500 if (window.innerWidth > 1000 && newHeight > 500) { newHeight = 500; } canvas.style.backgroundColor = settings.bg||"#000000"; autoResizeCanvas = function(clear) { pixelSize = parseInt(settings.pixelsize) || 6; if (window.innerWidth < 700) { pixelSize--; } if (window.innerWidth < 700) { var newWidth = Math.ceil(window.innerWidth / pixelSize) * pixelSize; var newHeight = Math.ceil(window.innerHeight*0.6 / pixelSize) * pixelSize; } else { var newWidth = Math.ceil(window.innerWidth*0.9 / pixelSize) * pixelSize; var newHeight = Math.ceil(window.innerHeight*0.675 / pixelSize) * pixelSize; } // If the new width is greater than 1000, set it to 1000 if (newWidth > 1002) { newWidth = 1002; } // If we are on a desktop and the new height is greater than 500, set it to 500 if (window.innerWidth > 1000 && newHeight > 500) { newHeight = 500; } newHeight -= newHeight % pixelSize; newWidth -= newWidth % pixelSize; document.getElementById("gameDiv").classList.remove("gameDiv-wide"); if (settings.pixelsize && settings.pixelsize.toString().slice(-1) === "w") { // resizeCanvas(window.innerHeight/ }
```

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

### Molten Render Preset

Source: https://github.com/r74ncom/sandboxels/blob/main/offline.html

Simulates a molten or glowing effect by applying a subtle, oscillating color shift to the pixel's base color. Requires 'origColor' and 'start' properties on the pixel.

```javascript
MOLTEN: function(pixel,ctx) { if (!pixel.origColor && pixel.color.match(/^rgb/)) { pixel.origColor = pixel.color.match(/\d+/g); } if (!pixel.origColor || !viewInfo[view].effects) { drawDefault(ctx,pixel); return; } var hsl = RGBToHSL(pixel.origColor); hsl[0] += (0.025*Math.sin((pixelTicks-pixel.start)*0.033)) - 0.005; hsl = "hsl("+hsl[0]*360+","+hsl[1]*100+"%," + hsl[2]*100+"%)"; drawSquare(ctx,hsl,pixel.x,pixel.y); }
```

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

### Molten Render Preset

Source: https://github.com/r74ncom/sandboxels/blob/main/index.html

Simulates a molten or glowing effect by applying a subtle, oscillating color shift to the pixel's base color. Requires 'origColor' and 'start' properties on the pixel.

```javascript
MOLTEN: function(pixel,ctx) { if (!pixel.origColor && pixel.color.match(/^rgb/)) { pixel.origColor = pixel.color.match(/\d+/g); } if (!pixel.origColor || !viewInfo[view].effects) { drawDefault(ctx,pixel); return; } var hsl = RGBToHSL(pixel.origColor); hsl[0] += (0.025*Math.sin((pixelTicks-pixel.start)*0.033)) - 0.005; hsl = "hsl("+hsl[0]*360+","+hsl[1]*100+"%," + hsl[2]*100+"%)"; drawSquare(ctx,hsl,pixel.x,pixel.y); }
```

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

### Information and Descriptions

Source: https://github.com/r74ncom/sandboxels/blob/main/mod-list.html

Mods dedicated to providing information and descriptions for elements and game features. This includes tooltips, info pages, and descriptions for vanilla elements.

```javascript
descriptions.js

Descriptions to the info page and tooltips of elements
```

```javascript
extra_element_info.js

Descriptions to various vanilla elements. Used to provide the functionality that desc now does before it was added to vanilla
```

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

### Powder Element Definitions with Burning Properties

Source: https://github.com/r74ncom/sandboxels/blob/main/offline.html

Defines powder elements that have burning properties, including their burn temperature, burn time, and the resulting elements after combustion. Examples include confetti and glitter.

```javascript
{
  "feather": {
    "color": ["#ffffff","#e3e3e3","#d1d1d1"],
    "behavior": behaviors.LIGHTWEIGHT,
    "category": "powders",
    "tempHigh": 400,
    "stateHigh": ["ash","smoke","smoke","smoke"],
    "burn":50,
    "burnTime":20,
    "burnInto": ["ash","smoke","smoke","smoke"],
    "state": "solid",
    "density": 500
  },
  "confetti": {
    "color": ["#dc2c37","#edce66","#0dbf62","#0679ea","#7144b2","#d92097"],
    "behavior": [
      "XX|XX|XX",
      "XX|FX%0.25|XX",
      "M2%25|M1%25|M1%25",
    ],
    "reactions": {
      "water": {"elem1":[null,"cellulose"],"chance":0.001},
      "salt_water": {"elem1":[null,"cellulose"],"chance":0.001},
      "sugar_water": {"elem1":[null,"cellulose"],"chance":0.001},
      "dirty_water": {"elem1":[null,"cellulose"],"chance":0.001},
      "seltzer": {"elem1":[null,"cellulose"],"chance":0.001},
      "pool_water": {"elem1":[null,"cellulose"],"chance":0.001}
    },
    "category": "powders",
    "tempHigh": 248,
    "stateHigh": ["ash","smoke","smoke","fire"],
    "burn":15,
    "burnTime":150,
    "burnInto": ["ash","smoke","smoke","smoke"],
    "state": "solid",
    "density": 1201
  }
}
```