{"id":211,"date":"2023-12-01T05:22:50","date_gmt":"2023-12-01T05:22:50","guid":{"rendered":"https:\/\/metrosharesolutions.com\/blogs\/gpt\/?p=211"},"modified":"2023-12-12T16:32:09","modified_gmt":"2023-12-12T16:32:09","slug":"gptic-gptac-gptoe","status":"publish","type":"post","link":"https:\/\/metrosharesolutions.com\/blogs\/gpt\/2023\/12\/01\/gptic-gptac-gptoe\/","title":{"rendered":"GPTic GPTac GPToe"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">While putting together my presentation for Boston Code Camp, I asked ChatGPT to help me create a Tic Tac Toe game.  Using just three commands, I was able to generate a completely functioning web application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Command #1<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">provide me the html, css, and javascript for a simple tic tac toe game. i&#8217;m using jquery and bootstrap. the game should start when the page loads. the player is X and always starts by clicking a square. the computer is O and continues the game until the game is over. if there is a tie, start the game over. include a scoreboard.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">This command provided most of what I needed, including HTML, CSS, and JS code.<\/p>\n\n\n\n<!-- Include Prism CSS -->\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.24.1\/themes\/prism.min.css\" rel=\"stylesheet\" \/>\n\n<div id=\"codeContainer1\" style=\"position: relative; background-color: #444444; padding: 20px; border-radius: 8px; font-family: monospace; overflow-y: auto;\">\n    <pre><code class=\"language-html\"><xmp>     <div class=\"container\">\n        <h1 class=\"text-center\">Tic Tac Toe<\/h1>\n        <div id=\"scoreboard\" class=\"text-center\">\n            <p>Player (X) Wins: <span id=\"playerWins\">0<\/span><\/p>\n            <p>Computer (O) Wins: <span id=\"computerWins\">0<\/span><\/p>\n        <\/div>\n        <div id=\"gameBoard\" class=\"row justify-content-center\">\n            <div class=\"col-4 d-flex flex-wrap\">\n                <!-- Game squares -->\n                <div class=\"square border border-dark\" style=\"width: 33%; height: 100px;\"><\/div>\n                <div class=\"square border border-dark\" style=\"width: 33%; height: 100px;\"><\/div>\n                <div class=\"square border border-dark\" style=\"width: 33%; height: 100px;\"><\/div>\n                <div class=\"square border border-dark\" style=\"width: 33%; height: 100px;\"><\/div>\n                <div class=\"square border border-dark\" style=\"width: 33%; height: 100px;\"><\/div>\n                <div class=\"square border border-dark\" style=\"width: 33%; height: 100px;\"><\/div>\n                <div class=\"square border border-dark\" style=\"width: 33%; height: 100px;\"><\/div>\n                <div class=\"square border border-dark\" style=\"width: 33%; height: 100px;\"><\/div>\n                <div class=\"square border border-dark\" style=\"width: 33%; height: 100px;\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/xmp><\/code><\/pre>\n<\/div>\n\n<!-- Include Prism JS -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.24.1\/prism.min.js\"><\/script>\n\n\n\n<!-- Include Prism CSS -->\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.24.1\/themes\/prism.min.css\" rel=\"stylesheet\" \/>\n\n<div id=\"codeContainer\" style=\"position: relative; background-color: #444444; padding: 20px; border-radius: 8px; font-family: monospace; overflow-y: auto;\">\n    <pre><code class=\"language-css\">.square {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 2rem;\n}\n    <\/code><\/pre>\n<\/div>\n\n<!-- Include Prism JS -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.24.1\/prism.min.js\"><\/script>\n\n\n\n<!-- Include Prism CSS -->\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.24.1\/themes\/prism.min.css\" rel=\"stylesheet\" \/>\n\n<div id=\"codeContainer\" style=\"position: relative; background-color: #444444; padding: 20px; border-radius: 8px; font-family: monospace; overflow-y: auto;\">\n    <pre><code class=\"language-javascript\">$(document).ready(function() {\n    let player = \"X\";\n    let computer = \"O\";\n    let currentPlayer = player;\n    let playerWins = 0;\n    let computerWins = 0;\n\n    function checkWin() {\n        \/\/ Define your win logic here\n        \/\/ Return \"Player\" or \"Computer\" or \"Tie\" based on the board state\n    }\n\n    function computerMove() {\n        \/\/ Computer's move logic\n        \/\/ Find an empty square and mark it with 'O'\n    }\n\n    function resetGame() {\n        \/\/ Reset the game board for a new game\n        $('.square').text('');\n        currentPlayer = player;\n    }\n\n    $('.square').click(function() {\n        if ($(this).text() === '') {\n            $(this).text(currentPlayer);\n            let result = checkWin();\n            if (result) {\n                if (result === \"Player\") {\n                    playerWins++;\n                    $('#playerWins').text(playerWins);\n                } else if (result === \"Computer\") {\n                    computerWins++;\n                    $('#computerWins').text(computerWins);\n                }\n                setTimeout(resetGame, 2000);\n            } else {\n                currentPlayer = currentPlayer === player ? computer : player;\n                if (currentPlayer === computer) {\n                    computerMove();\n                    result = checkWin();\n                    if (result) {\n                        if (result === \"Player\") {\n                            playerWins++;\n                            $('#playerWins').text(playerWins);\n                        } else if (result === \"Computer\") {\n                            computerWins++;\n                            $('#computerWins').text(computerWins);\n                        }\n                        setTimeout(resetGame, 2000);\n                    } else {\n                        currentPlayer = player;\n                    }\n                }\n            }\n        }\n    });\n});\n    <\/code><\/pre>\n<\/div>\n\n<!-- Include Prism JS -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.24.1\/prism.min.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Notice the JavaScript code includes comments that say things like &#8220;define logic here&#8221; without returning the full code.  As if I have time for that!  Let&#8217;s just ask for it&#8230;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Command #2<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">please provide me with the checkwin and computermove functions<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">I wasn&#8217;t sure if it would provide me with the code as expected.  Why not just return those functions in full to begin with?  That&#8217;s a question for another day.  Sure enough, I was pleasantly surprised by the response.  It even checks for a &#8220;tie.&#8221;<\/p>\n\n\n\n<!-- Include Prism CSS -->\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.24.1\/themes\/prism.min.css\" rel=\"stylesheet\" \/>\n\n<div id=\"codeContainer\" style=\"position: relative; background-color: #444444; padding: 20px; border-radius: 8px; font-family: monospace; overflow-y: auto;\">\n    <pre><code class=\"language-javascript\">function checkWin() {\n    const squares = $('.square').map(function() { return $(this).text(); }).get();\n    const lines = [\n        [0, 1, 2], [3, 4, 5], [6, 7, 8], \/\/ Rows\n        [0, 3, 6], [1, 4, 7], [2, 5, 8], \/\/ Columns\n        [0, 4, 8], [2, 4, 6]             \/\/ Diagonals\n    ];\n\n    for (let i = 0; i < lines.length; i++) {\n        const [a, b, c] = lines[i];\n        if (squares[a] &#038;&#038; squares[a] === squares[b] &#038;&#038; squares[a] === squares[c]) {\n            return squares[a] === player ? \"Player\" : \"Computer\";\n        }\n    }\n\n    if (!squares.includes('')) {\n        return \"Tie\";\n    }\n\n    return null;\n}\n    <\/code><\/pre>\n<\/div>\n\n<!-- Include Prism JS -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.24.1\/prism.min.js\"><\/script>\n\n\n\n<!-- Include Prism CSS -->\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.24.1\/themes\/prism.min.css\" rel=\"stylesheet\" \/>\n\n<div id=\"codeContainer\" style=\"position: relative; background-color: #444444; padding: 20px; border-radius: 8px; font-family: monospace; overflow-y: auto;\">\n    <pre><code class=\"language-javascript\">function computerMove() {\n    const emptySquares = $('.square').filter(function() { \n        return $(this).text() === ''; \n    });\n\n    if (emptySquares.length > 0) {\n        const randomSquare = Math.floor(Math.random() * emptySquares.length);\n        emptySquares.eq(randomSquare).text(computer);\n    }\n}\n    <\/code><\/pre>\n<\/div>\n\n<!-- Include Prism JS -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.24.1\/prism.min.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">After taking the code and dropping it into a web app, here's what the site looks like.  It actually works!  While the computer move logic isn't perfect (it just picks a random empty square) the game has a back and forth mechanism that keeps track of wins and loses just like I asked.  Super cool &#x1f60e;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a61b1fa139e8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a61b1fa139e8\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-content\/uploads\/2023\/12\/Image8.webp\" alt=\"\" class=\"wp-image-239\" srcset=\"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-content\/uploads\/2023\/12\/Image8.webp 1920w, https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-content\/uploads\/2023\/12\/Image8-300x169.webp 300w, https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-content\/uploads\/2023\/12\/Image8-1024x576.webp 1024w, https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-content\/uploads\/2023\/12\/Image8-768x432.webp 768w, https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-content\/uploads\/2023\/12\/Image8-1536x864.webp 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Looks pretty boring though.  Let's spice it up with one more request.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Command #3<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">thanks! please add a bunch to the css so that this looks like a fun game. use lots of neon colors and gradients and use video game style fonts everywhere.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">It's really neat trying out random things like this and actually having them work.  Here's the CSS that was returned.  The comments show you that the page will have a dark background, a retro video game font, and neon green and pink colors.<\/p>\n\n\n\n<!-- Include Prism CSS -->\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.24.1\/themes\/prism.min.css\" rel=\"stylesheet\" \/>\n\n<div id=\"codeContainer\" style=\"position: relative; background-color: #444444; padding: 20px; border-radius: 8px; font-family: monospace; overflow-y: auto;\">\n    <pre><code class=\"language-css\">body {\n    background-color: #0d0d0d; \/* Dark background *\/\n    color: white;\n    font-family: 'Press Start 2P', cursive; \/* Retro video game font *\/\n}\n\nh1 {\n    color: #4dff4d; \/* Neon green *\/\n    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00, 0 0 70px #00ff00, 0 0 80px #00ff00, 0 0 100px #00ff00, 0 0 150px #00ff00;\n}\n\n#scoreboard p {\n    font-size: 1.2em;\n    color: #ff66ff; \/* Neon pink *\/\n    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff, 0 0 20px #ff00ff;\n}\n\n.square {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 2rem;\n    color: #00ccff; \/* Neon blue *\/\n    background-image: linear-gradient(to right, #ff0080, #ff8c00, #40e0d0); \/* Gradient *\/\n    border: 1px solid #ffffff; \/* White border *\/\n    box-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff, 0 0 20px #00ffff; \/* Neon glow *\/\n}\n\n.square:hover {\n    background-image: linear-gradient(to left, #ff0080, #ff8c00, #40e0d0); \/* Inverse gradient on hover *\/\n}\n\n\/* Import Google Font for Retro Video Game Style *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&display=swap');\n\n    <\/code><\/pre>\n<\/div>\n\n<!-- Include Prism JS -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.24.1\/prism.min.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">ChatGPT instructs us to make sure the font <strong>import<\/strong> statement ends up where it needs to be.  A quick move of that line to the top of the page and one refresh later, here's what our new Tic Tac Toe game looks like.  AMAZING!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a61b1fa13d41&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a61b1fa13d41\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-content\/uploads\/2023\/12\/Image7.webp\" alt=\"\" class=\"wp-image-246\" srcset=\"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-content\/uploads\/2023\/12\/Image7.webp 1920w, https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-content\/uploads\/2023\/12\/Image7-300x169.webp 300w, https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-content\/uploads\/2023\/12\/Image7-1024x576.webp 1024w, https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-content\/uploads\/2023\/12\/Image7-768x432.webp 768w, https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-content\/uploads\/2023\/12\/Image7-1536x864.webp 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>While putting together my presentation for Boston Code Camp, I asked ChatGPT to help me create a Tic Tac Toe game. Using just three commands, I was able to generate a completely functioning web application. Command #1 provide me the html, css, and javascript for a simple tic tac toe game. i&#8217;m using jquery and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":258,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,27,25,21],"tags":[],"class_list":["post-211","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-games","category-html","category-javascript"],"_links":{"self":[{"href":"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-json\/wp\/v2\/posts\/211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-json\/wp\/v2\/comments?post=211"}],"version-history":[{"count":44,"href":"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-json\/wp\/v2\/posts\/211\/revisions"}],"predecessor-version":[{"id":268,"href":"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-json\/wp\/v2\/posts\/211\/revisions\/268"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-json\/wp\/v2\/media\/258"}],"wp:attachment":[{"href":"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-json\/wp\/v2\/media?parent=211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-json\/wp\/v2\/categories?post=211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metrosharesolutions.com\/blogs\/gpt\/wp-json\/wp\/v2\/tags?post=211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}