Upload index.html

index.html

@@ -0,0 +1,392 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+<title>Super Mario Bros.</title>
+
+<style>
+
+:root {
+    --btn-size: 70px;
+    --btn-font: 24px;
+    --btn-opacity: 0.3;
+}
+
+* {
+    padding: 0; margin: 0; box-sizing: border-box;
+    user-select: none; -webkit-user-select: none; 
+}
+html, body {
+    width: 100%; height: 100%; overflow: hidden; background: #000; font-family: "Segoe UI", sans-serif;
+}
+#window {
+    display: flex; flex-direction: column; width: 100%; height: 100%;
+    border: 2px solid #adadad; background: transparent;   
+}
+#titlebar {
+    height: 32px; background: #f0f0f0; display: flex; align-items: center;
+    justify-content: space-between; flex-shrink: 0; border-bottom: 1px solid #adadad;
+}
+#titlebar-left { display: flex; align-items: center; padding-left: 10px; }
+#titlebar-text { font-size: 12px; color: #333; font-weight: 600; }
+#titlebar-buttons { display: flex; height: 100%; }
+.titlebar-btn {
+    width: 46px; height: 100%; border: none; background: transparent; font-size: 16px;
+    display: flex; align-items: center; justify-content: center; color: #333; cursor: pointer;
+}
+.titlebar-btn:hover { background: rgba(0, 0, 0, 0.1); }
+#btn-close:hover { background: #e81123; color: white; }
+
+#game-container {
+    display: flex; justify-content: center; align-items: center;
+    background: #000; flex: 1;
+}
+
+canvas {
+    width: min(100vw, calc(100vh * 4 / 3));
+    height: min(100vh, calc(100vw * 3 / 4));
+    image-rendering: pixelated;
+    object-fit: contain;
+    touch-action: none; 
+}
+
+body.fullscreen #window { border: none; }
+body.fullscreen #titlebar { display: none; }
+
+.touch-zone { position: fixed; z-index: 99999; touch-action: none; }
+
+
+.touch-btn {
+    width: var(--btn-size); 
+    height: var(--btn-size); 
+    background: rgba(255, 255, 255, var(--btn-opacity));
+    border: 3px solid rgba(0, 0, 0, 0.4); 
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: bold; font-size: var(--btn-font); color: rgba(0, 0, 0, 0.6);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
+}
+
+#edit-toggle {
+    position: fixed; top: 45px; right: 15px; padding: 8px 16px;
+    background: rgba(0, 0, 0, 0.6); color: white; border: 2px solid white;
+    border-radius: 5px; font-size: 14px; z-index: 100000; cursor: pointer;
+}
+#edit-toggle.editing { background: #e81123; }
+
+
+#edit-panel {
+    display: none;
+    position: fixed; top: 90px; right: 15px;
+    background: rgba(0, 0, 0, 0.8);
+    padding: 15px; border-radius: 8px; border: 2px solid white;
+    color: white; z-index: 100001; font-family: Arial, sans-serif;
+    width: 200px;
+}
+.edit-row {
+    display: flex; flex-direction: column; margin-bottom: 15px;
+}
+.edit-row label { font-size: 13px; margin-bottom: 5px; }
+.edit-row input { touch-action: auto; /* Чтобы ползунки работали на телефоне */ }
+
+.editing-mode .touch-btn {
+    background: rgba(232, 17, 35, var(--btn-opacity)) !important; 
+    border: 3px dashed #fff !important; color: #fff !important;
+}
+</style>
+</head>
+<body>
+
+<div id="window">
+    <div id="titlebar">
+        <div id="titlebar-left"><div id="titlebar-text">Super Mario Bros. unofficial android port by Player1444(Web)</div></div>
+        <div id="titlebar-buttons">
+            <button class="titlebar-btn" id="btn-minimize">—</button>
+            <button class="titlebar-btn" id="btn-maximize">▢</button>
+            <button class="titlebar-btn" id="btn-close">✕</button>
+        </div>
+    </div>
+    <div id="game-container">
+        <canvas id="c2canvas" width="256" height="240"></canvas>
+    </div>
+</div>
+
+<button id="edit-toggle">Edit</button>
+
+
+<div id="edit-panel">
+    <div class="edit-row">
+        <label>Размер кнопок:</label>
+        <input type="range" id="edit-size" min="40" max="130" value="70">
+    </div>
+    <div class="edit-row">
+        <label>Прозрачность:</label>
+        <input type="range" id="edit-opacity" min="5" max="100" value="30">
+    </div>
+    <div style="font-size:11px; color:#aaa; text-align:center;">Двигайте кнопки по экрану, чтобы изменить их позицию</div>
+</div>
+
+
+<div id="zone-left" class="touch-zone" style="bottom: 40px; left: 20px;"><div class="touch-btn">←</div></div>
+<div id="zone-right" class="touch-zone" style="bottom: 40px; left: 160px;"><div class="touch-btn">→</div></div>
+<div id="zone-up" class="touch-zone" style="bottom: 110px; left: 90px;"><div class="touch-btn">↑</div></div>
+<div id="zone-down" class="touch-zone" style="bottom: 20px; left: 90px;"><div class="touch-btn">↓</div></div>
+
+
+<div id="zone-enter" class="touch-zone" style="bottom: 120px; right: 30px;">
+    <div class="touch-btn" style="font-size: calc(var(--btn-font) * 0.65);">ENTER</div>
+</div>
+<div id="zone-shift" class="touch-zone" style="bottom: 120px; right: 110px;">
+    <div class="touch-btn" style="font-size: calc(var(--btn-font) * 0.65);">SHIFT</div>
+</div>
+<div id="zone-run" class="touch-zone" style="bottom: 40px; right: 110px;"><div class="touch-btn">X</div></div>
+<div id="zone-jump" class="touch-zone" style="bottom: 40px; right: 30px;"><div class="touch-btn">Z</div></div>
+
+<input style="display:none;" id="c2nwOpenFileDialog" type="file" />
+<input style="display:none;" id="c2nwChooseFolderDialog" type="file" nwdirectory />
+<input style="display:none;" id="c2nwSaveDialog" type="file" nwsaveas />
+
+<script src="jquery-3.4.1.min.js"></script>
+
+<script>
+    window["c2nodewebkit"] = false;
+
+    function createSuperMock() {
+        const noop = function() {};
+        const proxy = new Proxy(noop, {
+            get: function(target, prop) {
+                if (prop === Symbol.toPrimitive) return () => "";
+                if (prop === 'toString') return () => "";
+                if (prop === 'valueOf') return () => 0;
+                if (prop === 'then') return undefined; 
+                if (prop === 'platform') return 'win32';
+                if (prop === 'filename') return 'index.html';
+                if (prop === 'manifest') return { window: { icon: "" } };
+                if (prop === 'sep') return '/';
+                return proxy; 
+            },
+            apply: function() { return proxy; },
+            construct: function() { return proxy; }
+        });
+        return proxy;
+    }
+
+    if (typeof window.require === "undefined") {
+        window.require = function(moduleName) {
+            
+            
+            if (moduleName === "path") {
+                return new Proxy({
+                    join: function() { return Array.from(arguments).join("/").replace(/\/\//g, "/"); },
+                    dirname: function() { return "/"; },
+                    sep: "/"
+                }, { get: (t, p) => t[p] || createSuperMock() });
+            }
+
+            
+            if (moduleName === "fs") {
+                return new Proxy({
+                    existsSync: function(path) { 
+                        return localStorage.getItem("vfs_" + path) !== null; 
+                    },
+                    readFileSync: function(path, encoding) { 
+                        return localStorage.getItem("vfs_" + path) || ""; 
+                    },
+                    writeFileSync: function(path, data) { 
+                        localStorage.setItem("vfs_" + path, data); 
+                    },
+                    appendFileSync: function(path, data) {
+                        let old = localStorage.getItem("vfs_" + path) || "";
+                        localStorage.setItem("vfs_" + path, old + data);
+                    },
+                    unlinkSync: function(path) {
+                        localStorage.removeItem("vfs_" + path);
+                    },
+                    statSync: function() { return { isDirectory: () => false }; }
+                }, { get: (t, p) => t[p] || createSuperMock() });
+            }
+
+            return createSuperMock(); 
+        };
+    }
+    
+    window.process = createSuperMock();
+    window.nw = createSuperMock();
+</script>
+
+<script src="c2runtime.js"></script>
+
+<script>
+    jQuery(document).ready(function () {
+        cr_createRuntime("c2canvas");
+        loadSettingsAndPositions();
+    });
+
+    document.addEventListener("visibilitychange", function() {
+        if (typeof cr_setSuspended !== "undefined") cr_setSuspended(!!document.hidden);
+    });
+
+    document.getElementById("btn-minimize").onclick = () => alert("Окно нельзя свернуть в браузере.");
+    document.getElementById("btn-close").onclick = () => {
+        document.getElementById("window").style.display = "none";
+        if (typeof cr_setSuspended !== "undefined") cr_setSuspended(true);
+    };
+
+    var btnMaximize = document.getElementById("btn-maximize");
+    btnMaximize.onclick = () => {
+        var elem = document.documentElement;
+        if (!document.fullscreenElement) {
+            if (elem.requestFullscreen) elem.requestFullscreen();
+            else if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen();
+        } else {
+            if (document.exitFullscreen) document.exitFullscreen();
+            else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
+        }
+    };
+
+    document.addEventListener("fullscreenchange", () => {
+        if (document.fullscreenElement) document.body.classList.add("fullscreen");
+        else document.body.classList.remove("fullscreen");
+    });
+
+
+    var isEditing = false;
+    var isRunLocked = false; 
+
+    var keyMap = { 
+        'zone-left': [37], 'zone-right': [39], 'zone-up': [38], 'zone-down': [40], 
+        'zone-jump': [90, 32], 'zone-run': [88], 'zone-shift': [16], 'zone-enter': [13] 
+    };
+    
+    function simulateKeyboardEvent(keyCodes, type) {
+        if (!keyCodes) return;
+        keyCodes.forEach(code => {
+            var e = new KeyboardEvent(type, { keyCode: code, which: code, bubbles: true });
+            document.dispatchEvent(e); window.dispatchEvent(e);
+            var canvas = document.getElementById("c2canvas");
+            if (canvas) canvas.dispatchEvent(e);
+        });
+    }
+    
+    var editToggle = document.getElementById('edit-toggle');
+    var editPanel = document.getElementById('edit-panel');
+
+    editToggle.addEventListener('click', function() {
+        isEditing = !isEditing;
+        if (isEditing) {
+            this.classList.add('editing'); this.innerText = 'Save'; 
+            document.body.classList.add('editing-mode');
+            editPanel.style.display = 'block'; 
+        } else {
+            this.classList.remove('editing'); this.innerText = 'Edit'; 
+            document.body.classList.remove('editing-mode');
+            editPanel.style.display = 'none'; 
+            saveSettingsAndPositions(); 
+        }
+    });
+
+    
+    document.getElementById('edit-size').addEventListener('input', function(e) {
+        var size = e.target.value;
+        document.documentElement.style.setProperty('--btn-size', size + 'px');
+        document.documentElement.style.setProperty('--btn-font', (size / 2.8) + 'px');
+    });
+
+    document.getElementById('edit-opacity').addEventListener('input', function(e) {
+        var opacity = e.target.value / 100;
+        document.documentElement.style.setProperty('--btn-opacity', opacity);
+    });
+    
+    var zones = document.querySelectorAll('.touch-zone');
+
+    zones.forEach(function(zone) {
+        var dragX = 0, dragY = 0;
+
+        zone.addEventListener('touchstart', function(e) {
+            if (isEditing) {
+                var touch = e.touches[0];
+                var rect = zone.getBoundingClientRect();
+                dragX = touch.clientX - rect.left;
+                dragY = touch.clientY - rect.top;
+            } else {
+                if (zone.id === 'zone-run') {
+                    isRunLocked = !isRunLocked;
+                    if (isRunLocked) {
+                        simulateKeyboardEvent(keyMap['zone-run'], 'keydown');
+                        zone.querySelector('.touch-btn').style.background = 'rgba(0, 255, 0, 0.6)';
+                        zone.querySelector('.touch-btn').style.borderColor = '#00ff00';
+                    } else {
+                        simulateKeyboardEvent(keyMap['zone-run'], 'keyup');
+                        zone.querySelector('.touch-btn').style.background = ''; // Возврат к CSS
+                        zone.querySelector('.touch-btn').style.borderColor = 'rgba(0, 0, 0, 0.4)';
+                    }
+                } else {
+                    zone.querySelector('.touch-btn').style.background = 'rgba(255, 255, 255, 0.6)';
+                    simulateKeyboardEvent(keyMap[zone.id], 'keydown');
+                }
+            }
+        }, { passive: false });
+
+        zone.addEventListener('touchmove', function(e) {
+            if (isEditing) {
+                e.preventDefault();
+                var touch = e.touches[0];
+                var left = touch.clientX - dragX;
+                var top = touch.clientY - dragY;
+                left = Math.max(0, Math.min(window.innerWidth - zone.offsetWidth, left));
+                top = Math.max(0, Math.min(window.innerHeight - zone.offsetHeight, top));
+                zone.style.left = left + 'px';
+                zone.style.top = top + 'px';
+                zone.style.bottom = 'auto';
+            }
+        }, { passive: false });
+
+        zone.addEventListener('touchend', function(e) {
+            if (!isEditing) {
+                if (zone.id === 'zone-run') {
+                    if (isRunLocked) zone.querySelector('.touch-btn').style.background = 'rgba(0, 255, 0, 0.6)';
+                } else {
+                    zone.querySelector('.touch-btn').style.background = ''; // Возврат к CSS
+                    simulateKeyboardEvent(keyMap[zone.id], 'keyup');
+                }
+            }
+        }, { passive: false });
+    });
+    
+    function saveSettingsAndPositions() {
+        var data = {
+            size: document.getElementById('edit-size').value,
+            opacity: document.getElementById('edit-opacity').value,
+            positions: {}
+        };
+        zones.forEach(z => data.positions[z.id] = { left: z.style.left, top: z.style.top, bottom: z.style.bottom });
+        localStorage.setItem('mario_data_v3', JSON.stringify(data));
+    }
+    
+    function loadSettingsAndPositions() {
+        var saved = JSON.parse(localStorage.getItem('mario_data_v3') || "{}");
+        
+        
+        if (saved.size) {
+            document.getElementById('edit-size').value = saved.size;
+            document.documentElement.style.setProperty('--btn-size', saved.size + 'px');
+            document.documentElement.style.setProperty('--btn-font', (saved.size / 2.8) + 'px');
+        }
+        if (saved.opacity) {
+            document.getElementById('edit-opacity').value = saved.opacity;
+            document.documentElement.style.setProperty('--btn-opacity', saved.opacity / 100);
+        }
+        
+        
+        if (saved.positions) {
+            for (var id in saved.positions) {
+                var z = document.getElementById(id);
+                if (z) { z.style.left = saved.positions[id].left; z.style.top = saved.positions[id].top; z.style.bottom = saved.positions[id].bottom; }
+            }
+        }
+    }
+</script>
+</body>
+</html>