added game

Author: joelalejandro

aseprites/Butterfly.aseprite

@@ -0,0 +1,38 @@
+class FlyButterflyGame extends Game {
+    start() {
+        super.start();
+
+        const lifeInterval = setInterval(() => {
+            this.life.points -= this.level / 5;
+            if (this.over) {
+                clearInterval(lifeInterval);
+            }
+        }, 100);
+
+        const raisePoints = () => window.requestAnimationFrame(() => {
+            this.score.points += 0.1 * this.level;
+            this.level = Math.ceil(this.score.points / 1000);
+
+            if (!this.over) {
+                raisePoints();
+            }
+        });
+
+        raisePoints();
+    }
+
+    end() {
+        super.end();
+
+        const gameOverScreen = document.createElement("div");
+        gameOverScreen.id = "gameover";
+        gameOverScreen.innerHTML = `<h1>GAME OVER</h1>Score: <span>${Math.floor(this.score.points)}</span><button onclick='window.location.reload()'>PLAY AGAIN</button>`;
+        this.scene.renderGameElement(new GameElement(gameOverScreen));
+    }
+}
+
+new FlyButterflyGame({
+    sceneElement: document.querySelector("#game"),
+    playerElement: document.querySelector("#player"),
+    spawners: [FlowerSpawner]
+});

aseprites/Flower1.aseprite

@@ -0,0 +1,48 @@
+class Controls {
+    keyEventListeners = {};
+    mouseEventListeners = {};
+    enabled = true;
+    sceneElement = null;
+
+    constructor({ sceneElement }) {
+        window.addEventListener("keydown", event => {
+            if (!this.enabled) {
+                return;
+            }
+
+            (this.keyEventListeners[event.key] || []).forEach(callback => window.requestAnimationFrame(callback));
+        });
+
+        sceneElement.addEventListener("mousemove", event => {
+            if (!this.enabled) {
+                return;
+            }
+
+            (this.mouseEventListeners["MouseMove"] || []).forEach(callback => window.requestAnimationFrame(() => callback(event)));
+        });
+    }
+
+    onMouseMove(callback) {
+        this.mouseEventListeners["MouseMove"] = [...(this.mouseEventListeners["MouseMove"] || []), callback];
+    }
+
+    onMouseDown(callback) {
+        this.mouseEventListeners["MouseDown"] = [...(this.mouseEventListeners["MouseDown"] || []), callback];
+    }
+
+    onArrowDown(callback) {
+        this.keyEventListeners["ArrowDown"] = [...(this.keyEventListeners["ArrowDown"] || []), callback];
+    }
+
+    onArrowUp(callback) {
+        this.keyEventListeners["ArrowUp"] = [...(this.keyEventListeners["ArrowUp"] || []), callback];
+    }
+
+    onArrowLeft(callback) {
+        this.keyEventListeners["ArrowLeft"] = [...(this.keyEventListeners["ArrowLeft"] || []), callback];
+    }
+
+    onArrowRight(callback) {
+        this.keyEventListeners["ArrowRight"] = [...(this.keyEventListeners["ArrowRight"] || []), callback];
+    }
+}

aseprites/Flower2.aseprite

@@ -0,0 +1,48 @@
+class Game {
+    over = false;
+
+    /**
+    * @type {Player}
+    */
+    player = null;
+
+    /**
+     * @type {Controls}
+     */
+    controls = null;
+
+    /**
+    * @type {Score} 
+    */
+    score = null;
+
+    level = 1;
+
+    constructor({
+        playerElement, sceneElement, spawners = []
+    }) {
+        this.controls = new Controls({ sceneElement });
+        this.scene = new GameScene(sceneElement, { spawners: spawners.map(spawner => new spawner(this)) });
+        this.player = new Player({
+            playerGameElement: new GameElement(playerElement),
+            gameControls: this.controls,
+            gameScene: this.scene
+        });
+        this.score = new Score(this.scene);
+        this.life = new PlayerLife(this.scene, () => this.end());
+
+        this.start();
+    }
+
+    end() {
+        this.over = true;
+
+        this.controls.enabled = false;
+
+        this.scene._element.style.cursor = "default";
+        this.scene.destroy();
+        this.player.destroy();
+    }
+
+    start() {}
+}

aseprites/RetroColors.ase

