Move static resources into their own directories

static/js/game.js

@@ -0,0 +1,115 @@
+const WIDTH = 1280;
+const HEIGHT = 720;
+
+function change_setting(category, setting, value) {
+    localStorage.setItem(setting, value);
+    go("settings", category);
+}
+
+function show_settings(category, SETTINGS) {
+    const x = 400;
+    const label_x = 50;
+    const space_between = 100;
+    let y;
+
+    if (category == "Graphics") {
+        y = 130 + space_between;
+        create_label(label_x, y - space_between, "These settings need a page reload to take effect!", 32);
+    }
+    else {
+        y = 130;
+    }
+    
+    for (let key in SETTINGS[category]) {
+        const settings_dict = SETTINGS[category][key];
+        const currentKey = key;
+
+        create_label(label_x, y + 10, key, 32);
+        
+        let value = localStorage.getItem(key);
+
+        if (value == undefined) {
+            localStorage.setItem(key, settings_dict.default);
+            value = settings_dict.default;
+        }
+
+        if (settings_dict.type == "bool") {
+            horizontal_buttons(x, y, [
+                [
+                    "ON", 
+                    value === "true" ? color(255, 255, 255) : color(127, 127, 127),
+                    color(0, 0, 0, 0),  
+                    () => { change_setting(category, currentKey, true); }
+                ], 
+                [
+                    "OFF", 
+                    value === "false" ? color(255, 255, 255) : color(127, 127, 127),
+                    color(0, 0, 0, 0),  
+                    () => { change_setting(category, currentKey, false); }
+                ]
+            ], 100, 50, 20);
+
+        }
+        else if (settings_dict.type == "option") {
+            create_dropdown(x, y, 300, 75, settings_dict.options, 0, (option) => {
+                localStorage.setItem(currentKey, option);
+            });
+        }
+        else if (settings_dict.type == "slider") {
+            create_slider(x, y, 400, Number(settings_dict.min), Number(settings_dict.max), Number(value), (new_value) => {
+                localStorage.setItem(currentKey, new_value);
+            });
+        }
+        
+        y = y + space_between;
+    }
+}
+
+function start_game() {
+    kaplay(
+        { 
+            width: WIDTH,
+            height: HEIGHT,
+            canvas: document.getElementById("canvas"),
+            root: document.getElementById("game-container"),
+            crisp: !localStorage.getItem("Anti-Alasing"),
+            texFilter: localStorage.getItem("Texture Filtering").toLowerCase(),
+            maxFPS: Number(localStorage.getItem("FPS Limit")),
+            font: "New Rocker",
+            background: "#e18888",
+            buttons: {
+                up: {
+                    keyboard: "up",
+                    gamepad: "south", 
+                },
+                jump: {
+                    keyboard: "space",
+                    gamepad: "a"
+                }
+            }
+        }
+    );
+
+    const [GAME_TITLE, SETTINGS] = setup_game();
+
+    scene("settings", (setting_category) => {
+        let generated_button_lists = Object.entries(SETTINGS).map(([key, value]) => [key, color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("settings", key)]);
+        generated_button_lists = [["Back", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("main_menu")]].concat(generated_button_lists);
+
+        horizontal_buttons(10, 10, generated_button_lists, 200, 75, 10);
+
+        if (setting_category != null) {
+            show_settings(setting_category, SETTINGS);
+        }
+        else {
+            show_settings(Object.keys(SETTINGS)[0], SETTINGS);
+        }
+    })
+
+    scene("main_menu", () => {
+        create_label(WIDTH / 2 - 16 * GAME_TITLE.length, HEIGHT / 4, GAME_TITLE, 56);
+        vertical_buttons(WIDTH / 4, HEIGHT / 2.25, [["Play", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("play")], ["Settings", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("settings")]], WIDTH / 2, HEIGHT / 8, HEIGHT / 50)
+    });
+
+    go("main_menu");
+}

static/js/gameui.js

