From 6640185d5446a55456266c4f851c81a15f397dbe Mon Sep 17 00:00:00 2001 From: Huseyin Kaya Aydin Date: Wed, 3 Apr 2024 12:24:10 +0200 Subject: [PATCH] a --- frontend/index.html | 5 + frontend/js/player3d1.js | 75 +++++++++++++ frontend/js/playerai1.js | 200 ++++++++++++++++++++++++++++++++++ frontend/js/playersremote2.js | 200 ++++++++++++++++++++++++++++++++++ frontend/js/pongehab.js | 170 +++++++++++++++++++++++++++++ frontend/js/ponggame.js | 162 +++++++++++++++++++++++++++ frontend/js/router.js | 13 ++- frontend/views/playerai1.html | 8 +- frontend/views/ponggame.html | 6 +- 9 files changed, 832 insertions(+), 7 deletions(-) create mode 100644 frontend/js/player3d1.js create mode 100644 frontend/js/playerai1.js create mode 100644 frontend/js/playersremote2.js create mode 100644 frontend/js/pongehab.js create mode 100644 frontend/js/ponggame.js diff --git a/frontend/index.html b/frontend/index.html index 50851b5..7256b76 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -34,6 +34,11 @@ + + + + + diff --git a/frontend/js/player3d1.js b/frontend/js/player3d1.js new file mode 100644 index 0000000..a3dc00e --- /dev/null +++ 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(); + }; \ No newline at end of file diff --git a/frontend/js/playerai1.js b/frontend/js/playerai1.js new file mode 100644 index 0000000..8b958f3 --- /dev/null +++ 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(); + }; \ No newline at end of file diff --git a/frontend/js/playersremote2.js b/frontend/js/playersremote2.js new file mode 100644 index 0000000..6bd3b08 --- /dev/null +++ b/frontend/js/playersremote2.js @@ -0,0 +1,200 @@ +function showPlayersRemote2(){ + console.log("pong remote2 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(); + }; \ No newline at end of file diff --git a/frontend/js/pongehab.js b/frontend/js/pongehab.js new file mode 100644 index 0000000..468b6cd --- /dev/null +++ b/frontend/js/pongehab.js @@ -0,0 +1,170 @@ +function showPongEhabPage(){ +console.log("pong ehab page"); +const canvas = document.getElementById('pongEhabGameCanvas'); // Aktualisierte ID +const ctx = canvas.getContext('2d'); +canvas.width = 800; +canvas.height = 400; + +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" +}; + +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.y -= 20; break; + case 's': player1.y += 20; break; + case 'ArrowUp': player2.y -= 20; break; + case 'ArrowDown': player2.y += 20; break; + } +}); + +function drawBall() { + ctx.fillStyle = ball.color; + ctx.beginPath(); + ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, false); + ctx.closePath(); + ctx.fill(); +} + +function drawPlayer(player) { + ctx.fillStyle = player.color; + ctx.fillRect(player.x, player.y, player.width, player.height); +} + +function resetBall() { + ball.x = canvas.width / 2; + ball.y = canvas.height / 2; + ball.velocityX = -ball.velocityX; + ball.speed = 7; +} + +function collisionDetection(ball, player) { + if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) { + if (ball.y > player.y && ball.y < player.y + player.height) { + ball.velocityX = -ball.velocityX; + } else { + if (ball.x - ball.radius < 0) player2.score++; + else player1.score++; + + if (player1.score === 7 || player2.score === 7) { + gameOver = true; + winner = player1.score === 7 ? 'Player 1' : 'Player 2'; + generateConfetti(); + } + + resetBall(); + } + } +} + +function update() { + if (!gameOver) { + ball.x += ball.velocityX; + ball.y += ball.velocityY; + + if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) { + ball.velocityY = -ball.velocityY; + } + + collisionDetection(ball, player1); + collisionDetection(ball, player2); + } +} + +function render() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + drawBall(); + drawPlayer(player1); + drawPlayer(player2); +} + +/* function gameLoop() { + update(); + render(); + if (!gameOver) requestAnimationFrame(gameLoop); +} */ + +function gameLoop() { + if (!gameOver) { + update(); + render(); + requestAnimationFrame(gameLoop); + } else { + showGameOverModal(); + } +} +function showGameOverModal() { + const gameOverModal = document.getElementById('pongEhabGameOverModal'); + gameOverModal.classList.remove('pongEhab-hidden'); + const winnerText = document.getElementById('pongEhabWinnerText'); + winnerText.textContent = winner; +} + +gameLoop(); + +// Konfetti-Effekt +function generateConfetti() { + const confettiCount = 100; + const confetti = []; + for (let i = 0; i < confettiCount; i++) { + confetti.push({ + x: Math.random() * canvas.width, + y: Math.random() * canvas.height, + width: 5, + height: 10, + color: `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`, + speed: 1 + Math.random() * 3, + }); + } + + function drawConfetti() { + confetti.forEach(particle => { + ctx.fillStyle = particle.color; + ctx.fillRect(particle.x, particle.y, particle.width, particle.height); + particle.y += particle.speed; + if (particle.y > canvas.height) { + particle.y = 0; + particle.x = Math.random() * canvas.width; + } + }); + } + + function updateConfetti() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + drawConfetti(); + if (gameOver) { + requestAnimationFrame(updateConfetti); + //window.location.href ="/#play!" ; + } + } + + updateConfetti(); +} +}; \ No newline at end of file diff --git a/frontend/js/ponggame.js b/frontend/js/ponggame.js new file mode 100644 index 0000000..b4bccc6 --- /dev/null +++ b/frontend/js/ponggame.js @@ -0,0 +1,162 @@ +function showPongGamePage(){ + console.log("pong game page"); + const canvas = document.getElementById('pongGameCanvas'); + const ctx = canvas.getContext('2d'); + canvas.width = 800; // Festgelegte Breite für das Canvas + canvas.height = 400; // Festgelegte Höhe für das Canvas + + 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" + }; + + 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.y -= 20; break; + case 's': player1.y += 20; break; + case 'ArrowUp': player2.y -= 20; break; + case 'ArrowDown': player2.y += 20; break; + } + }); + + function drawRect(x, y, width, height, color) { + ctx.fillStyle = color; + ctx.fillRect(x, y, width, height); + } + + function drawCircle(x, y, radius, color) { + ctx.fillStyle = color; + ctx.beginPath(); + ctx.arc(x, y, radius, 0, Math.PI*2, false); + ctx.closePath(); + ctx.fill(); + } + + function drawText(text, x, y, color = '#FFF') { + ctx.fillStyle = color; + ctx.font = '50px Arial'; + ctx.fillText(text, x, y); + } + + function resetBall() { + ball.x = canvas.width / 2; + ball.y = canvas.height / 2; + ball.velocityX = -ball.velocityX; + ball.speed = 7; + } + + function collisionDetection(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; + } + + function update() { + ball.x += ball.velocityX; + ball.y += ball.velocityY; + + if(ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) { + ball.velocityY = -ball.velocityY; + } + + let player = (ball.x < canvas.width / 2) ? player1 : player2; + + if(collisionDetection(ball, player)) { + ball.velocityX = -ball.velocityX; + } + + if(ball.x - ball.radius < 0) { + player2.score++; + resetBall(); + } else if(ball.x + ball.radius > canvas.width) { + player1.score++; + resetBall(); + } + + if(player1.score === 7 || player2.score === 7) { + gameOver = true; + winner = player1.score === 7 ? 'Player 1' : 'Player 2'; + } + } + + function render() { + // Hintergrund + drawRect(0, 0, canvas.width, canvas.height, '#000'); + + // Mittellinie + drawRect(canvas.width/2 - 2, 0, 4, canvas.height, '#FFF'); + + // Ball zeichnen + drawCircle(ball.x, ball.y, ball.radius, ball.color); + + // Spieler zeichnen + drawRect(player1.x, player1.y, player1.width, player1.height, player1.color); + drawRect(player2.x, player2.y, player2.width, player2.height, player2.color); + + // Punktestand + drawText(player1.score, canvas.width / 4, 50); + drawText(player2.score, 3 * canvas.width / 4, 50); + } + + function gameLoop() { + if(!gameOver) { + update(); + render(); + requestAnimationFrame(gameLoop); + } else { + showGameOverModal(); + } + } + + function showGameOverModal() { + const gameOverModal = document.querySelector('.game-over-modal'); + gameOverModal.style.display = 'block'; // Zeige das Modal + const winnerName = document.getElementById('winner-name'); + winnerName.textContent = winner; // Setze den Gewinner-Namen + } + /* + function showGameOverModal() { + const gameOverModal = document.getElementById('pongGameOverModal'); // Verwende die eindeutige ID + gameOverModal.classList.remove('hidden'); // Zeige das Modal + const winnerName = document.getElementById('pongWinnerName'); // Verwende die eindeutige ID + winnerName.textContent = winner; // Setze den Gewinner-Namen +} + */ + + + gameLoop(); + }; \ No newline at end of file diff --git a/frontend/js/router.js b/frontend/js/router.js index 62ea342..4c075a7 100644 --- a/frontend/js/router.js +++ b/frontend/js/router.js @@ -148,10 +148,19 @@ const handleLocation = async () => { openChat(); break; case "#pongehab": - + showPongEhabPage(); break; case "#ponggame": - + showPongGamePage(); + break; + case "#playersremote2": + showPlayersRemote2(); + break; + case "#playerai1": + showPlayerAi1Page(); + break; + case "#player3d1": + showPlayer3d1Page(); break; case "#aboutus": showAboutUsPage(); diff --git a/frontend/views/playerai1.html b/frontend/views/playerai1.html index 8648a38..d382d90 100644 --- a/frontend/views/playerai1.html +++ b/frontend/views/playerai1.html @@ -1,5 +1,5 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/frontend/views/ponggame.html b/frontend/views/ponggame.html index 865e670..0b030b9 100644 --- a/frontend/views/ponggame.html +++ b/frontend/views/ponggame.html @@ -1 +1,5 @@ -
\ No newline at end of file + + \ No newline at end of file