{"id":6921,"date":"2024-06-09T23:52:56","date_gmt":"2024-06-10T02:52:56","guid":{"rendered":"https:\/\/irisfernandez.com.ar\/betaweblog\/?p=6921"},"modified":"2025-05-23T18:58:49","modified_gmt":"2025-05-23T21:58:49","slug":"programando-jueguitos-con-chatgpt","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2024\/06\/09\/programando-jueguitos-con-chatgpt\/","title":{"rendered":"Programando jueguitos con ChatGPT"},"content":{"rendered":"\n<p>Continuando con <a href=\"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2024\/06\/06\/chatgpt-para-crear-codigo\/\">mis experimentos anteriores<\/a>, estuve chateando hasta lograr programar un juego completo.<\/p>\n\n\n\n<p>Este es el chat en el que le fui pidiendo a la herramienta que me generase un c\u00f3digo, d\u00e1ndole poco a poco m\u00e1s detalles de c\u00f3mo quer\u00eda que funcione: <a href=\"https:\/\/chatgpt.com\/share\/07fb70af-04d0-4ca8-9323-b271f5f862b9\">Enlace al chat.<\/a> (al final me qued\u00e9 sin cr\u00e9ditos para ChatGPT 4o y por eso no puedo seguir ahora)<\/p>\n\n\n\n<p>En este enlace se puede probar el juego: <a href=\"https:\/\/irisfernandez.ar\/interactivos\/pais6.html\">Hac\u00e9 grande a tu pa\u00eds<\/a><\/p>\n\n\n\n<p>Y el c\u00f3digo resultante despu\u00e9s de todo el chat es el siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"es\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Juego del Auto&lt;\/title>\n    &lt;style>\n        body {\n            margin: 0;\n            padding: 0;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            font-family: Arial, sans-serif;\n        }\n        #title {\n            font-size: 36px;\n            margin: 20px;\n            color: #007BFF; \/* Azul *\/\n        }\n        #gameContainer {\n            position: relative;\n            width: 90%;\n            height: 80vh;\n            background-color: lightblue;\n            overflow: hidden;\n            border: 2px solid black;\n        }\n        #score {\n            font-size: 24px;\n            margin: 10px;\n        }\n        #car {\n            position: absolute;\n            bottom: 10px;\n            width: 100px;\n            height: 50px;\n            display: flex;\n            flex-direction: column;\n        }\n        #car div {\n            height: 33.33%;\n        }\n        #car .top, #car .bottom {\n            background-color: #75AADB; \/* Celeste *\/\n        }\n        #car .middle {\n            background-color: white;\n        }\n        .word {\n            position: absolute;\n            font-size: 18px;\n            color: black;\n        }\n        #message {\n            font-size: 36px;\n            color: #8A2BE2; \/* Violeta azulado *\/\n            margin: 20px;\n            text-align: center;\n        }\n        #restartButton {\n            display: none;\n            padding: 10px 20px;\n            font-size: 18px;\n            cursor: pointer;\n            background-color: #007BFF;\n            color: white;\n            border: none;\n            border-radius: 5px;\n            margin-top: 20px;\n        }\n        .centered {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n    &lt;\/style>\n&lt;\/head>\n&lt;body>\n    &lt;div id=\"title\">Hac\u00e9 que tu pa\u00eds sea un gran pa\u00eds&lt;\/div>\n    &lt;div id=\"score\">Puntaje: 0&lt;\/div>\n    &lt;div id=\"gameContainer\">\n        &lt;div id=\"car\">\n            &lt;div class=\"top\">&lt;\/div>\n            &lt;div class=\"middle\">&lt;\/div>\n            &lt;div class=\"bottom\">&lt;\/div>\n        &lt;\/div>\n    &lt;\/div>\n    &lt;div id=\"message\" class=\"centered\">&lt;\/div>\n    &lt;div class=\"centered\">\n        &lt;button id=\"restartButton\" onclick=\"restartGame()\">Volver a jugar&lt;\/button>\n    &lt;\/div>\n\n    &lt;script>\n        const gameContainer = document.getElementById('gameContainer');\n        const car = document.getElementById('car');\n        const scoreDisplay = document.getElementById('score');\n        const messageDisplay = document.getElementById('message');\n        const restartButton = document.getElementById('restartButton');\n        let score = 0;\n        let carPosition = gameContainer.offsetWidth \/ 2 - car.offsetWidth \/ 2;\n        const words = &#91;\n            \"asfalto\", \"educaci\u00f3n p\u00fablica\", \"hospital p\u00fablico\", \"iluminaci\u00f3n de la calle\", \"sem\u00e1foros\",\n            \"vacunas obligatorias\", \"regulaci\u00f3n del uso de armas\", \"control de calidad en la comida\",\n            \"netbooks para estudiantes de escuela p\u00fablica\", \"universidades en todo el pa\u00eds\", \"boleto estudiantil\",\n            \"sat\u00e9lites\", \"trenes estatales\", \"apoyo al cine nacional\", \"becas para deportistas\",\n            \"Centro para deportistas de Alto Rendimiento\", \"clubes barriales\", \"orquestas juveniles\",\n            \"Sistema operativo Huayra\", \"Rutas\", \"Plazas\", \"Juegos en las plazas\", \"cr\u00e9ditos para viviendas\",\n            \"pensi\u00f3n para discapacidad\", \"medicamentos gratis para personas jubiladas\", \"jubilaciones altas\"\n        ];\n        let gameInterval;\n        let carWidth = 100;\n        let carHeight = 50;\n\n        car.style.left = carPosition + 'px';\n        car.style.width = carWidth + 'px';\n        car.style.height = carHeight + 'px';\n\n        document.addEventListener('keydown', (event) => {\n            if (event.key === 'ArrowLeft') {\n                carPosition = Math.max(0, carPosition - 10);\n                car.style.left = carPosition + 'px';\n            } else if (event.key === 'ArrowRight') {\n                carPosition = Math.min(gameContainer.offsetWidth - car.offsetWidth, carPosition + 10);\n                car.style.left = carPosition + 'px';\n            }\n        });\n\n        function createWord() {\n            const word = document.createElement('div');\n            word.classList.add('word');\n            word.textContent = words&#91;Math.floor(Math.random() * words.length)];\n            word.style.left = Math.random() * (gameContainer.offsetWidth - 100) + 'px';\n            word.style.top = '0px';\n            gameContainer.appendChild(word);\n\n            function fall() {\n                const wordTop = parseFloat(word.style.top);\n                if (wordTop + word.offsetHeight >= gameContainer.offsetHeight - car.offsetHeight) {\n                    const wordLeft = parseFloat(word.style.left);\n                    const carLeft = parseFloat(car.style.left);\n                    if (wordLeft &lt; carLeft + car.offsetWidth &amp;&amp; wordLeft + word.offsetWidth > carLeft) {\n                        score++;\n                        scoreDisplay.textContent = `Puntaje: ${score}`;\n                        gameContainer.removeChild(word);\n                        checkGameStatus();\n                        adjustCarSize(1.10);\n                    } else if (wordTop + word.offsetHeight >= gameContainer.offsetHeight) {\n                        score--;\n                        scoreDisplay.textContent = `Puntaje: ${score}`;\n                        gameContainer.removeChild(word);\n                        checkGameStatus();\n                        adjustCarSize(0.90);\n                    } else {\n                        word.style.top = wordTop + 2 + 'px';\n                        requestAnimationFrame(fall);\n                    }\n                } else {\n                    word.style.top = wordTop + 2 + 'px';\n                    requestAnimationFrame(fall);\n                }\n            }\n            fall();\n        }\n\n        function adjustCarSize(factor) {\n            carWidth *= factor;\n            carHeight *= factor;\n            car.style.width = carWidth + 'px';\n            car.style.height = carHeight + 'px';\n        }\n\n        function checkGameStatus() {\n            if (score &lt; 0) {\n                endGame('Perdiste');\n            } else if (score >= 20) {\n                endGame('Ganamos. Hiciste que Argentina sea un pa\u00eds m\u00e1s grande.');\n            }\n        }\n\n        function endGame(message) {\n            clearInterval(gameInterval);\n            messageDisplay.textContent = message;\n            messageDisplay.style.display = 'block';\n            restartButton.style.display = 'block';\n        }\n\n        function restartGame() {\n            score = 0;\n            scoreDisplay.textContent = 'Puntaje: 0';\n            messageDisplay.textContent = '';\n            messageDisplay.style.display = 'none';\n            restartButton.style.display = 'none';\n            const wordsOnScreen = document.querySelectorAll('.word');\n            wordsOnScreen.forEach(word => gameContainer.removeChild(word));\n            carWidth = 100;\n            carHeight = 50;\n            car.style.width = carWidth + 'px';\n            car.style.height = carHeight + 'px';\n            gameInterval = setInterval(createWord, 2000);\n        }\n\n        gameInterval = setInterval(createWord, 2000);\n    &lt;\/script>\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Continuando con mis experimentos anteriores, estuve chateando hasta lograr programar un juego completo. Este es el chat en el que le fui pidiendo a la herramienta que me generase un c\u00f3digo, d\u00e1ndole poco a poco m\u00e1s detalles de c\u00f3mo quer\u00eda que funcione: Enlace al chat. (al final me qued\u00e9 sin cr\u00e9ditos para ChatGPT 4o y &hellip; <a href=\"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2024\/06\/09\/programando-jueguitos-con-chatgpt\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> &#8220;Programando jueguitos con ChatGPT&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,47],"tags":[],"class_list":["post-6921","post","type-post","status-publish","format-standard","hentry","category-educacion-tecnologia","category-inteligencia-artificial"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/6921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=6921"}],"version-history":[{"count":1,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/6921\/revisions"}],"predecessor-version":[{"id":6922,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/6921\/revisions\/6922"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=6921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=6921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=6921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}