Boter-Kaas-en-Eieren<\/title>\n<style>\n body { \n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; \n display:flex; \n flex-direction:column; \n align-items:center; \n justify-content:center; \n height:100vh; \n margin:0; \n background: linear-gradient(135deg, #74ebd5 0%, #9face6 100%);\n color:#333;\n }\n h1 { \n margin-bottom:15px; \n font-size:2.2rem;\n color:#222;\n text-shadow:1px 1px 3px rgba(0,0,0,0.2);\n }\n #controls {\n margin-bottom:15px;\n }\n label, select {\n font-size:1rem;\n }\n #scoreboard {\n margin-bottom:20px;\n font-size:1.1rem;\n font-weight:bold;\n color:#222;\n background:white;\n padding:10px 20px;\n border-radius:8px;\n box-shadow:0 3px 10px rgba(0,0,0,0.15);\n }\n #board { \n display:grid; \n grid-template-columns:repeat(3,110px); \n grid-template-rows:repeat(3,110px); \n gap:10px; \n background:#333; \n padding:10px;\n border-radius:12px;\n box-shadow:0 4px 15px rgba(0,0,0,0.2);\n }\n .cell { \n width:110px; \n height:110px; \n background:white; \n display:flex; \n align-items:center; \n justify-content:center; \n font-size:3rem; \n font-weight:bold;\n cursor:pointer; \n border-radius:8px;\n transition: all 0.3s ease;\n }\n .cell:hover { \n background:#f0f0ff; \n transform:scale(1.05);\n }\n .cell.taken { cursor:default; }\n .cell.X { color:#e63946; text-shadow:1px 1px 5px rgba(230,57,70,0.3); }\n .cell.O { color:#457b9d; text-shadow:1px 1px 5px rgba(69,123,157,0.3); }\n #message { \n margin-top:20px; \n font-size:1.4rem; \n font-weight:bold;\n color:#222;\n }\n button { \n margin-top:20px; \n padding:10px 25px; \n font-size:1rem; \n border:none;\n border-radius:8px;\n background:#457b9d;\n color:white;\n font-weight:bold;\n cursor:pointer;\n transition: background 0.3s ease, transform 0.2s ease;\n box-shadow:0 3px 8px rgba(0,0,0,0.2);\n }\n button:hover { background:#1d3557; transform:scale(1.05); }\n<\/style>\n<\/head>\n<body>\n <h1>Boter-Kaas-en-Eieren<\/h1>\n <div id=\"controls\">\n <label for=\"difficulty\">Moeilijkheidsgraad: <\/label>\n <select id=\"difficulty\">\n <option value=\"easy\">Makkelijk<\/option>\n <option value=\"medium\">Gemiddeld<\/option>\n <option value=\"hard\">Moeilijk<\/option>\n <option value=\"impossible\">Onverslaanbaar<\/option>\n <\/select>\n <\/div>\n <div id=\"scoreboard\">\n Jij (X): <span id=\"playerScore\">0<\/span> | Computer (O): <span id=\"computerScore\">0<\/span> | Gelijkspel: <span id=\"draws\">0<\/span>\n <\/div>\n <div id=\"board\"><\/div>\n <div id=\"message\"><\/div>\n <button onclick=\"resetGame()\">Opnieuw<\/button>\n\n<audio id=\"placeSound\" src=\"https:\/\/actions.google.com\/sounds\/v1\/cartoon\/wood_plank_flicks.ogg\"><\/audio>\n<audio id=\"winSound\" src=\"https:\/\/actions.google.com\/sounds\/v1\/cartoon\/clang_and_wobble.ogg\"><\/audio>\n<audio id=\"drawSound\" src=\"https:\/\/actions.google.com\/sounds\/v1\/cartoon\/wood_plank_flicks.ogg\"><\/audio>\n\n<script>\nconst boardElement = document.getElementById('board');\nconst message = document.getElementById('message');\nconst difficultySelect = document.getElementById('difficulty');\nconst playerScoreElement = document.getElementById('playerScore');\nconst computerScoreElement = document.getElementById('computerScore');\nconst drawsElement = document.getElementById('draws');\n\nconst placeSound = document.getElementById('placeSound');\nconst winSound = document.getElementById('winSound');\nconst drawSound = document.getElementById('drawSound');\n\nlet board = Array(9).fill(null);\nlet currentPlayer = 'X';\nlet playerScore = 0;\nlet computerScore = 0;\nlet draws = 0;\n\nfunction createBoard(){\n boardElement.innerHTML = '';\n board.forEach((value, index) => {\n const cell = document.createElement('div');\n cell.classList.add('cell');\n cell.dataset.index = index;\n if(value){\n cell.textContent = value;\n cell.classList.add(value);\n }\n cell.addEventListener('click', () => makeMove(index, cell));\n boardElement.appendChild(cell);\n });\n}\n\nfunction makeMove(index, cell){\n if(board[index] || checkWinner()) return;\n board[index] = currentPlayer;\n cell.textContent = currentPlayer;\n cell.classList.add('taken', currentPlayer);\n placeSound.currentTime = 0;\n placeSound.play();\n\n if(checkWinner()){\n message.textContent = `${currentPlayer} wint!`;\n updateScore(currentPlayer);\n winSound.currentTime = 0;\n winSound.play();\n return;\n } else if(board.every(v => v)){\n message.textContent = 'Gelijkspel!';\n draws++;\n updateScoreboard();\n drawSound.currentTime = 0;\n drawSound.play();\n return;\n }\n\n currentPlayer = currentPlayer === 'X' ? 'O' : 'X';\n if(currentPlayer === 'O') computerMove();\n}\n\nfunction computerMove(){\n let emptyIndices = board.map((v,i) => v?null:i).filter(v=>v!==null);\n if(emptyIndices.length === 0) return;\n let index;\n const difficulty = difficultySelect.value;\n\n if(difficulty === 'easy'){\n index = emptyIndices[Math.floor(Math.random() * emptyIndices.length)];\n } else if(difficulty === 'medium'){\n if(Math.random() < 0.5) {\n index = bestMove();\n } else {\n index = emptyIndices[Math.floor(Math.random() * emptyIndices.length)];\n }\n } else if(difficulty === 'hard'){\n if(Math.random() < 0.2) {\n index = emptyIndices[Math.floor(Math.random() * emptyIndices.length)];\n } else {\n index = bestMove();\n }\n } else {\n index = bestMove();\n }\n\n const cell = boardElement.children[index];\n makeMove(index, cell);\n}\n\nfunction bestMove(){\n let bestScore = -Infinity;\n let move;\n for(let i=0; i<9; i++){\n if(!board[i]){\n board[i] = 'O';\n let score = minimax(board, 0, false);\n board[i] = null;\n if(score > bestScore){\n bestScore = score;\n move = i;\n }\n }\n }\n return move;\n}\n\nfunction minimax(boardState, depth, isMaximizing){\n let winner = checkWinnerReturn(boardState);\n if(winner === 'O') return 10 - depth;\n if(winner === 'X') return depth - 10;\n if(boardState.every(v => v)) return 0;\n\n if(isMaximizing){\n let bestScore = -Infinity;\n for(let i=0; i<9; i++){\n if(!boardState[i]){\n boardState[i] = 'O';\n let score = minimax(boardState, depth+1, false);\n boardState[i] = null;\n bestScore = Math.max(score, bestScore);\n }\n }\n return bestScore;\n } else {\n let bestScore = Infinity;\n for(let i=0; i<9; i++){\n if(!boardState[i]){\n boardState[i] = 'X';\n let score = minimax(boardState, depth+1, true);\n boardState[i] = null;\n bestScore = Math.min(score, bestScore);\n }\n }\n return bestScore;\n }\n}\n\nfunction checkWinner(){\n const winPatterns = [\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 return winPatterns.some(pattern => {\n const [a,b,c] = pattern;\n return board[a] && board[a] === board[b] && board[a] === board[c];\n });\n}\n\nfunction checkWinnerReturn(state){\n const winPatterns = [\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 for(const [a,b,c] of winPatterns){\n if(state[a] && state[a] === state[b] && state[a] === state[c]){\n return state[a];\n }\n }\n return null;\n}\n\nfunction updateScore(winner){\n if(winner === 'X'){\n playerScore++;\n } else if(winner === 'O'){\n computerScore++;\n }\n updateScoreboard();\n}\n\nfunction updateScoreboard(){\n playerScoreElement.textContent = playerScore;\n computerScoreElement.textContent = computerScore;\n drawsElement.textContent = draws;\n}\n\nfunction resetGame(){\n board = Array(9).fill(null);\n currentPlayer = 'X';\n message.textContent = '';\n createBoard();\n}\n\ncreateBoard();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8526b91 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8526b91\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-504dc35\" data-id=\"504dc35\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7253b97 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7253b97\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7994835\" data-id=\"7994835\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tijd voor ontspanning, doe een spelletje Boter-Kaas-en-Eieren Boter-Kaas-en-Eieren Moeilijkheidsgraad: MakkelijkGemiddeldMoeilijkOnverslaanbaar Jij (X): 0 | Computer (O): 0 | Gelijkspel: 0 Opnieuw<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-2804","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/pages\/2804","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/comments?post=2804"}],"version-history":[{"count":62,"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/pages\/2804\/revisions"}],"predecessor-version":[{"id":4941,"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/pages\/2804\/revisions\/4941"}],"wp:attachment":[{"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/media?parent=2804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}