@@ -0,0 +1,332 @@
+function setup_button(button, on_click, label_text, text_color, w, h) {
+    if (label_text != null) {
+        button.add([
+            text(label_text, {
+                width: w / 1.5,
+                size: 28,
+            }),
+            text_color,
+            pos(w / 2 - (label_text.length * 8), h / 2 - 18)
+        ]);
+    }
+
+    button.onClick(on_click);
+    button.onHover(() => {
+        button.scale = vec2(1.025, 1.025);
+        setCursor("pointer");
+    });
+    
+    button.onHoverEnd(() => {
+        button.scale = vec2(1, 1);
+        setCursor("default");
+    });
+    
+
+    return button;
+}
+
+function create_button(x, y, w, h, label_text, bg, text_color, on_click) {
+    let button = add([
+        rect(w, h), 
+        pos(x, y),
+        bg,
+        area(),
+    ]);
+    return setup_button(button, on_click, label_text, text_color, w, h);
+}
+
+function create_texturebutton(x, y, image_name, on_click) {
+    let button = add([
+        sprite(image_name), 
+        pos(x, y),
+        area(),
+    ]);
+
+    return setup_button(button, on_click);
+}
+
+function create_sprite(x, y, image_name) {
+    let image_sprite = add([
+        sprite(image_name),
+        pos(x, y)
+    ])
+
+    return image_sprite;
+}
+
+function create_slider(x, y, w, min_val, max_val, initial_val, on_change) {
+    const slider_height = 15;
+    const handle_size = 30;
+    
+    let slider_container = add([
+        pos(x, y),
+    ]);
+    
+    let track = slider_container.add([
+        rect(w, slider_height),
+        pos(0, handle_size / 2 - slider_height / 2),
+        color(100, 100, 100),
+        area()
+    ]);
+    
+    let value = initial_val;
+    let handle_x = ((value - min_val) / (max_val - min_val)) * w;
+    
+    let handle = slider_container.add([
+        rect(handle_size, handle_size),
+        pos(handle_x - handle_size / 2, 0),
+        color(255, 255, 255),
+        area(),
+        "slider_handle"
+    ]);
+    
+    let value_label = slider_container.add([
+        text(value.toFixed(0), { size: 16 }),
+        pos(w + 10, handle_size / 2 - 8),
+        color(255, 255, 255),
+    ]);
+    
+    let is_dragging = false;
+    
+    handle.onHover(() => {
+        setCursor("pointer");
+    });
+    
+    handle.onHoverEnd(() => {
+        if (!is_dragging) {
+            setCursor("default");
+        }
+    });
+    
+    handle.onMousePress(() => {
+        is_dragging = true;
+        setCursor("grabbing");
+    });
+    
+    onMouseRelease(() => {
+        if (is_dragging) {
+            is_dragging = false;
+            setCursor("default");
+        }
+    });
+    
+    onMouseMove(() => {
+        if (is_dragging) {
+            let mouse_x = mousePos().x - slider_container.pos.x;
+            mouse_x = Math.max(0, Math.min(w, mouse_x));
+            
+            handle.pos.x = mouse_x - handle_size / 2;
+            
+            value = min_val + (mouse_x / w) * (max_val - min_val);
+            value_label.text = value.toFixed(0);
+            
+            if (on_change) {
+                on_change(value);
+            }
+        }
+    });
+    
+    track.onHover(() => {
+        setCursor("pointer");
+    });
+    
+    track.onHoverEnd(() => {
+        setCursor("default");
+    });
+    
+    track.onClick(() => {
+        if (!is_dragging) {
+            let mouse_x = mousePos().x - slider_container.pos.x;
+            mouse_x = Math.max(0, Math.min(w, mouse_x));
+            
+            handle.pos.x = mouse_x - handle_size / 2;
+            value = min_val + (mouse_x / w) * (max_val - min_val);
+            value_label.text = value.toFixed(0);
+            
+            if (on_change) {
+                on_change(value);
+            }
+        }
+    });
+    
+    track.use(area());
+    
+    return {
+        obj: slider_container,
+        getValue: () => value,
+        setValue: (new_val) => {
+            value = Math.max(min_val, Math.min(max_val, new_val));
+            handle_x = ((value - min_val) / (max_val - min_val)) * w;
+            handle.pos.x = handle_x - handle_size / 2;
+            value_label.text = value.toFixed(0);
+        }
+    };
+}
+
+function create_dropdown(x, y, w, h, options, initial_index, on_select) {
+    let selected_index = initial_index || 0;
+    let is_open = false;
+    
+    let dropdown = add([
+        pos(x, y),
+        z(10),
+    ]);
+    
+    let selected_box = dropdown.add([
+        rect(w, h),
+        pos(0, 0),
+        color(60, 60, 60),
+        area(),
+        outline(2, rgb(100, 100, 100)),
+    ]);
+    
+    let selected_text = dropdown.add([
+        text(options[selected_index], { size: 20 }),
+        pos(10, h / 2 - 10),
+        color(255, 255, 255),
+    ]);
+    
+    let arrow = dropdown.add([
+        text("▼", { size: 16 }),
+        pos(w - 25, h / 2 - 8),
+        color(200, 200, 200),
+    ]);
+    
+    let options_container = null;
+    let option_items = [];
+    
+    function create_options_menu() {
+        if (options_container) {
+            destroy(options_container);
+        }
+        
+        options_container = dropdown.add([
+            pos(0, h + 2),
+            z(20),
+        ]);
+        
+        option_items = [];
+        
+        options.forEach((option, index) => {
+            let option_box = options_container.add([
+                rect(w, h),
+                pos(0, index * h),
+                color(50, 50, 50),
+                area(),
+                outline(1, rgb(80, 80, 80)),
+            ]);
+            
+            let option_text = options_container.add([
+                text(option, { size: 20 }),
+                pos(10, index * h + h / 2 - 10),
+                color(255, 255, 255),
+            ]);
+            
+            option_box.onHover(() => {
+                option_box.color = rgb(80, 80, 80);
+                setCursor("pointer");
+            });
+            
+            option_box.onHoverEnd(() => {
+                option_box.color = rgb(50, 50, 50);
+                setCursor("default");
+            });
+            
+            option_box.onClick(() => {
+                selected_index = index;
+                selected_text.text = options[index];
+                close_dropdown();
+                if (on_select) {
+                    on_select(options[index], index);
+                }
+            });
+            
+            option_items.push({ box: option_box, text: option_text });
+        });
+    }
+    
+    function open_dropdown() {
+        is_open = true;
+        arrow.text = "▲";
+        create_options_menu();
+    }
+    
+    function close_dropdown() {
+        is_open = false;
+        arrow.text = "▼";
+        if (options_container) {
+            destroy(options_container);
+            options_container = null;
+        }
+    }
+    
+    selected_box.onHover(() => {
+        selected_box.color = rgb(70, 70, 70);
+        setCursor("pointer");
+    });
+    
+    selected_box.onHoverEnd(() => {
+        selected_box.color = rgb(60, 60, 60);
+        setCursor("default");
+    });
+    
+    selected_box.onClick(() => {
+        if (is_open) {
+            close_dropdown();
+        } else {
+            open_dropdown();
+        }
+    });
+    
+    onClick(() => {
+        if (is_open) {
+            let mouse = mousePos();
+            let in_bounds = mouse.x >= x && mouse.x <= x + w && 
+                           mouse.y >= y && mouse.y <= y + h + (options.length * h);
+            if (!in_bounds) {
+                close_dropdown();
+            }
+        }
+    });
+    
+    return {
+        obj: dropdown,
+        getValue: () => options[selected_index],
+        getIndex: () => selected_index,
+        setIndex: (index) => {
+            if (index >= 0 && index < options.length) {
+                selected_index = index;
+                selected_text.text = options[index];
+            }
+        },
+        close: close_dropdown
+    };
+}
+
+function create_label(x, y, label_text, font_size) {
+    return add([
+        text(label_text, {
+            size: font_size,
+        }),
+        color(0, 0, 0),
+        pos(x, y)
+    ])
+}
+
+function horizontal_buttons(start_x, start_y, buttons, width, height, space_between) {
+    for (let i = 0; i < buttons.length; i++) {
+        create_button(start_x + i * (width + space_between), start_y, width, height, buttons[i][0], buttons[i][1], buttons[i][2], buttons[i][3])
+    }
+}
+
+function vertical_buttons(start_x, start_y, buttons, width, height, space_between) {
+    for (let i = 0; i < buttons.length; i++) {
+        create_button(start_x, start_y + i * (height + space_between), width, height, buttons[i][0], buttons[i][1], buttons[i][2], buttons[i][3])
+    }
+}
+
+function scene_lambda(scene, args) {
+    return () => {
+        go(scene, args);
+    }
+}

