From 1667dc10887f9b33297aeba5d8c56b48e8602b81 Mon Sep 17 00:00:00 2001
From: assada <assada@dead.services>
Date: Wed, 4 Sep 2024 16:09:41 +0300
Subject: [PATCH] Add index.html

---
 index.html | 482 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 482 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6c79d8d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,482 @@
+<!DOCTYPE html>
+<html lang="uk">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PlaSim</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+        canvas {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div id="controlSwitch" style="position: absolute; font-family: Arial, Helvetica, sans-serif; top: 10px; right: 10px; background: rgba(0,0,0,0.5); color: aliceblue; padding: 10px; border-radius: 5px;">
+        <label>
+            <input type="radio" name="controlType" value="keyboard" checked> Клавіатура
+        </label>
+        <label>
+            <input type="radio" name="controlType" value="gamepad"> Геймпад
+        </label>
+    </div>
+    <canvas id="gameCanvas"></canvas>
+    <script>
+        let controlType = 'keyboard';
+
+        document.querySelectorAll('input[name="controlType"]').forEach((elem) => {
+            elem.addEventListener("change", function(event) {
+                controlType = event.target.value;
+            });
+        });
+
+
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+
+        let canvasWidth, canvasHeight;
+        let tractor, leftTrail, rightTrail, obstacles, mudPattern;
+
+        function resizeCanvas() {
+            canvasWidth = window.innerWidth;
+            canvasHeight = window.innerHeight;
+            canvas.width = canvasWidth;
+            canvas.height = canvasHeight;
+            createMudTexture();
+        }
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+
+        let lMut = false;
+        let rMut = false;
+
+        function createMudTexture() {
+            const textureCanvas = document.createElement('canvas');
+            textureCanvas.width = 200;
+            textureCanvas.height = 200;
+            const textureCtx = textureCanvas.getContext('2d');
+
+            textureCtx.fillStyle = '#8B4513';
+            textureCtx.fillRect(0, 0, 200, 200);
+
+            for (let i = 0; i < 1000; i++) {
+                textureCtx.fillStyle = `rgba(${Math.random() * 50 + 100}, ${Math.random() * 30 + 50}, ${Math.random() * 20}, ${Math.random() * 0.5})`;
+                textureCtx.beginPath();
+                textureCtx.arc(Math.random() * 200, Math.random() * 200, Math.random() * 2, 0, Math.PI * 2);
+                textureCtx.fill();
+            }
+
+            mudPattern = ctx.createPattern(textureCanvas, 'repeat');
+        }
+
+        function initGame() {
+            tractor = {
+                x: canvasWidth / 2,
+                y: canvasHeight / 2,
+                width: 60,
+                height: 80,
+                angle: 0,
+                leftTrack: 0,
+                rightTrack: 0,
+                speed: 1.5,
+                turnSpeed: 0.008,
+                friction: 0.92,
+                acceleration: 0.2,
+                braking: 0.4,
+                leftReverse: false,
+                rightReverse: false,
+                leftTrackOffset: 0,
+                rightTrackOffset: 0,
+                leftBrake: false,
+                rightBrake: false
+            };
+
+            leftTrail = [];
+            rightTrail = [];
+            
+            obstacles = [];
+            for (let i = 0; i < 10; i++) {
+                obstacles.push({
+                    x: Math.random() * canvasWidth,
+                    y: Math.random() * canvasHeight,
+                    radius: 15
+                });
+            }
+
+            createMudTexture();
+        }
+
+        initGame();
+
+        const maxTrailLength = 500;
+        const trailLifetime = 5000;
+        const trailInterval = 5;
+
+        let frameCount = 0;
+
+        function drawTractor() {
+            ctx.save();
+            ctx.translate(tractor.x, tractor.y);
+            ctx.rotate(tractor.angle);
+
+            ctx.fillStyle = 'green';
+            ctx.fillRect(-tractor.width / 2, -tractor.height / 2, tractor.width, tractor.height);
+
+            const trackHeight = tractor.height;
+            const trackWidth = 7;
+            const segmentHeight = 7;
+
+            ctx.globalAlpha = 0.8;
+
+            ctx.fillStyle = '#333';
+            for (let i = 0; i < trackHeight / segmentHeight; i++) {
+                const alpha = Math.max(0.5, 1 - Math.abs((tractor.leftTrackOffset + i * segmentHeight) % 20) / 10);
+                ctx.globalAlpha = alpha;
+                ctx.fillRect(
+                    -tractor.width / 2 - trackWidth,
+                    -tractor.height / 2 + i * segmentHeight,
+                    trackWidth,
+                    segmentHeight - 2
+                );
+            }
+
+            ctx.fillStyle = '#333';
+            for (let i = 0; i < trackHeight / segmentHeight; i++) {
+                const alpha = Math.max(0.5, 1 - Math.abs((tractor.rightTrackOffset + i * segmentHeight) % 20) / 10);
+                ctx.globalAlpha = alpha;
+                ctx.fillRect(
+                    tractor.width / 2,
+                    -tractor.height / 2 + i * segmentHeight,
+                    trackWidth,
+                    segmentHeight - 2
+                );
+            }
+
+            ctx.globalAlpha = 1;
+
+            ctx.fillStyle = 'lightblue';
+            ctx.fillRect(-tractor.width / 4, -tractor.height / 4, tractor.width / 2, tractor.height / 2);
+
+            ctx.beginPath();
+            ctx.moveTo(0, -tractor.height / 2 - 20);
+            ctx.lineTo(10, -tractor.height / 2 - 10);
+            ctx.lineTo(-10, -tractor.height / 2 - 10);
+            ctx.closePath();
+            ctx.fillStyle = 'red';
+            ctx.fill();
+
+            ctx.restore();
+        }
+
+        function drawObstacles() {
+            ctx.fillStyle = 'orange';
+            for (let obstacle of obstacles) {
+                ctx.beginPath();
+                ctx.arc(obstacle.x, obstacle.y, obstacle.radius, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+
+        function drawMud() {
+            ctx.fillStyle = mudPattern;
+            ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+        }
+
+        function drawTrail() {
+            const currentTime = Date.now();
+            
+            ctx.lineWidth = 3;
+            ctx.strokeStyle = 'rgba(60, 30, 15, 0.5)';
+            for (let trail of [leftTrail, rightTrail]) {
+                ctx.beginPath();
+                for (let i = 0; i < trail.length; i++) {
+                    const alpha = Math.max(0, 1 - (currentTime - trail[i].time) / trailLifetime);
+                    if (alpha > 0) {
+                        ctx.globalAlpha = alpha;
+                        if (i === 0) {
+                            ctx.moveTo(trail[i].x, trail[i].y);
+                        } else {
+                            ctx.lineTo(trail[i].x, trail[i].y);
+                        }
+                    }
+                }
+                ctx.stroke();
+            }
+            ctx.globalAlpha = 1;
+
+            const cutoffTime = currentTime - trailLifetime;
+            leftTrail = leftTrail.filter(point => point.time > cutoffTime);
+            rightTrail = rightTrail.filter(point => point.time > cutoffTime);
+        }
+
+        function updateTractor() {
+            const leftSpeed = tractor.leftTrack * (tractor.leftReverse ? -1 : 1);
+            const rightSpeed = tractor.rightTrack * (tractor.rightReverse ? -1 : 1);
+            const forwardSpeed = (leftSpeed + rightSpeed) / 2;
+            const turn = (rightSpeed - leftSpeed) * tractor.turnSpeed;
+
+            const newX = tractor.x + Math.sin(tractor.angle) * forwardSpeed;
+            const newY = tractor.y - Math.cos(tractor.angle) * forwardSpeed;
+
+            let collision = false;
+            for (let obstacle of obstacles) {
+                const dx = newX - obstacle.x;
+                const dy = newY - obstacle.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                if (distance < tractor.width / 2 + obstacle.radius + 5) {
+                    collision = true;
+                    break;
+                }
+            }
+
+            if (!collision) {
+                tractor.x = newX;
+                tractor.y = newY;
+                tractor.angle += turn;
+            }
+
+            tractor.leftTrack *= tractor.friction;
+            tractor.rightTrack *= tractor.friction;
+
+            tractor.leftTrackOffset += leftSpeed;
+            tractor.rightTrackOffset += rightSpeed;
+
+            tractor.leftTrackOffset = tractor.leftTrackOffset % 20;
+            tractor.rightTrackOffset = tractor.rightTrackOffset % 20;
+
+            if ((tractor.leftBrake === false && tractor.rightBrake === true) || (tractor.leftBrake === true && tractor.rightBrake === false)) {
+                tractor.turnSpeed = 0.015;
+            } else {
+                tractor.turnSpeed = 0.008;
+            }
+
+            if (frameCount % trailInterval === 0) {
+                const currentTime = Date.now();
+                const leftTrackPos = {
+                    x: tractor.x + Math.sin(tractor.angle + Math.PI/2) * tractor.width/2 + 
+                    Math.sin(tractor.angle) * (tractor.leftReverse ? tractor.height/2 : -tractor.height/2),
+                    y: tractor.y - Math.cos(tractor.angle + Math.PI/2) * tractor.width/2 - 
+                    Math.cos(tractor.angle) * (tractor.leftReverse ? tractor.height/2 : -tractor.height/2),
+                    time: currentTime
+                };
+                const rightTrackPos = {
+                    x: tractor.x + Math.sin(tractor.angle - Math.PI/2) * tractor.width/2 + 
+                    Math.sin(tractor.angle) * (tractor.rightReverse ? tractor.height/2 : -tractor.height/2),
+                    y: tractor.y - Math.cos(tractor.angle - Math.PI/2) * tractor.width/2 - 
+                    Math.cos(tractor.angle) * (tractor.rightReverse ? tractor.height/2 : -tractor.height/2),
+                    time: currentTime
+                };
+
+                leftTrail.push(leftTrackPos);
+                rightTrail.push(rightTrackPos);
+                if (leftTrail.length > maxTrailLength) leftTrail.shift();
+                if (rightTrail.length > maxTrailLength) rightTrail.shift();
+            }
+
+            tractor.x = Math.max(tractor.width / 2, Math.min(canvasWidth - tractor.width / 2, tractor.x));
+            tractor.y = Math.max(tractor.height / 2, Math.min(canvasHeight - tractor.height / 2, tractor.y));
+        }
+
+        const keys = {};
+
+        document.addEventListener('keydown', (event) => {
+            keys[event.key] = true;
+            if (event.key === 'r' || event.key === 'R') {
+                initGame();
+            }
+        });
+
+        document.addEventListener('keyup', (event) => {
+            keys[event.key] = false;
+            if (event.key === 'q' || event.key === 'Q') {
+                lMut = false;
+            }
+            if (event.key === 'e' || event.key === 'E') {
+                rMut = false;
+            }
+        });
+
+        function handleKeyboardInput() {
+            if (!keys['ArrowDown']) {
+                tractor.leftBrake = false;
+            }
+            if (!keys['s']) {
+                tractor.rightBrake = false;
+            }
+
+
+            if (keys['ArrowUp']) {
+                tractor.leftBrake = false;
+                tractor.leftTrack = Math.min(tractor.leftTrack + tractor.acceleration, tractor.speed);
+            } else if (keys['ArrowDown']) {
+                tractor.leftBrake = true;
+                tractor.leftTrack = Math.max(tractor.leftTrack - tractor.braking, 0);
+            }
+
+            if (keys['w']) {
+                tractor.rightBrake = false;
+                tractor.rightTrack = Math.min(tractor.rightTrack + tractor.acceleration, tractor.speed);
+            } else if (keys['s']) {
+                tractor.rightBrake = true;
+                tractor.rightTrack = Math.max(tractor.rightTrack - tractor.braking, 0);
+            }
+
+            if (keys['q']) {
+                if (lMut == false) {
+                    tractor.leftReverse = !tractor.leftReverse;
+                    tractor.leftTrack = 0;
+                    lMut = true;
+                }
+            }
+            if (keys['e']) {
+                if (rMut == false) {
+                    tractor.rightReverse = !tractor.rightReverse;
+                    tractor.rightTrack = 0;
+                    rMut = true;
+                }
+            }
+        }
+
+        function handleInput() {
+            if (controlType === 'gamepad') {
+                handleGamepadInput();
+            } else {
+                handleKeyboardInput();
+            }
+        }
+
+        function drawStatus() {
+            ctx.font = '16px Arial';
+            ctx.fillStyle = 'white';
+            ctx.fillText(`Права вісь: ${tractor.leftReverse ? 'Реверс' : 'Вперед'} (${tractor.leftTrack.toFixed(2)})`, 10, 30);
+            ctx.fillText(`Ліва вісь: ${tractor.rightReverse ? 'Реверс' : 'Вперед'} (${tractor.rightTrack.toFixed(2)})`, 10, 60);
+        }
+
+        function drawInstructions() {
+            ctx.font = '14px Arial';
+            ctx.fillStyle = 'white';
+            ctx.fillText('Керування:', 10, canvasHeight - 180);
+            ctx.fillText('W - рух лівої гусениці', 10, canvasHeight - 160);
+            ctx.fillText('S - гальмування лівої гусениці', 10, canvasHeight - 140);
+            ctx.fillText('↑ - рух правої гусениці', 10, canvasHeight - 120);
+            ctx.fillText('↓ - гальмування правої гусениці', 10, canvasHeight - 100);
+            ctx.fillText('Q - реверс лівої гусениці', 10, canvasHeight - 80);
+            ctx.fillText('E - реверс правої гусениці', 10, canvasHeight - 60);
+            ctx.fillText('R - рестарт гри', 10, canvasHeight - 40);
+            ctx.fillText('Джойстик: Ліва вісь - ліва гусениця, Права вісь - права гусениця', 10, canvasHeight - 20);
+        }
+
+        let lastTime = 0;
+        let fps = 0;
+        function gameLoop(currentTime) {
+            const deltaTime = currentTime - lastTime;
+            lastTime = currentTime;
+
+            fps = 1000 / deltaTime;
+
+            handleInput();
+            updateTractor();
+
+            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+
+            drawMud();
+            drawTrail();
+            drawObstacles();
+            drawTractor();
+            drawStatus();
+            drawInstructions();
+
+            ctx.font = '16px Arial';
+            ctx.fillStyle = 'white';
+            ctx.fillText(`FPS: ${fps.toFixed(2)}`, 10, 90);
+
+            frameCount++;
+            requestAnimationFrame(gameLoop);
+        }
+
+        let gamepad = null;
+
+        function updateGamepadState() {
+            const gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+            gamepad = gamepads[0];
+        }
+
+        function handleGamepadInput() {
+            if (!gamepad) return;
+
+            if (!gamepad.buttons[5].pressed) {
+                lMut = false;
+            }
+            if (!gamepad.buttons[4].pressed) {
+                rMut = false;
+            }
+
+            const leftAxisY = gamepad.axes[3];
+            const rightAxisY = gamepad.axes[1];
+
+            const deadzone = 0.1;
+
+            if (Math.abs(leftAxisY) > deadzone) {
+                if (leftAxisY < 0) {
+                    tractor.leftTrack = Math.min(tractor.leftTrack - leftAxisY * tractor.acceleration, tractor.speed);
+                    tractor.leftBrake = false;
+                } else {
+                    tractor.leftTrack = Math.max(tractor.leftTrack - tractor.braking, 0);
+                    tractor.leftBrake = true;
+                }
+            } else {
+                tractor.leftTrack = 0;
+                tractor.leftBrake = false;
+            }
+
+            if (Math.abs(rightAxisY) > deadzone) {
+                if (rightAxisY < 0) {
+                    tractor.rightTrack = Math.min(tractor.rightTrack - rightAxisY * tractor.acceleration, tractor.speed);
+                    tractor.rightBrake = false;
+                } else {
+                    tractor.rightTrack = Math.max(tractor.rightTrack - tractor.braking, 0);
+                    tractor.rightBrake = true;
+                }
+            } else {
+                tractor.rightTrack = 0;
+                tractor.rightBrake = false;
+            }
+
+            if (gamepad.buttons[9].pressed) {
+                initGame();
+            }
+
+            if (gamepad.buttons[5].pressed && !lMut) {
+                tractor.leftReverse = !tractor.leftReverse;
+                tractor.leftTrack = 0;
+                lMut = true;
+            }
+            if (gamepad.buttons[4].pressed && !rMut) {
+                tractor.rightReverse = !tractor.rightReverse;
+                tractor.rightTrack = 0;
+                rMut = true;
+            }
+        }
+
+        window.addEventListener("gamepadconnected", function(e) {
+            console.log("Gamepad connected:", e.gamepad.id);
+            gamepad = e.gamepad;
+        });
+
+        window.addEventListener("gamepaddisconnected", function(e) {
+            console.log("Gamepad disconnected:", e.gamepad.id);
+            gamepad = null;
+        });
+
+        requestAnimationFrame(gameLoop);
+
+        setInterval(updateGamepadState, 100);
+    </script>
+</body>
+</html>
