{"id":388,"date":"2024-07-12T20:02:02","date_gmt":"2024-07-12T23:02:02","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=388"},"modified":"2024-07-28T18:10:53","modified_gmt":"2024-07-28T21:10:53","slug":"criando-jogo-da-velha-javascript","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/","title":{"rendered":"Criando Jogo da Velha Javascript"},"content":{"rendered":"<h1>Criando Jogo da Velha Javascript estilo Neon.<\/h1>\n<hr \/>\n<figure id=\"attachment_382\" aria-describedby=\"caption-attachment-382\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-382 size-medium\" title=\"Criando Jogo da Velha Javascript\" src=\"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/07\/jogo-da-velha-300x286.jpg\" alt=\"Criando Jogo da Velha Javascript\" width=\"300\" height=\"286\" srcset=\"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/07\/jogo-da-velha-300x286.jpg 300w, https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/07\/jogo-da-velha.jpg 689w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-382\" class=\"wp-caption-text\">games Jogo da velha<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 12pt;\">Criando Jogo da Velha Javascript, neste tutorial mostro como criar um Jogo da Velha em Javascript no estilo Neon usando apenas\u00a0 html, CSS e Javascript, ser\u00e1 <\/span><span style=\"font-size: 12pt;\">um breve <a href=\"https:\/\/urutaudev.com.br\/index.php\/category\/tutorias\/\">tutorial<\/a> que mostro como construir e estilizar um jogo da velha usando html, css e <a href=\"https:\/\/urutaudev.com.br\/index.php\/category\/tutorias\/javascript\/\">javascript<\/a>.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h4>Segue abaixo o c\u00f3digo utilizado para criar a estrutura do Jogo da Velha:<\/h4>\n<div>\n<div>\n<pre>&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html lang=\"en\"&gt;\r\n\r\n&lt;head&gt;\r\n\r\n\u00a0 \u00a0 &lt;meta charset=\"UTF-8\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;title&gt;Jogo da Velha&lt;\/title&gt;\r\n\r\n\u00a0 \u00a0 &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n\u00a0 \u00a0 &lt;div class=\"container\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;h1&gt;Jogo da Velha&lt;\/h1&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"game-board\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"cell\" data-index=\"0\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"cell\" data-index=\"1\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"cell\" data-index=\"2\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"cell\" data-index=\"3\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"cell\" data-index=\"4\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"cell\" data-index=\"5\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"cell\" data-index=\"6\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"cell\" data-index=\"7\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"cell\" data-index=\"8\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"status\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;button class=\"reset-button\"&gt;Reiniciar&lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\r\n\r\n\r\n\u00a0 \u00a0 &lt;script src=\"script.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h4>Segue abaixo o c\u00f3digo utilizado para estilizar o jogo:<\/h4>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\">body {<\/span><\/p>\n<div>\n<div>\n<pre>\u00a0 display: flex;\r\n\r\n\u00a0 align-items: center;\r\n\r\n\u00a0 justify-content: center;\r\n\r\n\u00a0 height: 100vh;\r\n\r\n\u00a0 background-color: #000;\r\n\r\n\u00a0 font-family: Arial, sans-serif;\r\n\r\n}\r\n\r\n.container {\r\n\r\n\u00a0 display: flex;\r\n\r\n\u00a0 flex-direction: column;\r\n\r\n\u00a0 align-items: center;\r\n\r\n\u00a0 justify-content: center;\r\n\r\n\u00a0 gap: 0.5rem;\r\n\r\n}\r\n\r\nh1 {\r\n\r\n\u00a0 color: #fff;\r\n\r\n\u00a0 font-size:48px;\r\n\r\n\u00a0 line-height: 48px;\r\n\r\n\u00a0 text-shadow: 0 0 3vw #2356FF;\r\n\r\n\u00a0 animation: neon 3s linear infinite;\r\n\r\n\u00a0 -moz-animation: neon 3s linear infinite;\r\n\r\n\u00a0 -webkit-animation: neon 3s linear infinite;\r\n\r\n\u00a0 -o-animation: neon 3s linear infinite;\r\n\r\n}\r\n\r\n@keyframes neon {\r\n\r\n\u00a0 0%,\r\n\r\n\u00a0 100% {\r\n\r\n\u00a0 \u00a0 text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;\r\n\r\n\u00a0 \u00a0 color: #fff; \u00a0 \u00a0\r\n\r\n\u00a0 }\r\n\r\n\u00a0 50% {\r\n\r\n\u00a0 \u00a0 text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;\r\n\r\n\u00a0 \u00a0 color: #698c94;\r\n\r\n\u00a0 }\r\n\r\n}\r\n\r\n.game-board {\r\n\r\n\u00a0 display: grid;\r\n\r\n\u00a0 grid-template-columns: repeat(3, 100px);\r\n\r\n\u00a0 grid-template-rows: repeat(3, 100px);\r\n\r\n\u00a0 gap: 10px;\r\n\r\n}\r\n\r\n.cell {\r\n\r\n\u00a0 width: 100px;\r\n\r\n\u00a0 height: 100px;\r\n\r\n\u00a0 background-color: transparent;\r\n\r\n\u00a0 display: flex;\r\n\r\n\u00a0 align-items: center;\r\n\r\n\u00a0 justify-content: center;\r\n\r\n\u00a0 font-size: 36px;\r\n\r\n\u00a0 font-weight: bold;\r\n\r\n\u00a0 cursor: pointer;\r\n\r\n\u00a0 color: #fff;\r\n\r\n\u00a0 border-radius: 8px;\r\n\r\n\u00a0 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff,\r\n\r\n\u00a0 \u00a0 0 0 40px #ff00ff, 0 0 50px #ff00ff, 0 0 60px #ff00ff;\r\n\r\n\u00a0 border: 2px solid #fff; \/* Borda branca *\/\r\n\r\n\u00a0 box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;\r\n\r\n\u00a0 transition: transform 0.2s ease-in-out;\r\n\r\n}\r\n\r\n.cell:hover {\r\n\r\n\u00a0 background-color: rgba(255, 255, 255, 0.1);\r\n\r\n}\r\n\r\n.cell:active {\r\n\r\n\u00a0 transform: scale(1.2);\r\n\r\n}\r\n\r\n.cell.x {\r\n\r\n\u00a0 color: #fff;\r\n\r\n\u00a0 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00ff00, 0 0 30px #00ff00,\r\n\r\n\u00a0 \u00a0 0 0 40px #00ff00, 0 0 50px #00ff00, 0 0 60px #00ff00;\r\n\r\n}\r\n\r\n.cell.o {\r\n\r\n\u00a0 color: #fff;\r\n\r\n\u00a0 text-shadow: 0 0 10px #fff, 0 0 20px #00f, 0 0 30px #00f, 0 0 40px #00f,\r\n\r\n\u00a0 \u00a0 0 0 50px #00f, 0 0 60px #00f, 0 0 70px #00f;\r\n\r\n}\r\n\r\n.status {\r\n\r\n\u00a0 margin-top: 20px;\r\n\r\n\u00a0 font-size: 24px;\r\n\r\n\u00a0 font-weight: bold;\r\n\r\n\u00a0 color: #fff;\r\n\r\n\u00a0 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00ff00, 0 0 30px #00ff00,\r\n\r\n\u00a0 \u00a0 0 0 40px #00ff00, 0 0 50px #00ff00, 0 0 60px #00ff00;\r\n\r\n}\r\n\r\n.status.x {\r\n\r\n\u00a0 color: #fff;\r\n\r\n\u00a0 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00ff00, 0 0 30px #00ff00,\r\n\r\n\u00a0 \u00a0 0 0 40px #00ff00, 0 0 50px #00ff00, 0 0 60px #00ff00;\r\n\r\n}\r\n\r\n.status.o {\r\n\r\n\u00a0 color: #fff;\r\n\r\n\u00a0 text-shadow: 0 0 10px #fff, 0 0 20px #00f, 0 0 30px #00f, 0 0 40px #00f,\r\n\r\n\u00a0 \u00a0 0 0 50px #00f, 0 0 60px #00f, 0 0 70px #00f;\r\n\r\n}\r\n\r\n.reset-button {\r\n\r\n\u00a0 margin-top: 10px;\r\n\r\n\u00a0 padding: 10px 20px;\r\n\r\n\u00a0 border-radius: 4px;\r\n\r\n\u00a0 font-size: 16px;\r\n\r\n\u00a0 cursor: pointer;\r\n\r\n\u00a0 background-color: #000;\r\n\r\n\u00a0 color: #fff;\r\n\r\n\u00a0 border: 2px solid #fff;\r\n\r\n\u00a0 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00ff00, 0 0 30px #00ff00,\r\n\r\n\u00a0 \u00a0 0 0 40px #00ff00, 0 0 50px #00ff00, 0 0 60px #00ff00;\r\n\r\n\u00a0 box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;\r\n\r\n}\r\n\r\n.reset-button:hover {\r\n\r\n\u00a0 background-color: rgba(255, 255, 255, 0.1);\r\n\r\n}<\/pre>\n<\/div>\n<\/div>\n<h4><\/h4>\n<h4>Segue abaixo o c\u00f3digo Javascript usado no tutorial:<\/h4>\n<div>\n<pre><code><\/code><\/pre>\n<div>\n<pre>document.addEventListener(\"DOMContentLoaded\", () =&gt; {\r\n\r\n\u00a0 const cells = document.querySelectorAll(\".cell\");\r\n\r\n\u00a0 const statusDisplay = document.querySelector(\".status\");\r\n\r\n\u00a0 const resetButton = document.querySelector(\".reset-button\");\r\n\r\n\u00a0 let currentPlayer = \"X\";\r\n\r\n\u00a0 let gameState = [\"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\"];\r\n\r\n\u00a0 const winningConditions = [\r\n\r\n\u00a0 \u00a0 [0, 1, 2],\r\n\r\n\u00a0 \u00a0 [3, 4, 5],\r\n\r\n\u00a0 \u00a0 [6, 7, 8],\r\n\r\n\u00a0 \u00a0 [0, 3, 6],\r\n\r\n\u00a0 \u00a0 [1, 4, 7],\r\n\r\n\u00a0 \u00a0 [2, 5, 8],\r\n\r\n\u00a0 \u00a0 [0, 4, 8],\r\n\r\n\u00a0 \u00a0 [2, 4, 6],\r\n\r\n\u00a0 ];\r\n\r\n\u00a0 const handleCellClick = (e) =&gt; {\r\n\r\n\u00a0 \u00a0 const clickedCell = e.target;\r\n\r\n\u00a0 \u00a0 const clickedCellIndex = parseInt(clickedCell.getAttribute(\"data-index\"));\r\n\r\n\u00a0 \u00a0 if (gameState[clickedCellIndex] !== \"\" || !isGameActive()) {\r\n\r\n\u00a0 \u00a0 \u00a0 return;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 gameState[clickedCellIndex] = currentPlayer;\r\n\r\n\u00a0 \u00a0 clickedCell.textContent = currentPlayer;\r\n\r\n\u00a0 \u00a0 clickedCell.classList.add(currentPlayer.toLowerCase());\r\n\r\n\u00a0 \u00a0 if (checkWinner()) {\r\n\r\n\u00a0 \u00a0 \u00a0 statusDisplay.textContent = `Jogador ${currentPlayer} venceu!`;\r\n\r\n\u00a0 \u00a0 \u00a0 statusDisplay.classList.add(currentPlayer.toLowerCase());\r\n\r\n\u00a0 \u00a0 } else if (!gameState.includes(\"\")) {\r\n\r\n\u00a0 \u00a0 \u00a0 statusDisplay.textContent = `Empate!`;\r\n\r\n\u00a0 \u00a0 \u00a0 statusDisplay.classList.remove(\"x\", \"o\");\r\n\r\n\u00a0 \u00a0 } else {\r\n\r\n\u00a0 \u00a0 \u00a0 currentPlayer = currentPlayer === \"X\" ? \"O\" : \"X\";\r\n\r\n\u00a0 \u00a0 \u00a0 updateStatusDisplay();\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 };\r\n\r\n\u00a0 const checkWinner = () =&gt; {\r\n\r\n\u00a0 \u00a0 for (let i = 0; i &lt; winningConditions.length; i++) {\r\n\r\n\u00a0 \u00a0 \u00a0 const [a, b, c] = winningConditions[i];\r\n\r\n\u00a0 \u00a0 \u00a0 if (\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 gameState[a] &amp;&amp;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 gameState[a] === gameState[b] &amp;&amp;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 gameState[a] === gameState[c]\r\n\r\n\u00a0 \u00a0 \u00a0 ) {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 return true;\r\n\r\n\u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 return false;\r\n\r\n\u00a0 };\r\n\r\n\u00a0 const isGameActive = () =&gt; {\r\n\r\n\u00a0 \u00a0 return (\r\n\r\n\u00a0 \u00a0 \u00a0 !statusDisplay.textContent.includes(\"vence\") &amp;&amp;\r\n\r\n\u00a0 \u00a0 \u00a0 !statusDisplay.textContent.includes(\"Empate\")\r\n\r\n\u00a0 \u00a0 );\r\n\r\n\u00a0 };\r\n\r\n\u00a0 const handleResetGame = () =&gt; {\r\n\r\n\u00a0 \u00a0 gameState = [\"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\"];\r\n\r\n\u00a0 \u00a0 currentPlayer = \"X\";\r\n\r\n\u00a0 \u00a0 updateStatusDisplay();\r\n\r\n\u00a0 \u00a0 cells.forEach((cell) =&gt; {\r\n\r\n\u00a0 \u00a0 \u00a0 cell.textContent = \"\";\r\n\r\n\u00a0 \u00a0 \u00a0 cell.classList.remove(\"x\", \"o\");\r\n\r\n\u00a0 \u00a0 });\r\n\r\n\u00a0 \u00a0 statusDisplay.classList.remove(\"x\", \"o\");\r\n\r\n\u00a0 };\r\n\r\n\u00a0 const updateStatusDisplay = () =&gt; {\r\n\r\n\u00a0 \u00a0 statusDisplay.textContent = `Vez do jogador ${currentPlayer}`;\r\n\r\n\u00a0 \u00a0 statusDisplay.classList.remove(\"x\", \"o\");\r\n\r\n\u00a0 \u00a0 statusDisplay.classList.add(currentPlayer.toLowerCase());\r\n\r\n\u00a0 };\r\n\r\n\u00a0 cells.forEach((cell) =&gt; cell.addEventListener(\"click\", handleCellClick));\r\n\r\n\u00a0 resetButton.addEventListener(\"click\", handleResetGame);\r\n\r\n\u00a0 updateStatusDisplay();\r\n\r\n});<\/pre>\n<\/div>\n<pre><code><\/code><\/pre>\n<\/div>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>Voc\u00ea pode visualizar o resultado do jogos neste link : <\/strong><\/span><\/p>\n<p><a href=\"https:\/\/urutaudev.com.br\/games\/jogo-da-velha-neon\/\">Jogo da Velha &#8211;&gt;<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-size: 14pt;\">V\u00eddeo Tutorial Criando Jogo da Velha:<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" title=\"Recriando o jogo da velha estilo Neon - No Code\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/Ih6W92Z9EHE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2>C\u00f3digo fonte do tutorial:<\/h2>\n<p><a href=\"https:\/\/github.com\/JrDevCJ\/javascript-tutorial\/tree\/main\/jogo-da-velha-neon\" target=\"_blank\" rel=\"noopener\">C\u00f3digo Fonte<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Criando Jogo da Velha Javascript estilo Neon. &nbsp; &nbsp; Criando Jogo da Velha Javascript, neste tutorial mostro como criar um<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[1,14],"tags":[29,57,81,82,27,26,18],"class_list":["post-388","post","type-post","status-publish","format-standard","hentry","category-blog","category-javascript","tag-css","tag-css-tutorial","tag-games","tag-games-javascript","tag-html","tag-javascript","tag-tutorias"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Criando Jogo da Velha Javascript - UrutauDev<\/title>\n<meta name=\"description\" content=\"Criando Jogo da Velha Javascript Neste tutorial mostro como criar um Jogo da Velha em Javascript no estilo Neon usando CSS e Javascript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Criando Jogo da Velha Javascript - UrutauDev\" \/>\n<meta property=\"og:description\" content=\"Criando Jogo da Velha Javascript Neste tutorial mostro como criar um Jogo da Velha em Javascript no estilo Neon usando CSS e Javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"UrutauDev\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-12T23:02:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-28T21:10:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/07\/jogo-da-velha-300x286.jpg\" \/>\n<meta name=\"author\" content=\"C. Junior\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"C. Junior\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/07\\\/12\\\/criando-jogo-da-velha-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/07\\\/12\\\/criando-jogo-da-velha-javascript\\\/\"},\"author\":{\"name\":\"C. Junior\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#\\\/schema\\\/person\\\/7e321618d23a158d5a42d5cfbdd99dd6\"},\"headline\":\"Criando Jogo da Velha Javascript\",\"datePublished\":\"2024-07-12T23:02:02+00:00\",\"dateModified\":\"2024-07-28T21:10:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/07\\\/12\\\/criando-jogo-da-velha-javascript\\\/\"},\"wordCount\":148,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/07\\\/12\\\/criando-jogo-da-velha-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/urutaudev.com.br\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/jogo-da-velha-300x286.jpg\",\"keywords\":[\"css\",\"css tutorial\",\"games\",\"games javascript\",\"html\",\"javascript\",\"tutorias\"],\"articleSection\":[\"Blog\",\"Javascript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/07\\\/12\\\/criando-jogo-da-velha-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/07\\\/12\\\/criando-jogo-da-velha-javascript\\\/\",\"url\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/07\\\/12\\\/criando-jogo-da-velha-javascript\\\/\",\"name\":\"Criando Jogo da Velha Javascript - UrutauDev\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/07\\\/12\\\/criando-jogo-da-velha-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/07\\\/12\\\/criando-jogo-da-velha-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/urutaudev.com.br\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/jogo-da-velha-300x286.jpg\",\"datePublished\":\"2024-07-12T23:02:02+00:00\",\"dateModified\":\"2024-07-28T21:10:53+00:00\",\"description\":\"Criando Jogo da Velha Javascript Neste tutorial mostro como criar um Jogo da Velha em Javascript no estilo Neon usando CSS e Javascript\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/07\\\/12\\\/criando-jogo-da-velha-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/07\\\/12\\\/criando-jogo-da-velha-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/07\\\/12\\\/criando-jogo-da-velha-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/urutaudev.com.br\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/jogo-da-velha.jpg\",\"contentUrl\":\"https:\\\/\\\/urutaudev.com.br\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/jogo-da-velha.jpg\",\"width\":689,\"height\":656,\"caption\":\"games Jogo da velha\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/07\\\/12\\\/criando-jogo-da-velha-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/urutaudev.com.br\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Criando Jogo da Velha Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#website\",\"url\":\"https:\\\/\\\/urutaudev.com.br\\\/\",\"name\":\"UrutauDev\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/urutaudev.com.br\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#organization\",\"name\":\"UrutauDev\",\"url\":\"https:\\\/\\\/urutaudev.com.br\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/urutaudev.com.br\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/cropped-urutau-dev-logo.png\",\"contentUrl\":\"https:\\\/\\\/urutaudev.com.br\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/cropped-urutau-dev-logo.png\",\"width\":100,\"height\":84,\"caption\":\"UrutauDev\"},\"image\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#\\\/schema\\\/person\\\/7e321618d23a158d5a42d5cfbdd99dd6\",\"name\":\"C. Junior\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e7df4c63012e2f6991311d4037bdc57752b996058cf1396747a7ab74e8ac032e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e7df4c63012e2f6991311d4037bdc57752b996058cf1396747a7ab74e8ac032e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e7df4c63012e2f6991311d4037bdc57752b996058cf1396747a7ab74e8ac032e?s=96&d=mm&r=g\",\"caption\":\"C. Junior\"},\"sameAs\":[\"http:\\\/\\\/urutaudev.com.br\",\"instagram.com\\\/urutautec\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC8pDLb5GaYBAoWwQkIzrhRw\"],\"url\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/author\\\/urutaudev-com-br\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Criando Jogo da Velha Javascript - UrutauDev","description":"Criando Jogo da Velha Javascript Neste tutorial mostro como criar um Jogo da Velha em Javascript no estilo Neon usando CSS e Javascript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Criando Jogo da Velha Javascript - UrutauDev","og_description":"Criando Jogo da Velha Javascript Neste tutorial mostro como criar um Jogo da Velha em Javascript no estilo Neon usando CSS e Javascript","og_url":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/","og_site_name":"UrutauDev","article_published_time":"2024-07-12T23:02:02+00:00","article_modified_time":"2024-07-28T21:10:53+00:00","og_image":[{"url":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/07\/jogo-da-velha-300x286.jpg","type":"","width":"","height":""}],"author":"C. Junior","twitter_card":"summary_large_image","twitter_misc":{"Written by":"C. Junior","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/#article","isPartOf":{"@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/"},"author":{"name":"C. Junior","@id":"https:\/\/urutaudev.com.br\/#\/schema\/person\/7e321618d23a158d5a42d5cfbdd99dd6"},"headline":"Criando Jogo da Velha Javascript","datePublished":"2024-07-12T23:02:02+00:00","dateModified":"2024-07-28T21:10:53+00:00","mainEntityOfPage":{"@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/"},"wordCount":148,"commentCount":0,"publisher":{"@id":"https:\/\/urutaudev.com.br\/#organization"},"image":{"@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/07\/jogo-da-velha-300x286.jpg","keywords":["css","css tutorial","games","games javascript","html","javascript","tutorias"],"articleSection":["Blog","Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/","url":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/","name":"Criando Jogo da Velha Javascript - UrutauDev","isPartOf":{"@id":"https:\/\/urutaudev.com.br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/#primaryimage"},"image":{"@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/07\/jogo-da-velha-300x286.jpg","datePublished":"2024-07-12T23:02:02+00:00","dateModified":"2024-07-28T21:10:53+00:00","description":"Criando Jogo da Velha Javascript Neste tutorial mostro como criar um Jogo da Velha em Javascript no estilo Neon usando CSS e Javascript","breadcrumb":{"@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/#primaryimage","url":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/07\/jogo-da-velha.jpg","contentUrl":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/07\/jogo-da-velha.jpg","width":689,"height":656,"caption":"games Jogo da velha"},{"@type":"BreadcrumbList","@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/07\/12\/criando-jogo-da-velha-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/urutaudev.com.br\/"},{"@type":"ListItem","position":2,"name":"Criando Jogo da Velha Javascript"}]},{"@type":"WebSite","@id":"https:\/\/urutaudev.com.br\/#website","url":"https:\/\/urutaudev.com.br\/","name":"UrutauDev","description":"","publisher":{"@id":"https:\/\/urutaudev.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/urutaudev.com.br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/urutaudev.com.br\/#organization","name":"UrutauDev","url":"https:\/\/urutaudev.com.br\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/urutaudev.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2023\/08\/cropped-urutau-dev-logo.png","contentUrl":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2023\/08\/cropped-urutau-dev-logo.png","width":100,"height":84,"caption":"UrutauDev"},"image":{"@id":"https:\/\/urutaudev.com.br\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/urutaudev.com.br\/#\/schema\/person\/7e321618d23a158d5a42d5cfbdd99dd6","name":"C. Junior","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e7df4c63012e2f6991311d4037bdc57752b996058cf1396747a7ab74e8ac032e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e7df4c63012e2f6991311d4037bdc57752b996058cf1396747a7ab74e8ac032e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e7df4c63012e2f6991311d4037bdc57752b996058cf1396747a7ab74e8ac032e?s=96&d=mm&r=g","caption":"C. Junior"},"sameAs":["http:\/\/urutaudev.com.br","instagram.com\/urutautec","https:\/\/www.youtube.com\/channel\/UC8pDLb5GaYBAoWwQkIzrhRw"],"url":"https:\/\/urutaudev.com.br\/index.php\/author\/urutaudev-com-br\/"}]}},"_links":{"self":[{"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/posts\/388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=388"}],"version-history":[{"count":14,"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/posts\/388\/revisions"}],"predecessor-version":[{"id":405,"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/posts\/388\/revisions\/405"}],"wp:attachment":[{"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}