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ódigo, dándole poco a poco más detalles de cómo quería que funcione: Enlace al chat. (al final me quedé sin créditos para ChatGPT 4o y por eso no puedo seguir ahora)
En este enlace se puede probar el juego: Hacé grande a tu país
Y el código resultante después de todo el chat es el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego del Auto</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
}
#title {
font-size: 36px;
margin: 20px;
color: #007BFF; /* Azul */
}
#gameContainer {
position: relative;
width: 90%;
height: 80vh;
background-color: lightblue;
overflow: hidden;
border: 2px solid black;
}
#score {
font-size: 24px;
margin: 10px;
}
#car {
position: absolute;
bottom: 10px;
width: 100px;
height: 50px;
display: flex;
flex-direction: column;
}
#car div {
height: 33.33%;
}
#car .top, #car .bottom {
background-color: #75AADB; /* Celeste */
}
#car .middle {
background-color: white;
}
.word {
position: absolute;
font-size: 18px;
color: black;
}
#message {
font-size: 36px;
color: #8A2BE2; /* Violeta azulado */
margin: 20px;
text-align: center;
}
#restartButton {
display: none;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
margin-top: 20px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</head>
<body>
<div id="title">Hacé que tu país sea un gran país</div>
<div id="score">Puntaje: 0</div>
<div id="gameContainer">
<div id="car">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
<div id="message" class="centered"></div>
<div class="centered">
<button id="restartButton" onclick="restartGame()">Volver a jugar</button>
</div>
<script>
const gameContainer = document.getElementById('gameContainer');
const car = document.getElementById('car');
const scoreDisplay = document.getElementById('score');
const messageDisplay = document.getElementById('message');
const restartButton = document.getElementById('restartButton');
let score = 0;
let carPosition = gameContainer.offsetWidth / 2 - car.offsetWidth / 2;
const words = [
"asfalto", "educación pública", "hospital público", "iluminación de la calle", "semáforos",
"vacunas obligatorias", "regulación del uso de armas", "control de calidad en la comida",
"netbooks para estudiantes de escuela pública", "universidades en todo el país", "boleto estudiantil",
"satélites", "trenes estatales", "apoyo al cine nacional", "becas para deportistas",
"Centro para deportistas de Alto Rendimiento", "clubes barriales", "orquestas juveniles",
"Sistema operativo Huayra", "Rutas", "Plazas", "Juegos en las plazas", "créditos para viviendas",
"pensión para discapacidad", "medicamentos gratis para personas jubiladas", "jubilaciones altas"
];
let gameInterval;
let carWidth = 100;
let carHeight = 50;
car.style.left = carPosition + 'px';
car.style.width = carWidth + 'px';
car.style.height = carHeight + 'px';
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowLeft') {
carPosition = Math.max(0, carPosition - 10);
car.style.left = carPosition + 'px';
} else if (event.key === 'ArrowRight') {
carPosition = Math.min(gameContainer.offsetWidth - car.offsetWidth, carPosition + 10);
car.style.left = carPosition + 'px';
}
});
function createWord() {
const word = document.createElement('div');
word.classList.add('word');
word.textContent = words[Math.floor(Math.random() * words.length)];
word.style.left = Math.random() * (gameContainer.offsetWidth - 100) + 'px';
word.style.top = '0px';
gameContainer.appendChild(word);
function fall() {
const wordTop = parseFloat(word.style.top);
if (wordTop + word.offsetHeight >= gameContainer.offsetHeight - car.offsetHeight) {
const wordLeft = parseFloat(word.style.left);
const carLeft = parseFloat(car.style.left);
if (wordLeft < carLeft + car.offsetWidth && wordLeft + word.offsetWidth > carLeft) {
score++;
scoreDisplay.textContent = `Puntaje: ${score}`;
gameContainer.removeChild(word);
checkGameStatus();
adjustCarSize(1.10);
} else if (wordTop + word.offsetHeight >= gameContainer.offsetHeight) {
score--;
scoreDisplay.textContent = `Puntaje: ${score}`;
gameContainer.removeChild(word);
checkGameStatus();
adjustCarSize(0.90);
} else {
word.style.top = wordTop + 2 + 'px';
requestAnimationFrame(fall);
}
} else {
word.style.top = wordTop + 2 + 'px';
requestAnimationFrame(fall);
}
}
fall();
}
function adjustCarSize(factor) {
carWidth *= factor;
carHeight *= factor;
car.style.width = carWidth + 'px';
car.style.height = carHeight + 'px';
}
function checkGameStatus() {
if (score < 0) {
endGame('Perdiste');
} else if (score >= 20) {
endGame('Ganamos. Hiciste que Argentina sea un país más grande.');
}
}
function endGame(message) {
clearInterval(gameInterval);
messageDisplay.textContent = message;
messageDisplay.style.display = 'block';
restartButton.style.display = 'block';
}
function restartGame() {
score = 0;
scoreDisplay.textContent = 'Puntaje: 0';
messageDisplay.textContent = '';
messageDisplay.style.display = 'none';
restartButton.style.display = 'none';
const wordsOnScreen = document.querySelectorAll('.word');
wordsOnScreen.forEach(word => gameContainer.removeChild(word));
carWidth = 100;
carHeight = 50;
car.style.width = carWidth + 'px';
car.style.height = carHeight + 'px';
gameInterval = setInterval(createWord, 2000);
}
gameInterval = setInterval(createWord, 2000);
</script>
</body>
</html>
