Upload index.html

index.html

@@ -0,0 +1,376 @@
+<!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>
+* {
+    padding: 0; margin: 0; box-sizing: border-box;
+    user-select: none; -webkit-user-select: none; touch-action: 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;
+}
+
+canvas{
+    width:min(100vw, calc(100vh * 4 / 3));
+    height:min(100vh, calc(100vw * 3 / 4));
+    image-rendering:pixelated;
+}
+body.fullscreen #window { border: none; }
+body.fullscreen #titlebar { display: none; }
+
+.touch-zone { position: fixed; z-index: 99999; }
+.touch-btn {
+    width: 70px; height: 70px; background: rgba(255, 255, 255, 0.25);
+    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: 24px; color: rgba(0, 0, 0, 0.6);
+}
+.joystick-base {
+    width: 180px; height: 180px; background: rgba(255, 255, 255, 0.15);
+    border: 3px solid rgba(0, 0, 0, 0.4); border-radius: 50%; position: relative;
+}
+.joystick-stick {
+    width: 80px; height: 80px; background: rgba(0, 0, 0, 0.4); border-radius: 50%;
+    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+}
+#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; }
+.editing-mode .touch-btn, .editing-mode .joystick-base {
+    background: rgba(232, 17, 35, 0.4) !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="zone-joystick" class="touch-zone" style="bottom: 40px; left: 40px;">
+    <div class="joystick-base"><div class="joystick-stick" id="joystick-stick"></div></div>
+</div>
+<div id="zone-enter" class="touch-zone" style="bottom: 120px; right: 30px;">
+    <div class="touch-btn" style="font-size: 16px;">Enter</div>
+</div>
+<div id="zone-shift" class="touch-zone" style="bottom: 120px; right: 110px;">
+    <div class="touch-btn" style="font-size: 16px;">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 === 'existsSync') return () => false;
+                if (prop === 'readFileSync') return () => "";
+                if (prop === 'sep') return '/';
+                if (prop === 'join' || prop === 'dirname') return () => "";
+
+                return proxy; 
+            },
+            apply: function(target, thisArg, args) {
+                return proxy; 
+            },
+            construct: function(target, args) {
+                return proxy; 
+            }
+        });
+        return proxy;
+    }
+
+    
+    if (typeof window.require === "undefined") {
+        window.require = function() { return createSuperMock(); };
+    }
+    
+    window.process = createSuperMock();
+    window.nw = createSuperMock();
+</script>
+
+<script src="c2runtime.js"></script>
+
+<script>
+    jQuery(document).ready(function () {
+        cr_createRuntime("c2canvas");
+        loadButtonPositions();
+    });
+
+    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 keyMap = { 'zone-jump': [90, 32, 38], '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');
+    editToggle.addEventListener('click', function() {
+        isEditing = !isEditing;
+        if (isEditing) {
+            this.classList.add('editing'); this.innerText = 'Save'; document.body.classList.add('editing-mode');
+        } else {
+            this.classList.remove('editing'); this.innerText = 'Edit'; document.body.classList.remove('editing-mode');
+            saveButtonPositions(); 
+        }
+    });
+    
+    var activeJoystickKeys = new Set();
+    function handleJoystick(e, zone) {
+        var touch = e.touches[0];
+        var rect = zone.getBoundingClientRect();
+        var centerX = rect.left + rect.width / 2;
+        var centerY = rect.top + rect.height / 2;
+        var dx = touch.clientX - centerX;
+        var dy = touch.clientY - centerY;
+        var distance = Math.sqrt(dx * dx + dy * dy);
+        var angle = Math.atan2(dy, dx);
+        
+        var maxVisualDist = 65; 
+        var visualDist = Math.min(distance, maxVisualDist);
+        var stickX = Math.cos(angle) * visualDist;
+        var stickY = Math.sin(angle) * visualDist;
+        zone.querySelector('.joystick-stick').style.transform = `translate(calc(-50% + ${stickX}px), calc(-50% + ${stickY}px))`;
+        
+        var deadZone = 30;
+        var newKeys = new Set();
+        if (distance > deadZone) {
+            if (dx > deadZone) newKeys.add(39); 
+            if (dx < -deadZone) newKeys.add(37); 
+            if (dy > deadZone) newKeys.add(40); 
+            if (dy < -deadZone) newKeys.add(38); 
+        }
+        
+        activeJoystickKeys.forEach(key => { if (!newKeys.has(key)) simulateKeyboardEvent([key], 'keyup'); });
+        newKeys.forEach(key => { if (!activeJoystickKeys.has(key)) simulateKeyboardEvent([key], 'keydown'); });
+        activeJoystickKeys = newKeys;
+    }
+    
+    function resetJoystick(zone) {
+        zone.querySelector('.joystick-stick').style.transform = 'translate(-50%, -50%)'; 
+        activeJoystickKeys.forEach(key => simulateKeyboardEvent([key], 'keyup'));
+        activeJoystickKeys.clear();
+    }
+    
+    var zones = document.querySelectorAll('.touch-zone');
+    var isRunLocked = false; 
+
+    zones.forEach(function(zone) {
+        var dragX = 0, dragY = 0;
+
+        
+        if (zone.id === 'zone-run') {
+            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 {
+                    
+                    isRunLocked = !isRunLocked;
+                    
+                    if (isRunLocked) {
+                        
+                        simulateKeyboardEvent([88], 'keydown');
+                        zone.querySelector('.touch-btn').style.background = 'rgba(0, 255, 0, 0.6)'; // Зеленый — показывает, что залипло
+                        zone.querySelector('.touch-btn').style.borderColor = '#00ff00';
+                    } else {
+                        
+                        simulateKeyboardEvent([88], 'keyup');
+                        zone.querySelector('.touch-btn').style.background = 'rgba(255, 255, 255, 0.25)';
+                        zone.querySelector('.touch-btn').style.borderColor = 'rgba(0, 0, 0, 0.4)';
+                    }
+                }
+            }, { 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 && isRunLocked) {
+                    zone.querySelector('.touch-btn').style.background = 'rgba(0, 255, 0, 0.6)';
+                }
+            }, { passive: false });
+
+        } else {
+            
+            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-joystick') {
+                        zone.querySelector('.joystick-stick').style.background = 'rgba(0, 0, 0, 0.6)';
+                        handleJoystick(e, zone);
+                    } 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) {
+                e.preventDefault();
+                if (isEditing) {
+                    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';
+                } else {
+                    if (zone.id === 'zone-joystick') {
+                        handleJoystick(e, zone);
+                    }
+                }
+            }, { passive: false });
+
+            zone.addEventListener('touchend', function(e) {
+                if (!isEditing) {
+                    if (zone.id === 'zone-joystick') {
+                        zone.querySelector('.joystick-stick').style.background = 'rgba(0, 0, 0, 0.4)';
+                        resetJoystick(zone);
+                    } else {
+                        zone.querySelector('.touch-btn').style.background = 'rgba(255, 255, 255, 0.25)';
+                        simulateKeyboardEvent(keyMap[zone.id], 'keyup');
+                    }
+                }
+            }, { passive: false });
+        }
+    });
+    
+    function saveButtonPositions() {
+        var pos = {};
+        zones.forEach(z => pos[z.id] = { left: z.style.left, top: z.style.top, bottom: z.style.bottom });
+        localStorage.setItem('mario_pos', JSON.stringify(pos));
+    }
+    
+    function loadButtonPositions() {
+        var saved = JSON.parse(localStorage.getItem('mario_pos') || "{}");
+        for (var id in saved) {
+            var z = document.getElementById(id);
+            if (z) { z.style.left = saved[id].left; z.style.top = saved[id].top; z.style.bottom = saved[id].bottom; }
+        }
+    }
+</script>
+</body>
+</html>