static/js/pumpkin.js

@@ -0,0 +1,201 @@
+function draw(e, ctx, CELL_SIZE, drawing, canvas, currentPattern, lit) {
+    if (!drawing) return;
+    var rect = canvas.getBoundingClientRect();
+    var x = e.clientX - rect.left;
+    var y = e.clientY - rect.top;
+    var gridX = Math.floor(x / CELL_SIZE);
+    var gridY = Math.floor(y / CELL_SIZE);
+    check_and_color(ctx, CELL_SIZE, currentPattern, lit, gridX, gridY);
+}
+
+function clearCanvas(ctx, canvas, img, GRID_SIZE, currentPattern) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    drawGrid(ctx, canvas, GRID_SIZE);
+    currentPattern.length = 0;
+}
+
+function drawGrid(ctx, canvas, GRID_SIZE) {
+    const cell_size = canvas.width / GRID_SIZE;
+    const image_data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+    
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.6)';
+    ctx.lineWidth = 1;
+    
+    for (let i = 0; i <= GRID_SIZE; i++) {
+        const pos = i * cell_size;
+        
+        ctx.beginPath();
+        for (let j = 0; j < GRID_SIZE; j++) {
+            const checkLeft = i > 0 && check_colorable(image_data, canvas.width, cell_size, i - 1, j);
+            const checkRight = i < GRID_SIZE && check_colorable(image_data, canvas.width, cell_size, i, j);
+            
+            if (checkLeft || checkRight) {
+                ctx.moveTo(pos, j * cell_size);
+                ctx.lineTo(pos, (j + 1) * cell_size);
+            }
+        }
+        ctx.stroke();
+        
+        ctx.beginPath();
+        for (let j = 0; j < GRID_SIZE; j++) {
+            const checkAbove = i > 0 && check_colorable(image_data, canvas.width, cell_size, j, i - 1);
+            const checkBelow = i < GRID_SIZE && check_colorable(image_data, canvas.width, cell_size, j, i);
+            
+            if (checkAbove || checkBelow) {
+                ctx.moveTo(j * cell_size, pos);
+                ctx.lineTo((j + 1) * cell_size, pos);
+            }
+        }
+        ctx.stroke();
+    }
+}
+
+function is_orange(r, g) {
+    return (r >= 250 && (g >= 121 && g <= 130));
+}
+
+function getPixel(image_data, canvas_width, x, y) {
+    const index = (Math.floor(y) * canvas_width + Math.floor(x)) * 4;
+    
+    return {
+        r: image_data[index],
+        g: image_data[index + 1],
+        b: image_data[index + 2],
+        a: image_data[index + 3]
+    };
+}
+
+function check_colorable(image_data, canvas_width, CELL_SIZE, gridX, gridY) {
+    const cellX = gridX * CELL_SIZE;
+    const cellY = gridY * CELL_SIZE;
+
+    offset = 5
+    
+    const topLeft = getPixel(image_data, canvas_width, cellX + offset, cellY + offset);
+    const topRight = getPixel(image_data, canvas_width, cellX + CELL_SIZE - offset, cellY + offset);
+    const bottomLeft = getPixel(image_data, canvas_width, cellX + offset, cellY + CELL_SIZE - offset);
+    const bottomRight = getPixel(image_data, canvas_width, cellX + CELL_SIZE - offset, cellY + CELL_SIZE - offset);
+
+    return is_orange(topLeft.r, topLeft.g) &&
+           is_orange(topRight.r, topRight.g) &&
+           is_orange(bottomLeft.r, bottomLeft.g) &&
+           is_orange(bottomRight.r, bottomRight.g);
+}
+
+function check_and_color(ctx, CELL_SIZE, currentPattern, lit, gridX, gridY, image_data = null) {
+    if (!image_data) {
+        image_data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;
+    }
+
+    if (check_colorable(image_data, ctx.canvas.width, CELL_SIZE, gridX, gridY)) {
+        var key = `${gridX},${gridY}`;
+        if (!currentPattern.includes(key)) {
+            currentPattern.push(key);
+            var cellX = gridX * CELL_SIZE;
+            var cellY = gridY * CELL_SIZE;
+            if (!lit) {
+                ctx.clearRect(cellX, cellY, CELL_SIZE, CELL_SIZE);
+            }
+            else {
+                ctx.fillStyle = "yellow"
+                ctx.fillRect(cellX, cellY, CELL_SIZE, CELL_SIZE);
+            }
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    return false;
+}
+
+function get_colorable(ctx, canvas, grid_size) {
+    let pattern = [];
+    const cell_size = canvas.width / grid_size;
+
+    const image_data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+
+    for (let y = 0; y < grid_size; y++) {
+        for (let x = 0; x < grid_size; x++) {
+            if (check_colorable(image_data, canvas.width, cell_size, x, y)) {
+                var key = `${x},${y}`;
+                pattern.push(key);
+            }
+        }
+    }
+
+    return pattern;
+}
+
+function light_pumpkin(ctx, cell_size, currentPattern) {
+    for (const str of currentPattern) {
+        const [x, y] = str.split(",").map(s => parseInt(s.trim(), 10));
+        
+        var cellX = x * cell_size;
+        var cellY = y * cell_size;
+
+        ctx.fillStyle = "yellow"
+        ctx.fillRect(cellX, cellY, cell_size, cell_size);
+    }
+}
+
+function unlight_pumpkin(ctx, cell_size, currentPattern) {
+    for (const str of currentPattern) {
+        const [x, y] = str.split(",").map(s => parseInt(s.trim(), 10));
+        
+        var cellX = x * cell_size;
+        var cellY = y * cell_size;
+
+        ctx.clearRect(cellX, cellY, cell_size, cell_size)
+    }
+}
+
+function setup_lightbtn(ctx, cell_size, lightbtn_id, pattern) {
+    let lit = { value: false };
+    document.getElementById(lightbtn_id).addEventListener('click', function(event) {
+        if (lit.value) {
+            lit.value = false;
+            unlight_pumpkin(ctx, cell_size, pattern);
+        } 
+        else {
+            lit.value = true;
+            light_pumpkin(ctx, cell_size, pattern);
+        }
+    });
+
+    return lit;
+}
+
+function setup_pumpkin(canvas_id, clearbtn_id, lightbtn_id, form_id, pattern_field_id, grid_size, allow_drawing=true) {
+    const canvas = document.getElementById(canvas_id);
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+    img.src = '/static/graphics/pumpkin.png';
+    const GRID_SIZE = grid_size;
+    const CELL_SIZE = canvas.width / GRID_SIZE;
+    
+    let currentPattern = [];
+    let lit = { value: false };
+    
+    img.onload = () => {
+        clearCanvas(ctx, canvas, img, GRID_SIZE, currentPattern);
+    };
+
+    if (allow_drawing) {
+        lit = setup_lightbtn(ctx, CELL_SIZE, lightbtn_id, currentPattern);
+
+        let drawing = false;
+        canvas.addEventListener('mousedown', () => { drawing = true; });
+        canvas.addEventListener('mouseup', () => { drawing = false; });
+        canvas.addEventListener('mousemove', (e) => draw(e, ctx, CELL_SIZE, drawing, canvas, currentPattern, lit.value));
+        canvas.addEventListener('click', (e) => {draw(e, ctx, CELL_SIZE, true, canvas, currentPattern, lit.value)});
+        
+        document.getElementById(clearbtn_id).addEventListener('click', () => clearCanvas(ctx, canvas, img, GRID_SIZE, currentPattern));
+        document.getElementById(form_id).addEventListener('submit', function(event) {
+            document.getElementById(pattern_field_id).value = JSON.stringify(currentPattern);
+        });
+    }
+
+    return [ctx, canvas, img];
+}

static/js/pumpkin_memory.js

@@ -0,0 +1,131 @@
+function setup_game() {
+    loadSprite("pumpkin", "/static/graphics/pumpkin.png");
+    const SETTINGS = {
+        "Graphics": {
+            "Anti-Aliasing": {"type": "bool", "default": true},
+            "Texture Filtering": {"type": "option", "options": ["Nearest", "Linear"], "default": "Linear"},
+            "FPS Limit": {"type": "slider", "min": 0, "max": 480, "default": 60},
+        },
+        "Sound": {
+            "Music": {"type": "bool", "default": true},
+            "SFX": {"type": "bool", "default": true},
+            "Music Volume": {"type": "slider", "min": 0, "max": 100, "default": 50},
+            "SFX Volume": {"type": "slider", "min": 0, "max": 100, "default": 50},
+        },
+    };
+
+    scene("game", (pumpkin_pairs, pumpkin_array, revealed, found_pairs, start) => {
+        create_button(5, 5, 150, 75, "Back", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("main_menu"))
+
+        const total = pumpkin_pairs * 2;
+        const pumpkin_size = 100;
+        const space_between = 10;
+        
+        let cols;
+        switch (pumpkin_pairs) {
+            case 5: cols = 5; break; 
+            case 10: cols = 4; break;
+            case 15: cols = 5; break;
+            case 20: cols = 10; break;
+            default: cols = Math.ceil(Math.sqrt(pumpkin_pairs * 2));
+        }
+
+        const rows = Math.ceil(total / cols);
+        const grid_width = cols * (pumpkin_size + space_between) - space_between;
+        const grid_height = rows * (pumpkin_size + space_between) - space_between;
+
+        const start_x = (WIDTH - grid_width) / 2;
+        const start_y = (HEIGHT - grid_height) / 2;
+
+        let arr;
+        if (pumpkin_array == null) {
+            arr = [...Array(pumpkin_pairs).keys(), ...Array(pumpkin_pairs).keys()];
+
+            for (let i = arr.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [arr[i], arr[j]] = [arr[j], arr[i]];
+            }
+        }
+        else {
+            arr = pumpkin_array;
+        }
+
+        if (revealed == null) {
+            revealed = [];
+            found_pairs = [];
+            start = performance.now();
+        }
+
+        let found_pair = null;
+        if (arr[revealed[0]] == arr[revealed[1]] && !found_pairs.includes(arr[revealed[0]])) {
+            found_pair = arr[revealed[0]];
+            found_pairs.push(arr[revealed[0]]);
+            revealed = [];
+        }
+
+        if (revealed.length > 2) {
+            revealed = [];
+        }
+        
+        const elapsed = performance.now() - start;
+        const timer_label = create_label(520, 5, `Time spent: ${(elapsed / 1000).toFixed(1)} s`);
+        const timer_interval_id = setInterval(() => {
+            const elapsed = performance.now() - start;
+            timer_label.text = `Time spent: ${(elapsed / 1000).toFixed(1)} s`
+        }, 100);
+
+        if (pumpkin_pairs == found_pairs.length - 1) {
+            create_label(520, 320, `You win!\nTime took: ${(elapsed / 1000).toFixed(1)} s`, 48);
+            return;
+        }
+
+        for (let i = 0; i < arr.length; i++) {
+            let row =  Math.floor(i / cols);
+            let col = i % cols;
+            let index = i;
+
+            if (revealed.includes(i)) {
+                const sprite = create_sprite(start_x + col * (pumpkin_size + space_between), start_y + row * (pumpkin_size + space_between), "pumpkin");
+                sprite.scale = 1;
+                tween(sprite.scale, 0, 0.2, (val) => sprite.scale = val).then(() => {
+                    create_label(start_x + col * (pumpkin_size + space_between) + pumpkin_size / 2, start_y + row * (pumpkin_size + space_between) + pumpkin_size / 2, arr[i], 24);
+                    tween(sprite.scale, 1, 0.2, (val) => sprite.scale = val).then(() => {
+                        wait(0.5, () => {
+                            if (found_pair == null) {
+                                clearInterval(timer_interval_id);
+                                go("game", pumpkin_pairs, arr, [], found_pairs, start);
+                            }
+                            else {
+                                destroy(sprite);
+                            }
+                        });
+                    });
+                })
+            } else if (found_pairs.includes(arr[i])) {
+                const sprite = create_sprite(start_x + col * (pumpkin_size + space_between), start_y + row * (pumpkin_size + space_between), "pumpkin");
+                sprite.opacity = 0.5;
+                create_label(start_x + col * (pumpkin_size + space_between) + pumpkin_size / 2, start_y + row * (pumpkin_size + space_between) + pumpkin_size / 2, arr[i], 24);
+            } else {
+                const btn = create_texturebutton(start_x + col * (pumpkin_size + space_between), start_y + row * (pumpkin_size + space_between), "pumpkin", () => {
+                    btn.scale = 1.1;
+                    tween(btn.scale, 1, 0.2, (val) => btn.scale = val);
+                    clearInterval(timer_interval_id);
+                    go("game", pumpkin_pairs, arr, revealed.concat([index]), found_pairs, start);
+                })
+            }
+        }
+
+    });
+
+    scene("play", () => {
+        create_label(WIDTH / 2 - 16 * "Difficulty Selector".length, HEIGHT / 8, "Difficulty Selector", 56);
+        vertical_buttons(WIDTH / 4, HEIGHT / 4, [
+            ["Easy", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 5)], 
+            ["Medium", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 10)],
+            ["Hard", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 15)],
+            ["Extra Hard", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 20)]
+        ], WIDTH / 2, HEIGHT / 8, HEIGHT / 50)
+    });
+
+    return ["Pumpkin Memory", SETTINGS];
+}

