first commit 1.0

B4uti4github · B4uti4github · commit f6aea38d64fd · 2026-01-23T21:14:20.000+01:00
diff --git a/Example.html b/Example.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <canvas id="myCanvas" width="200" height="100">
+    Your browser does not support the HTML canvas element.
+</canvas>
+<script src="choppy.js"></script>
+<script>
+    var choppy = new Choppy("myCanvas");
+
+    // Scene 0: Forest
+    choppy.sceneCreate(`
+        // Define drawings once (or update them dynamically)
+        escenaActual.layers[0] = "ctx.fillStyle = 'green'; ctx.fillRect(0,0,200,100);"; // Floor
+        escenaActual.layers[2] = "ctx.fillStyle = 'white'; ctx.fillText('Level: Forest', 10, 20);"; // UI
+    `, "Forest");
+
+    // Scene 1: Cave
+    choppy.sceneCreate(`
+        escenaActual.layers[0] = "ctx.fillStyle = 'black'; ctx.fillRect(0,0,200,100);"; // Dark background
+        escenaActual.layers[1] = "ctx.fillStyle = 'gray'; ctx.fillRect(50,50,20,20);";   // A rock
+    `, "Cave");
+
+    choppy.play(); // Launch the game loop
+
+    // Example of scene transition after 2 seconds
+    setTimeout(() => {
+        choppy.setScene(1);
+    }, 2000);
+</script>
+</body>
+</html>
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 B4uti4Dev / B4uti4GD / B4uti4github
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,72 @@
+# 🌊 Choppy Engine v1.0
+**The ultra-lightweight game orchestration layer for Canvas API.**
+
+Choppy is not a heavy framework; it's a high-speed abstraction script for developers who love the **Canvas API** but hate managing scenes in visual engines, Z-orders, and game loops from scratch. It's designed for **speed-running game development** and rapid prototyping.
+
+---
+
+## 🔥 Why Choppy?
+
+*   **Pure Canvas API**: If you know `ctx.fillRect()` and CanvasAPI, you already know Choppy.
+*   **Zero Overhead**: A single, tiny JS file. No dependencies. No bloat.
+*   **Dynamic Scripting**: Use the power of string-based logic (`eval`) for instant prototyping.
+*   **Scene-Based Z-Order**: Each scene manages its own independent rendering layers (Background, Game, UI).
+*   **Semi-Recursive Flow**: Change scenes and modify the engine state directly from within your scene scripts.
+
+---
+
+## 🚀 Quick Start (Speed-run style)
+
+### 1. Setup your HTML
+1. In the body tag:
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+<script src="choppy.js"></script>
+```
+
+2. Create your Game Logic
+```html
+<script>
+    var choppy = new Choppy("myCanvas");
+
+    // Scene 0: Forest
+    choppy.sceneCreate(`
+        // Define drawings once (or update them dynamically)
+        escenaActual.layers[0] = "ctx.fillStyle = 'green'; ctx.fillRect(0,0,200,100);"; // Floor
+        escenaActual.layers[2] = "ctx.fillStyle = 'white'; ctx.fillText('Level: Forest', 10, 20);"; // UI
+    `, "Forest");
+
+    // Scene 1: Cave
+    choppy.sceneCreate(`
+        escenaActual.layers[0] = "ctx.fillStyle = 'black'; ctx.fillRect(0,0,200,100);"; // Dark background
+        escenaActual.layers[1] = "ctx.fillStyle = 'gray'; ctx.fillRect(50,50,20,20);";   // A rock
+    `, "Cave");
+
+    choppy.play(); // Launch the game loop
+
+    // Example of scene transition after 2 seconds
+    setTimeout(() => {
+        choppy.setScene(1);
+    }, 2000);
+</script>
+```
+💡 Important Tips 🔥
+Scene Management: Choppy provides a lightweight display list. You can switch scenes instantly without memory leaks.
+Extensibility: You can extend the Choppy class easily to add physics or sound systems.
+Security Disclaimer: This script uses eval() for extreme flexibility and speed. Be careful when copying scripts from untrusted sites; malicious code could be hidden in strings. Always know what your eval strings are doing.
+
+## Usage & Credits
+
+### 📦 Local Installation Only
+For security reasons (due to the use of `eval()`), **ChoppyJS must be hosted locally**. Do not link to this script via a CDN. Download the `choppy.js` file and include it directly in your project's ZIP or repository.
+
+### 📜 Attribution
+This project is licensed under the MIT License. This means you **must** keep the copyright notice in the code. Additionally, we highly recommend and appreciate it if you credit **ChoppyJS** in:
+*   Your project's `README.md`.
+*   Your game's "Credits" screen.
+*   The "Tools Used" section of your game's page.
+
+Example: "Built with ChoppyJS by B4uti4GD"
+
+
+Made by me with a little help from AI 😉. Go build something fast!
diff --git a/choppy.js b/choppy.js
@@ -0,0 +1,67 @@
+// ChoppyJS - A simple JavaScript game abstraction script for 2D games
+
+// Disclaimer: This is a basic framework for building 2D games using JavaScript and HTML5 Canvas.
+// It provides scene management and layer drawing capabilities.
+// You can extend it further based on your game requirements.
+// But, This is an simple script for game making; consider security implications of using eval() and remember to be careful when copying scripts from untrusted sites; they could install malware without your knowledge.
+
+// Tips: 
+//  1. Use eval() to run scene scripts and layer drawing code.
+//  2. Each scene can have multiple layers (1, 2, 3) for drawing order.
+//  3. Use setScene(index) to switch between scenes, and use sceneCreate(evalScene, name) for creating scenes.
+//  4. Use deltaTime for frame-independent movement.
+//  5. Access the current scene with 'escenaActual' in eval scripts.
+//  6. Each layers of the current scene is a string to be evaled and runnned in order.
+//  7. This is a basic framework, extend it as needed for your game with "this." + some var name for states.
+//  8. Remember to handle user input and game states within the eval scripts.
+//  9. Enjoy building your 2D games with ChoppyJS!
+
+class Choppy {
+    constructor(canvasId) {
+        this.canvas = document.getElementById(canvasId);
+        this.ctx = this.canvas.getContext("2d");
+        this.scenes = [];
+        this.currentScene = 0;
+        this.lastTime = 0;
+    }
+
+    sceneCreate(evalScene, name) {
+        // Save the scene like an object
+        this.scenes.push({ script: evalScene, name: name, layers: {
+            1: "",
+            2: "",
+            3: "",
+        } });
+    }
+
+    // Método para cambiar de escena (interrumpir la actual)
+    setScene(index) {
+        if (index >= 0 && index < this.scenes.length) {
+            this.currentScene = index;
+        }
+    }
+
+    play() {
+        const loop = (timestamp) => {
+            this.deltaTime = timestamp - this.lastTime;
+            this.lastTime = timestamp;
+            var ctx = this.ctx;
+            ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            
+            // Use this in the eval scripts to access the current scene
+            const escenaActual = this.scenes[this.currentScene];
+
+            // 1. Run Logic from the current scene
+            eval(escenaActual.script);
+
+            // 2. Draw Layers in order
+            Object.keys(escenaActual.layers).sort().forEach(z => {
+                eval(escenaActual.layers[z]);
+            });
+
+            requestAnimationFrame(loop);
+        };
+        requestAnimationFrame(loop);
+    }
+
+}
