a

hu8813 · Apr 3, 2024 · 6640185 · 6640185
1 parent 13361ab
commit 6640185
Show file tree

Hide file tree

Showing 9 changed files with 832 additions and 7 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -34,6 +34,11 @@
 <script src="./js/Leaderboard.js"></script>
 <script src="./js/Logout.js"></script>
 <script src="./js/AboutUs.js"></script>
+<script src="./js/pongehab.js"></script>
+<script src="./js/ponggame.js"></script>
+<script src="./js/player3d1.js"></script>
+<script src="./js/playerai1.js"></script>
+<script src="./js/playersremote2.js"></script>
 </head>
 <body>
 

diff --git a/frontend/js/player3d1.js b/frontend/js/player3d1.js
@@ -0,0 +1,75 @@
+function showPlayer3d1Page(){
+    console.log("pong 3d1 page");
+    let container;
+    let renderer, scene, camera;
+    let ball, paddle1, paddle2, mainLight;
+    let WIDTH = 700, HEIGHT = 500;
+    let FIELD_WIDTH = 1200, FIELD_LENGTH = 3000;
+
+    function init() {
+        container = document.getElementById('container');
+        scene = new THREE.Scene();
+        setupRenderer();
+        setupCamera();
+        addLights();
+        addObjects();
+        window.addEventListener('mousemove', handleMouseMove);
+        render();
+    }
+
+    function setupRenderer() {
+        renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(WIDTH, HEIGHT);
+        renderer.setClearColor(0x9999bb, 1);
+        container.appendChild(renderer.domElement);
+    }
+
+    function setupCamera() {
+        camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 10000);
+        camera.position.set(0, 100, FIELD_LENGTH / 2 + 500);
+        camera.lookAt(new THREE.Vector3(0, 0, 0));
+    }
+
+    function addLights() {
+        mainLight = new THREE.HemisphereLight(0xffffff, 0x003300);
+        scene.add(mainLight);
+    }
+
+    function addObjects() {
+        const fieldGeometry = new THREE.BoxGeometry(FIELD_WIDTH, 5, FIELD_LENGTH);
+        const fieldMaterial = new THREE.MeshLambertMaterial({ color: 0x003300 });
+        const field = new THREE.Mesh(fieldGeometry, fieldMaterial);
+        field.position.set(0, -50, 0);
+        scene.add(field);
+
+        paddle1 = addPaddle(FIELD_LENGTH / 2);
+        paddle2 = addPaddle(-FIELD_LENGTH / 2);
+
+        const ballGeometry = new THREE.SphereGeometry(20, 16, 16);
+        const ballMaterial = new THREE.MeshLambertMaterial({ color: 0xcc0000 });
+        ball = new THREE.Mesh(ballGeometry, ballMaterial);
+        scene.add(ball);
+    }
+
+    function addPaddle(zPosition) {
+        const paddleGeometry = new THREE.BoxGeometry(200, 30, 10);
+        const paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
+        const paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);
+        paddle.position.z = zPosition;
+        scene.add(paddle);
+        return paddle;
+    }
+
+    function handleMouseMove(event) {
+        var mouseX = (event.clientX / window.innerWidth) * 2 - 1;
+        paddle1.position.x = THREE.MathUtils.lerp(-FIELD_WIDTH / 2, FIELD_WIDTH / 2, mouseX + 0.5);
+    }
+
+    function render() {
+        requestAnimationFrame(render);
+        // Spiellogik-Updates hier einfügen
+        renderer.render(scene, camera);
+    }
+
+    init();
+    };
diff --git a/frontend/js/playerai1.js b/frontend/js/playerai1.js
@@ -0,0 +1,200 @@
+function showPlayerAi1Page(){
+    console.log("pong ai1 page");
+    const canvas = document.getElementById('playerAiCanvas'); // Aktualisierte ID
+    const ctx = canvas.getContext('2d');
+    canvas.width = window.innerWidth / 1.5;
+    canvas.height = window.innerHeight / 1.5;
+
+    let gameOver = false;
+    let winner = '';
+
+    let ball = {
+        x: canvas.width / 2,
+        y: canvas.height / 2,
+        radius: 10,
+        velocityX: 5,
+        velocityY: 5,
+        speed: 7,
+        color: "#FFF"
+    };
+
+    let player1 = {
+        x: 0,
+        y: (canvas.height - 100) / 2,
+        width: 10,
+        height: 100,
+        score: 0,
+        color: "#FFF",
+        moveUp: false,
+        moveDown: false
+    };
+
+    let player2 = {
+        x: canvas.width - 10,
+        y: (canvas.height - 100) / 2,
+        width: 10,
+        height: 100,
+        score: 0,
+        color: "#FFF"
+    };
+
+    document.addEventListener('keydown', function(event) {
+        switch(event.key) {
+            case 'w':
+                player1.moveUp = true;
+                break;
+            case 's':
+                player1.moveDown = true;
+                break;
+        }
+    });
+
+    document.addEventListener('keyup', function(event) {
+        switch(event.key) {
+            case 'w':
+                player1.moveUp = false;
+                break;
+            case 's':
+                player1.moveDown = false;
+                break;
+        }
+    });
+
+    const resetBall = () => {
+        if (player1.score === 7 || player2.score === 7) {
+            gameOver = true;
+            winner = player1.score === 7 ? 'Player 1' : 'Player 2';
+            alert(`${winner} wins!`); // Einfaches Gewinner-Popup
+            return;
+        }
+
+        ball.x = canvas.width / 2;
+        ball.y = canvas.height / 2;
+        ball.velocityX = -ball.velocityX;
+        ball.speed = 7;
+    };
+
+    const collision = (b, p) => {
+        b.top = b.y - b.radius;
+        b.bottom = b.y + b.radius;
+        b.left = b.x - b.radius;
+        b.right = b.x + b.radius;
+
+        p.top = p.y;
+        p.bottom = p.y + p.height;
+        p.left = p.x;
+        p.right = p.x + p.width;
+
+        return b.right > p.left && b.bottom > p.top && b.left < p.right && b.top < p.bottom;
+    };
+
+    const update = () => {
+        if(player1.moveUp && player1.y > 0) {
+            player1.y -= 8;
+        }
+        if(player1.moveDown && (player1.y + player1.height) < canvas.height) {
+            player1.y += 8;
+        }
+
+        // Einfache KI für Player 2
+        player2.y += ((ball.y - (player2.y + player2.height / 2))) * 0.1;
+
+        ball.x += ball.velocityX;
+        ball.y += ball.velocityY;
+
+        if(ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
+            ball.velocityY = -ball.velocityY;
+        }
+
+        if(ball.x - ball.radius < 0) {
+            player2.score++;
+            resetBall();
+        } else if(ball.x + ball.radius > canvas.width) {
+            player1.score++;
+            resetBall();
+        }
+
+        if(collision(ball, player1) || collision(ball, player2)) {
+            ball.velocityX = -ball.velocityX;
+        }
+    };
+
+    const drawRect = (x, y, w, h, color) => {
+        ctx.fillStyle = color;
+        ctx.fillRect(x, y, w, h);
+    };
+
+    const drawCircle = (x, y, r, color) => {
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(x, y, r, 0, Math.PI*2, true);
+        ctx.closePath();
+        ctx.fill();
+    };
+
+    const draw = () => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+        drawRect(0, 0, canvas.width, canvas.height, '#000'); // Background
+        drawRect(player1.x, player1.y, player1.width, player1.height, player1.color); // Player 1
+        drawRect(player2.x, player2.y, player2.width, player2.height, player2.color); // Player 2
+        drawCircle(ball.x, ball.y, ball.radius, ball.color); // Ball
+        ctx.font = '35px Arial';
+        ctx.fillStyle = '#FFF';
+        ctx.fillText(player1.score, 100, 50);
+        ctx.fillText(player2.score, canvas.width - 100, 50);
+    };
+
+    const gameLoop = () => {
+        if (!gameOver) {
+            update();
+            draw();
+            requestAnimationFrame(gameLoop);
+        } else {
+            showGameOverModal();
+        }
+    };
+
+    /* function showGameOverModal() {
+        const modal = document.getElementById('playerAiModal'); // Aktualisierte ID
+        modal.classList.remove('hidden');
+        const winnerText = document.getElementById('playerAiWinner'); // Aktualisierte ID
+        winnerText.textContent = `${winner} wins!`;
+        // Hinzufügen von EventListener zu "Neu starten"-Button...
+    } */
+    function showGameOverModal() {
+        const modal = document.getElementById('playerAiModal'); // Aktualisierte ID
+        modal.classList.remove('hidden');
+        const winnerText = document.getElementById('playerAiWinner'); // Aktualisierte ID
+        winnerText.textContent = `${winner} wins!`;
+
+        const restartButton = document.getElementById('playerAiRestart'); // "Neu starten"-Button
+        restartButton.onclick = function() {
+            modal.classList.add('hidden'); // Verstecke das Modal
+            resetGame(); // Rufe die Funktion zum Zurücksetzen des Spiels auf
+        };
+    }
+
+    function resetGame() {
+        // Setze die Spielvariablen zurück
+        ball.x = canvas.width / 2;
+        ball.y = canvas.height / 2;
+        ball.velocityX = 5; // oder jede andere Startgeschwindigkeit
+        ball.velocityY = 5; // oder jede andere Startgeschwindigkeit
+        ball.speed = 7;
+
+        player1.y = (canvas.height - 100) / 2; // Zurücksetzen der Position
+        player2.y = (canvas.height - 100) / 2; // Zurücksetzen der Position
+
+        player1.score = 0; // Zurücksetzen der Punktzahl
+        player2.score = 0; // Zurücksetzen der Punktzahl
+
+        gameOver = false; // Spielende zurücksetzen
+        winner = ''; // Gewinner zurücksetzen
+
+        // Starte das Spiel erneut
+        gameLoop();
+    }
+
+
+    gameLoop();
+    };