static/js/pumpkin_roll.js

@@ -0,0 +1,39 @@
+function setup_game() {
+    loadSprite("pumpkin", "/static/graphics/pumpkin.png");
+    loadSprite("gravestone", "/static/gravestone.png")
+    const SETTINGS = {
+        "Graphics": {
+            "Anti-Aliasing": {"type": "bool", "default": true},
+            "Texture Filtering": {"type": "option", "options": ["Nearest", "Linear"], "default": "Linear"},
+            "FPS Limit": {"type": "slider", "min": 0, "max": 480, "default": 60},
+        },
+        "Sound": {
+            "Music": {"type": "bool", "default": true},
+            "SFX": {"type": "bool", "default": true},
+            "Music Volume": {"type": "slider", "min": 0, "max": 100, "default": 50},
+            "SFX Volume": {"type": "slider", "min": 0, "max": 100, "default": 50},
+        },
+        "Input": {
+            "Controller Enabled": {"type": "bool", "default": true}
+        }
+    };
+
+    scene("play", () => {
+        let pumpkin_sprite = add([
+            sprite("pumpkin"),
+            pos(50, 670),
+            anchor("center"),
+            rotate(0)
+        ])
+
+        setInterval(() => {
+            pumpkin_sprite.angle = (pumpkin_sprite.angle + dt() * 720) % 360;
+        }, 100)
+        
+        onKeyPress("jump", () => {
+
+        })
+    })
+
+    return ["Pumpkin Roll", SETTINGS];
+}