Neu: Blue Archive Memory

2025-02-27 19:48:19 +01:00
parent 62227ad83c
commit 02942215cd
67 changed files with 230 additions and 0 deletions
--- a/ba_memory/cards/1.png
+++ b/ba_memory/cards/1.png
--- a/ba_memory/cards/10.png
+++ b/ba_memory/cards/10.png
--- a/ba_memory/cards/11.png
+++ b/ba_memory/cards/11.png
--- a/ba_memory/cards/12.png
+++ b/ba_memory/cards/12.png
--- a/ba_memory/cards/13.png
+++ b/ba_memory/cards/13.png
--- a/ba_memory/cards/14.png
+++ b/ba_memory/cards/14.png
--- a/ba_memory/cards/15.png
+++ b/ba_memory/cards/15.png
--- a/ba_memory/cards/16.png
+++ b/ba_memory/cards/16.png
--- a/ba_memory/cards/17.png
+++ b/ba_memory/cards/17.png
--- a/ba_memory/cards/18.png
+++ b/ba_memory/cards/18.png
--- a/ba_memory/cards/19.png
+++ b/ba_memory/cards/19.png
--- a/ba_memory/cards/2.png
+++ b/ba_memory/cards/2.png
--- a/ba_memory/cards/20.png
+++ b/ba_memory/cards/20.png
--- a/ba_memory/cards/21.png
+++ b/ba_memory/cards/21.png
--- a/ba_memory/cards/22.png
+++ b/ba_memory/cards/22.png
--- a/ba_memory/cards/23.png
+++ b/ba_memory/cards/23.png
--- a/ba_memory/cards/24.png
+++ b/ba_memory/cards/24.png
--- a/ba_memory/cards/25.png
+++ b/ba_memory/cards/25.png
--- a/ba_memory/cards/26.png
+++ b/ba_memory/cards/26.png
--- a/ba_memory/cards/27.png
+++ b/ba_memory/cards/27.png
--- a/ba_memory/cards/28.png
+++ b/ba_memory/cards/28.png
--- a/ba_memory/cards/29.png
+++ b/ba_memory/cards/29.png
--- a/ba_memory/cards/3.png
+++ b/ba_memory/cards/3.png
--- a/ba_memory/cards/30.png
+++ b/ba_memory/cards/30.png
--- a/ba_memory/cards/31.png
+++ b/ba_memory/cards/31.png
--- a/ba_memory/cards/32.png
+++ b/ba_memory/cards/32.png
--- a/ba_memory/cards/4.png
+++ b/ba_memory/cards/4.png
--- a/ba_memory/cards/5.png
+++ b/ba_memory/cards/5.png
--- a/ba_memory/cards/6.png
+++ b/ba_memory/cards/6.png
--- a/ba_memory/cards/7.png
+++ b/ba_memory/cards/7.png
--- a/ba_memory/cards/8.png
+++ b/ba_memory/cards/8.png
--- a/ba_memory/cards/9.png
+++ b/ba_memory/cards/9.png
--- a/ba_memory/cards/A.png
+++ b/ba_memory/cards/A.png
--- a/ba_memory/cards/AA.png
+++ b/ba_memory/cards/AA.png
--- a/ba_memory/cards/B.png
+++ b/ba_memory/cards/B.png
--- a/ba_memory/cards/BB.png
+++ b/ba_memory/cards/BB.png
--- a/ba_memory/cards/C.png
+++ b/ba_memory/cards/C.png
--- a/ba_memory/cards/CC.png
+++ b/ba_memory/cards/CC.png
--- a/ba_memory/cards/D.png
+++ b/ba_memory/cards/D.png
--- a/ba_memory/cards/DD.png
+++ b/ba_memory/cards/DD.png
--- a/ba_memory/cards/E.png
+++ b/ba_memory/cards/E.png
--- a/ba_memory/cards/EE.png
+++ b/ba_memory/cards/EE.png
--- a/ba_memory/cards/F.png
+++ b/ba_memory/cards/F.png
--- a/ba_memory/cards/FF.png
+++ b/ba_memory/cards/FF.png
--- a/ba_memory/cards/G.png
+++ b/ba_memory/cards/G.png
--- a/ba_memory/cards/H.png
+++ b/ba_memory/cards/H.png
--- a/ba_memory/cards/I.png
+++ b/ba_memory/cards/I.png
--- a/ba_memory/cards/J.png
+++ b/ba_memory/cards/J.png
--- a/ba_memory/cards/K.png
+++ b/ba_memory/cards/K.png
--- a/ba_memory/cards/L.png
+++ b/ba_memory/cards/L.png
--- a/ba_memory/cards/M.png
+++ b/ba_memory/cards/M.png
--- a/ba_memory/cards/N.png
+++ b/ba_memory/cards/N.png
--- a/ba_memory/cards/O.png
+++ b/ba_memory/cards/O.png
--- a/ba_memory/cards/P.png
+++ b/ba_memory/cards/P.png
--- a/ba_memory/cards/Q.png
+++ b/ba_memory/cards/Q.png
--- a/ba_memory/cards/R.png
+++ b/ba_memory/cards/R.png
--- a/ba_memory/cards/S.png
+++ b/ba_memory/cards/S.png
--- a/ba_memory/cards/T.png
+++ b/ba_memory/cards/T.png
--- a/ba_memory/cards/U.png
+++ b/ba_memory/cards/U.png
--- a/ba_memory/cards/V.png
+++ b/ba_memory/cards/V.png
--- a/ba_memory/cards/W.png
+++ b/ba_memory/cards/W.png
--- a/ba_memory/cards/X.png
+++ b/ba_memory/cards/X.png
--- a/ba_memory/cards/Y.png
+++ b/ba_memory/cards/Y.png
--- a/ba_memory/cards/Z.png
+++ b/ba_memory/cards/Z.png
--- a/ba_memory/cards/back.png
+++ b/ba_memory/cards/back.png
--- a/ba_memory/index.html
+++ b/ba_memory/index.html
@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Blue Archive Memory (8×8)</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
+    <style>
+        body {
+            margin: 0;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background: #f0f4f8;
+            font-family: 'Arial', sans-serif;
+        }
+
+        #game-container {
+            margin-top: 2rem;
+            text-align: center;
+        }
+
+        .button-container {
+            margin: 20px 0;
+            display: flex;
+            gap: 10px;
+        }
+
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            border: none;
+            border-radius: 5px;
+            background: #4CAF50;
+            color: white;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+
+        button:hover {
+            background: #45a049;
+        }
+
+        #timer {
+            font-size: 24px;
+            color: #2c3e50;
+            margin: 10px 0;
+        }
+
+        canvas {
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            border-radius: 10px;
+        }
+         footer {
+            margin-top: 2rem;
+            padding: 1rem 0;
+            color: #666;
+            font-size: 0.9rem;
+            text-align: center;
+            border-top: 1px solid #ddd;
+            width: 100%;
+        }
+
+        footer a {
+            color: #4CAF50;
+            text-decoration: none;
+            transition: color 0.3s;
+        }
+
+        footer a:hover {
+            color: #45a049;
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="timer">⏱️ Vergangene Zeit: 0 Minuten 00 Sekunden</div>
+        <div id="canvas-container"></div>
+        <div class="button-container">
+            <button onclick="initializeGame()">🔄 Neustart</button>
+            <button onclick="takeScreenshot()">📸 Screenshot</button>
+        </div>
+    </div>
+
+    <script>
+        let rows = 8, cols = 8;
+        let cardSize = 80;
+        let cards = [];
+        let flippedCards = [];
+        let matchedPairs = 0;
+        let images = {};
+        let pairs = [
+            ["1.png", "A.png"], ["2.png", "B.png"], ["3.png", "C.png"], ["4.png", "D.png"],
+            ["5.png", "E.png"], ["6.png", "F.png"], ["7.png", "G.png"], ["8.png", "H.png"],
+            ["9.png", "I.png"], ["10.png", "J.png"], ["11.png", "K.png"], ["12.png", "L.png"],
+            ["13.png", "M.png"], ["14.png", "N.png"], ["15.png", "O.png"], ["16.png", "P.png"],
+            ["17.png", "Q.png"], ["18.png", "R.png"], ["19.png", "S.png"], ["20.png", "T.png"],
+            ["21.png", "U.png"], ["22.png", "V.png"], ["23.png", "W.png"], ["24.png", "X.png"],
+            ["25.png", "Y.png"], ["26.png", "Z.png"], ["27.png", "AA.png"], ["28.png", "BB.png"],
+            ["29.png", "CC.png"], ["30.png", "DD.png"], ["31.png", "EE.png"], ["32.png", "FF.png"]
+        ];
+        let startTime, clearTime, gameOver;
+
+        function preload() {
+            images["back"] = loadImage("cards/back.png");
+            for (let pair of pairs) {
+                images[pair[0]] = loadImage("cards/" + pair[0]);
+                images[pair[1]] = loadImage("cards/" + pair[1]);
+            }
+        }
+
+        function setup() {
+            let canvas = createCanvas(cols * cardSize, rows * cardSize);
+            canvas.parent('canvas-container');
+            initializeGame();
+        }
+
+        function initializeGame() {
+            cards = [];
+            flippedCards = [];
+            matchedPairs = 0;
+            gameOver = false;
+            
+            let tempCards = [];
+            for (let pair of pairs) {
+                tempCards.push({ id: pair[0], img: images[pair[0]], pair: pair[1] });
+                tempCards.push({ id: pair[1], img: images[pair[1]], pair: pair[0] });
+            }
+            shuffle(tempCards, true);
+            
+            for (let i = 0; i < rows; i++) {
+                for (let j = 0; j < cols; j++) {
+                    let index = i * cols + j;
+                    cards.push({
+                        x: j * cardSize,
+                        y: i * cardSize,
+                        ...tempCards[index],
+                        flipped: false,
+                        matched: false
+                    });
+                }
+            }
+
+            startTime = millis();
+            select('#timer').html(`⏱️ Vergangene Zeit: ${formatTime(0)}`);
+        }
+
+        function draw() {
+            background(255);
+            for (let card of cards) {
+                if (card.flipped || card.matched) {
+                    image(card.img, card.x, card.y, cardSize, cardSize);
+                } else {
+                    image(images["back"], card.x, card.y, cardSize, cardSize);
+                }
+            }
+
+            if (!gameOver) {
+                select('#timer').html(`⏱️ Vergangene Zeit: ${formatTime(millis() - startTime)}`);
+            }
+        }
+
+        function mousePressed() {
+            if (flippedCards.length >= 2 || gameOver) return;
+
+            for (let card of cards) {
+                if (!card.flipped && !card.matched && 
+                    mouseX > card.x && mouseX < card.x + cardSize &&
+                    mouseY > card.y && mouseY < card.y + cardSize) {
+                    card.flipped = true;
+                    flippedCards.push(card);
+                    
+                    if (flippedCards.length === 2) {
+                        setTimeout(checkMatch, 1000);
+                    }
+                    break;
+                }
+            }
+        }
+
+        function checkMatch() {
+            let [card1, card2] = flippedCards;
+            if (card1.pair === card2.id) {
+                card1.matched = true;
+                card2.matched = true;
+                matchedPairs++;
+                if (matchedPairs === pairs.length) {
+                    clearTime = millis() - startTime;
+                    select('#timer').html(`🎉 Gewonnen! Zeit: ${formatTime(clearTime)}`);
+                    gameOver = true;
+                }
+            } else {
+                card1.flipped = false;
+                card2.flipped = false;
+            }
+            flippedCards = [];
+        }
+
+        function takeScreenshot() {
+            let filename = `memory_${new Date().toISOString().slice(0,10)}.png`;
+            saveCanvas(filename, 'png');
+        }
+
+        function formatTime(ms) {
+            let totalSeconds = Math.floor(ms / 1000);
+            let minutes = Math.floor(totalSeconds / 60);
+            let seconds = totalSeconds % 60;
+            return `${minutes} Minuten ${seconds.toString().padStart(2, '0')} Sekunden`;
+        }
+    </script>
+    <footer>
+        <p>Basierend auf einem Projekt von 
+            <a href="https://github.com/lia-2025/memory-game-ex" target="_blank" rel="noopener noreferrer">
+                Lia-2025
+            </a>
+        </p>
+        <p>&copy; <span id="current-year"></span> - Übersetzt & überarbeitet von Akamaru</p>
+    </footer>
+
+    <script>
+        document.getElementById('current-year').textContent = new Date().getFullYear();
+    </script>
+</body>
+</html>
--- a/index.html
+++ b/index.html
@ -98,6 +98,10 @@
            <h2 class="tool-title">Dogify</h2>
            <p class="tool-description">Wow such doge many fun (In Arbeit)</p>
        </a>
+        <a href="https://tools.ponywave.de/ba_memory" class="tool-bubble">
+            <h2 class="tool-title">Blue Archive Memory</h2>
+            <p class="tool-description">Memory-Spiel mit Blue Archive Charactere</p>
+        </a>
        <a href="https://tools.ponywave.de/emoji" class="tool-bubble">
            <h2 class="tool-title">Emoji Rain</h2>
            <p class="tool-description">Lass es Emoji regnen!</p>