{"id":20077,"date":"2024-11-03T17:47:16","date_gmt":"2024-11-03T17:47:16","guid":{"rendered":"https:\/\/anderskisling.dk\/?page_id=20077"},"modified":"2025-05-30T15:07:17","modified_gmt":"2025-05-30T15:07:17","slug":"xo","status":"publish","type":"page","link":"https:\/\/anderskisling.dk\/index.php\/xo\/","title":{"rendered":"xo"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"20077\" class=\"elementor elementor-20077\">\n\t\t\t\t<div class=\"elementor-element elementor-element-50526e3 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"50526e3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1ec19e elementor-widget elementor-widget-spacer\" data-id=\"a1ec19e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ee21cc elementor-widget elementor-widget-heading\" data-id=\"4ee21cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Kryds &amp; Bolle<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ef231b0 elementor-widget elementor-widget-html\" data-id=\"3ef231b0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"tic-tac-toe\">\n    <div class=\"scoreboard\">\n        <div class=\"player-score\">MIG: <span id=\"playerScore\">0<\/span><\/div>\n        <div class=\"computer-score\">Computer: <span id=\"computerScore\">0<\/span><\/div>\n        <div class=\"tie-score\">Uafgjort: <span id=\"tieScore\">0<\/span><\/div>\n        <div class=\"round\">Runde: <span id=\"currentRound\">1<\/span>\/20<\/div>\n    <\/div>\n    <div class=\"message\" id=\"gameMessage\"><\/div>\n    <div class=\"board\">\n        <div class=\"cell\" data-index=\"0\"><\/div>\n        <div class=\"cell\" data-index=\"1\"><\/div>\n        <div class=\"cell\" data-index=\"2\"><\/div>\n        <div class=\"cell\" data-index=\"3\"><\/div>\n        <div class=\"cell\" data-index=\"4\"><\/div>\n        <div class=\"cell\" data-index=\"5\"><\/div>\n        <div class=\"cell\" data-index=\"6\"><\/div>\n        <div class=\"cell\" data-index=\"7\"><\/div>\n        <div class=\"cell\" data-index=\"8\"><\/div>\n    <\/div>\n<\/div>\n\n<style>\n.tic-tac-toe {\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    min-height: 700px;\n}\n\n.scoreboard {\n    margin-bottom: 20px;\n}\n\n.player-score {\n    color: #3498db;\n    font-family: 'orbitron', sans-serif;\n    text-transform: uppercase;\n    font-size: 1.4em;\n    font-weight: bold;\n    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);\n    margin: 5px 0;\n}\n\n.computer-score {\n    color: #e74c3c;\n    font-family: 'orbitron', sans-serif;\n    text-transform: uppercase;\n    font-size: 1.4em;\n     font-weight: bold;\n    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);\n    margin: 5px 0;\n}\n\n.tie-score {\n    color: #2ecc71;\n    font-family: 'orbitron', sans-serif;\n    text-transform: uppercase;\n    font-size: 1.4em;\n     font-weight: bold;\n    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);\n    margin: 5px 0;\n}\n\n.round {\n    color: #f39c12;\n    font-family: 'orbitron', sans-serif;\n    text-transform: uppercase;\n    font-size: 1.4em;\n    font-weight: normal;\n    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);\n    margin: 5px 0;\n}\n\n.message {\n    font-size: 50px;\n    font-weight: bold;\n    color: #000000;\n    font-family: 'orbitron', sans-serif;\n    text-transform: uppercase;\n    position: absolute;\n    top: 50%;\n    width: 100%;\n    text-align: center;\n    opacity: 0;\n    z-index: 9999;\n    transition: opacity 2s ease-in-out;\n}\n\n.board {\n    display: grid;\n    grid-template-columns: repeat(3, 100px);\n    gap: 5px;\n    margin: 5px auto;\n}\n\n.cell {\n    width: 100px;\n    height: 100px;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    user-select: none;\n}\n\n.cell::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-image: url(\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2025\/05\/celle8.png\");\n    background-size: cover;\n    background-position: center;\n    z-index: 1;\n}\n\n.cell.X::after {\n    content: \"\";\n    position: absolute;\n    top: 10%;\n    left: 10%;\n    width: 80%;\n    height: 80%;\n    background-image: url(\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2025\/05\/kryds20.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n    background-position: center;\n    z-index: 2;\n}\n\n.cell.O::after {\n    content: \"\";\n    position: absolute;\n    top: 10%;\n    left: 10%;\n    width: 80%;\n    height: 80%;\n    background-image: url(\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2025\/05\/bolle20.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n    background-position: center;\n    z-index: 2;\n}\n\n\/* Justerbar vinder animation *\/\n@keyframes highlight-winner {\n    0%, 100% { background-color: transparent; }\n    50% { background-color: #FF02908A; opacity: 1.0; }\n}\n\n.winner-cell {\n    animation: highlight-winner var(--highlight-duration, 0.6s) ease-in-out var(--highlight-iterations, 1);\n     border-radius: 12px;\n}\n\/* Glow-effekt *\/\n.glow-message {\n    text-shadow: 0 0 0px white, 0 0 2px yellow, 0 0 50px yellow;\n    color: #ffc400;\n    opacity: 0; \/* Start usynlig for fade-in *\/\n    transition: opacity 0.5s ease, text-shadow 0.5s ease;\n}\n\n\/* Klasse til fade-in *\/\n.show-glow {\n    opacity: 1; \/* Skruer op for synligheden *\/\n}\n\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n    const cells = document.querySelectorAll(\".cell\");\n    const gameMessage = document.getElementById(\"gameMessage\");\n    const playerScoreElem = document.getElementById(\"playerScore\");\n    const computerScoreElem = document.getElementById(\"computerScore\");\n    const tieScoreElem = document.getElementById(\"tieScore\");\n    const currentRoundElem = document.getElementById(\"currentRound\");\n    const audio = new Audio(\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/11\/vinderlyd3.mp3\");\n\n    let board = Array(9).fill(null);\n    let playerTurn = \"X\";\n    let lastWinner = null;\n    let playerScore = 0;\n    let computerScore = 0;\n    let tieScore = 0;\n    let round = 1;\n    const maxRounds = 20;\n    let computerStartsNextRound = false; \n\n    const winConditions = [\n        [0, 1, 2], [3, 4, 5], [6, 7, 8],\n        [0, 3, 6], [1, 4, 7], [2, 5, 8],\n        [0, 4, 8], [2, 4, 6]\n    ];\n\n    function checkWinner() {\n        for (const condition of winConditions) {\n            const [a, b, c] = condition;\n            if (board[a] && board[a] === board[b] && board[a] === board[c]) {\n                highlightWinnerCells(condition);\n                return board[a];\n            }\n        }\n        return board.includes(null) ? null : \"Tie\";\n    }\n\n    function highlightWinnerCells(cells) {\n        cells.forEach((index, i) => {\n            setTimeout(() => {\n                document.querySelector(`.cell[data-index=\"${index}\"]`).classList.add(\"winner-cell\");\n            }, i * 200);\n        });\n        audio.play();\n        audio.onended = () => {\n            updateScores();\n        };\n    }\n\n    function findBestMove() {\n        for (const condition of winConditions) {\n            const [a, b, c] = condition;\n            if (board[a] === \"O\" && board[b] === \"O\" && !board[c]) return c;\n            if (board[a] === \"O\" && board[c] === \"O\" && !board[b]) return b;\n            if (board[b] === \"O\" && board[c] === \"O\" && !board[a]) return a;\n        }\n        for (const condition of winConditions) {\n            const [a, b, c] = condition;\n            if (board[a] === \"X\" && board[b] === \"X\" && !board[c]) return c;\n            if (board[a] === \"X\" && board[c] === \"X\" && !board[b]) return b;\n            if (board[b] === \"X\" && board[c] === \"X\" && !board[a]) return a;\n        }\n\n        let emptyCells = board.map((val, idx) => val === null ? idx : null).filter(val => val !== null);\n        return emptyCells[Math.floor(Math.random() * emptyCells.length)];\n    }\n\nfunction displayMessage(message) {\n    gameMessage.textContent = message;\n    gameMessage.classList.add(\"glow-message\", \"show-glow\");  \/\/ Tilf\u00f8jer glow og fade-in\n    gameMessage.style.opacity = 1;\n\n    setTimeout(() => {\n        gameMessage.classList.remove(\"show-glow\"); \/\/ Fader ud efter kort tid\n    }, 1500); \/\/ Tid f\u00f8r fade-out begynder (juster denne tid, hvis n\u00f8dvendigt)\n\n    setTimeout(() => {\n        gameMessage.style.opacity = 0;\n    }, 2000); \/\/ Tid f\u00f8r beskeden bliver usynlig (matcher fade-out)\n}\n\n\n\n    function computerMove() {\n        const bestMove = findBestMove();\n        if (bestMove !== undefined) {\n            board[bestMove] = \"O\";\n            cells[bestMove].classList.add(\"O\");\n            let result = checkWinner();\n            if (result === \"O\") {\n                displayMessage(\">> Computeren vinder <<\");\n                computerScore++;\n                lastWinner = \"O\";\n            } else if (result === \"Tie\") {\n                displayMessage(\">> Uafgjort <<\");\n                tieScore++;\n                lastWinner = \"Tie\";\n                computerStartsNextRound = true; \/\/ Computeren starter n\u00e6ste runde\n                setTimeout(updateScores, 2000); \n            } else {\n                playerTurn = \"X\";\n            }\n        }\n    }\n\n    function handleCellClick(event) {\n        const index = parseInt(event.target.getAttribute(\"data-index\"));\n        if (!board[index] && playerTurn === \"X\") {\n            board[index] = \"X\";\n            event.target.classList.add(\"X\");\n            let result = checkWinner();\n            if (result === \"X\") {\n                displayMessage(\">> Du vinder <<\");\n                playerScore++;\n                lastWinner = \"X\";\n                computerStartsNextRound = false; \/\/ Spilleren starter n\u00e6ste runde\n            } else if (result === \"Tie\") {\n                displayMessage(\">> Uafgjort <<\");\n                tieScore++;\n                lastWinner = \"Tie\";\n                computerStartsNextRound = true; \/\/ Computeren starter n\u00e6ste runde\n                setTimeout(updateScores, 2000); \n            } else {\n                playerTurn = \"O\";\n                computerMove();\n            }\n        }\n    }\n\n    function updateScores() {\n        playerScoreElem.textContent = playerScore;\n        computerScoreElem.textContent = computerScore;\n        tieScoreElem.textContent = tieScore;\n        currentRoundElem.textContent = round;\n\n        if (round < maxRounds) {\n            round++;\n            resetGame();\n        } else {\n            declareWinner();\n        }\n    }\n\n    function declareWinner() {\n        let winner;\n        if (playerScore > computerScore) winner = \"Du vinder spillet!\";\n        else if (computerScore > playerScore) winner = \"Computeren vinder spillet!\";\n        else winner = \"Spillet er uafgjort!\";\n        displayMessage(winner);\n        setTimeout(() => resetGame(true), 4000);\n    }\n\n    function resetGame(fullReset = false) {\n    board = Array(9).fill(null);\n    cells.forEach(cell => cell.classList.remove(\"X\", \"O\", \"winner-cell\"));\n    gameMessage.textContent = \"\";\n    gameMessage.style.opacity = 0;\n    if (fullReset) {\n        playerScore = computerScore = tieScore = round = 0;\n        playerScoreElem.textContent = computerScoreElem.textContent = tieScoreElem.textContent = \"0\";\n        currentRoundElem.textContent = \"1\";\n        computerStartsNextRound = false; \/\/ S\u00f8rger for, at spilleren starter\n        playerTurn = \"X\"; \/\/ Spilleren starter forfra\n    } else if (round <= maxRounds) {\n        if (computerStartsNextRound) {\n            playerTurn = \"O\";\n            computerMove();\n        } else {\n            playerTurn = \"X\";\n        }\n    }\n}\n\n\n    cells.forEach(cell => cell.addEventListener(\"click\", handleCellClick));\n\n    if (lastWinner === \"O\") {\n        computerMove();\n    }\n});\n\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e80dbd5 elementor-widget elementor-widget-spacer\" data-id=\"e80dbd5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kryds &amp; Bolle MIG: 0 Computer: 0 Uafgjort: 0 Runde: 1\/20<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-20077","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/20077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/comments?post=20077"}],"version-history":[{"count":389,"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/20077\/revisions"}],"predecessor-version":[{"id":32523,"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/20077\/revisions\/32523"}],"wp:attachment":[{"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=20077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}