@@ -0,0 +1,92 @@
+class GameElement {
+    /**
+    * @type {HTMLElement}
+    */
+    _element = null;
+
+    id = `element${randomId()}`;
+    isDestroyed = false;
+
+    /**
+    * @param {HTMLElement} element 
+    */
+    constructor(element) {
+        this._element = element;
+        this._element.setAttribute("data-game-element-id", this.id);
+    }
+
+    get x() {
+        return this._element.offsetLeft;
+    }
+
+    set x(value) {
+        this._element.style.left = `${value}px`;
+    }
+
+    get y() {
+        return this._element.offsetTop;
+    }
+
+    set y(value) {
+        this._element.style.top = `${value}px`;
+    }
+
+    get width() {
+        return this._element.offsetWidth;
+    }
+
+    get height() {
+        return this._element.offsetHeight;
+    }
+
+    getElementBox() {
+        return { width: this.width, height: this.height, x: this.x, y: this.y }
+    }
+
+    /**
+    * @param {GameScene} scene 
+    */
+    renderIn(scene) {
+        scene.renderGameElement(this);
+    }
+
+    setContent(value) {
+        this._element.innerHTML = value;
+    }
+
+    setAttribute(attribute, value) {
+        this._element.setAttribute(attribute, value);
+    }
+
+    setData(key, value) {
+        this._element.dataset[key] = value;
+    }
+
+    setAlpha(value) {
+        this._element.style.opacity = value / 100;
+    }
+
+    getData(key) {
+        return this._element.dataset[key];
+    }
+
+    destroy() {
+        this._element.remove();
+        this.isDestroyed = true;
+        this._element = null;
+    }
+
+    /**
+    * @param {GameElement} gameElement 
+    */
+    collidesWith(gameElement) {
+        if (gameElement.isDestroyed || this.isDestroyed) {
+            return false;
+        }
+
+        return this.x >= gameElement.x &&
+            this.y >= gameElement.y &&
+            this.x <= gameElement.x + gameElement.width &&
+            this.y <= gameElement.y + gameElement.height;
+    }
+}

aseprites/Surface1.aseprite

@@ -0,0 +1,111 @@
+class GameScene {
+    /**
+    * @type {HTMLElement}
+    */
+    _element = null;
+
+    /**
+    * @type {Spawner[]}
+    */
+    _spawners = null;
+
+    /**
+    * @type {Object.<string,GameElement>}
+    */
+    _elements = {};
+
+    /**
+     * @type {MutationObserver}
+     */
+    _mutationObserver = {};
+
+    _spawnerTimers = {};
+
+    /**
+    * @param {HTMLElement} element 
+    */
+    constructor(element, { spawners = [] } = {}) {
+        this._element = element;
+        this._spawners = spawners;
+
+        this._element.addEventListener("contextmenu", e => e.preventDefault());
+
+        this.setupSpawners();
+        this.setupMutationObserver();
+    }
+
+    get width() {
+        return this._element.offsetWidth;
+    }
+
+    get height() {
+        return this._element.offsetHeight;
+    }
+
+    /**
+    * @param {GameElement} element 
+    */
+    elementIsInScene(element) {
+        const isInX = element.x >= 0 && element.x + element.width <= this.width;
+        const isInY = element.y >= 0 && element.y + element.height <= this.height;
+
+        return isInX && isInY;
+    }
+
+    setupSpawners() {
+        this._spawners.forEach(spawner => {
+            const spawnLoop = () => {
+                this._spawnerTimers[spawner.id] = setTimeout(() => {
+                    spawner.spawnInto(this);
+                    spawnLoop();
+                }, spawner.frequency());
+            };
+            spawnLoop();
+        });
+    }
+
+    destroy() {
+        Object.values(this._spawnerTimers).forEach(timer => clearTimeout(timer));
+        this._spawners = [];
+        this._mutationObserver.disconnect();
+    }
+
+    setupMutationObserver() {
+        this._mutationObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type !== "childList") {
+                    return;
+                }
+
+                if (mutation.addedNodes.length) {
+                    mutation.addedNodes.forEach(node => {
+                        if (node.nodeType !== Node.TEXT_NODE) {
+                            this._elements[node.dataset.gameElementId] = new GameElement(node);
+                        }
+                    });
+                }
+
+                if (mutation.removedNodes.length) {
+                    mutation.removedNodes.forEach(node => {
+                        if (node.nodeType !== Node.TEXT_NODE) {
+                            delete this._elements[node.dataset.gameElementId];
+                        }
+                    });
+                }
+            });
+        });
+
+        this._mutationObserver.observe(this._element, { childList: true, subtree: true });
+    }
+
+    /**
+    * @param {GameElement} element 
+    */
+    renderGameElement(element) {
+        this._element.append(element._element);
+    }
+
+    getElement(id) {
+        return this._elements[id];
+    }
+}