🔥 Crea tu propio Juego de Trolleo Interactivo con Aplicación de Troleo en PHP y MySQL

🎯 Introducción

¿Alguna vez quisiste crear una broma digital divertida para compartir con tus amigos o compañeros? En este tutorial aprenderás paso a paso cómo desarrollar tu propio “juego de trolleo interactivo” usando Aplicación de Troleo en PHP y MySQL, donde uno de los botones huye del cursor del usuario mientras otro se selecciona automáticamente con una cuenta regresiva. ¡Vamos a divertirnos programando!

Video Explicativo

📌 Descarga del Proyecto

📌 ¿Qué vamos a crear?

• Un botón que escapa del cursor.
• Un botón fijo que inicia una cuenta regresiva automáticamente.
• Un mensaje emergente personalizado.

📌 Requisitos previos

• PHP y servidor local (recomendamos XAMPP).
• MySQL.
• Conocimientos básicos de HTML, CSS y JavaScript.

📌 Estructura básica del proyecto

proyecto/
├── db.php
├── generator.php
└── game.php

• db.php: conexión a la base de datos.
• generator.php: genera enlaces personalizados.
• game.php: ejecuta el juego interactivo.

📌 Creación de la base de datos

Utiliza este código SQL para crear la tabla:

CREATE TABLE troll_config (
    id INT AUTO_INCREMENT PRIMARY KEY,
    question VARCHAR(255),
    btn1_text VARCHAR(50),
    btn2_text VARCHAR(50),
    tricky_button VARCHAR(10),
    distance INT,
    unique_code VARCHAR(20),
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

📌 Creación del generador del juego (generator.php)

Este archivo recoge los datos de un formulario y los guarda en la base de datos, generando un enlace único.

📌 Implementación del juego interactivo (game.php)

Este archivo recupera la configuración almacenada en la base de datos, generando dinámicamente los botones y comportamientos interactivos:

• HTML y CSS: estructura visual atractiva.
• JavaScript: lógica para movimientos del botón “tricky” y temporizador del botón fijo.

📌 Probando el resultado final

1. Genera el enlace desde generator.php.
2. Accede al enlace y comprueba el funcionamiento del juego.

📌 Personalizando el juego (opcional)

• Modifica estilos CSS para cambiar su apariencia.
• Añade nuevas funcionalidades o efectos en JavaScript.

📌 Resolución de problemas frecuentes (FAQs)

• Error de conexión: revisa credenciales en db.php.
• Botón tricky sale del viewport: ajusta los valores de padding en JavaScript.
• Temporizador no inicia: verifica que el evento mouseenter esté correctamente asociado.

📌 Conclusión y recursos adicionales

¡Felicidades! Has creado un divertido juego interactivo que puedes compartir. Ahora experimenta personalizándolo a tu gusto.

Recursos recomendados:

• Curso de PHP básico
• Tutorial avanzado de JavaScript
• Más tutoriales interesantes

🧠 “How-To”: ¿Cómo se hizo y qué lógica se utilizó para desarrollar Aplicación de Troleo en PHP y MySQL?

En esta sección vamos a explicar paso a paso, la lógica detrás de cada fragmento del código usado para desarrollar este juego interactivo.

📌 1. Conexión a la Base de Datos (db.php)

Lógica:
Para almacenar configuraciones del juego de forma persistente, optamos por una base de datos MySQL. Usamos PDO porque ofrece seguridad contra ataques de inyección SQL y facilita la gestión de excepciones.

Explicación del código:

phpCopiarEditar$pdo = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $pass);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

• PDO::ATTR_ERRMODE se activa para ver fácilmente los errores.
• La conexión usa UTF-8 para evitar problemas con caracteres especiales.

📌 2. Generación del enlace único (generator.php)

Lógica:
Queríamos ofrecer una forma sencilla y segura para compartir configuraciones únicas. Por eso generamos un código único utilizando funciones seguras de PHP.

Explicación del código:

phpCopiarEditar$unique_code = substr(md5(uniqid(rand(), true)), 0, 8);

• uniqid(rand(), true) genera una cadena aleatoria basada en la hora actual y un número aleatorio.
• md5 transforma esa cadena en un hash seguro.
• substr limita el tamaño para facilitar compartir enlaces.

📌 3. Almacenamiento de configuración en MySQL

Lógica:
Cada configuración se guarda para ser recuperada después, por eso almacenamos todos los parámetros del juego en la tabla troll_config.

Explicación del código:

phpCopiarEditar$sql = "INSERT INTO troll_config 
        (question, btn1_text, btn2_text, tricky_button, distance, unique_code, created_at) 
        VALUES (:q, :b1, :b2, :tb, :dist, :uc, NOW())";

• Utilizamos parámetros preparados (:q, :b1...) para seguridad.
• NOW() permite registrar cuándo fue creada la configuración, útil para auditoría o estadísticas.

📌 4. Recuperación de configuración en tiempo real (game.php)

Lógica:
Al visitar el enlace único, necesitamos obtener los parámetros previamente guardados para renderizar la interfaz dinámica del juego.

Explicación del código:

phpCopiarEditar$stmt = $pdo->prepare("SELECT * FROM troll_config WHERE unique_code = :uc LIMIT 1");
$stmt->execute([':uc' => $code]);

• Recuperamos la configuración exacta con el código único.
• LIMIT 1 para mejorar rendimiento ya que esperamos un solo resultado.

📌 5. Posicionamiento dinámico del botón tricky (JavaScript)

Lógica:
El botón tricky debe moverse continuamente, evitando el puntero del mouse del usuario para hacer imposible su clic.

Explicación del código:

jsCopiarEditarfunction moverBotonRandom(button) {
    const randomX = Math.floor(Math.random() * (maxX - padding)) + padding;
    const randomY = Math.floor(Math.random() * (maxY - padding)) + padding;
    button.style.left = randomX + 'px';
    button.style.top = randomY + 'px';
}

• Usamos Math.random() para generar posiciones aleatorias dentro de la ventana, asegurando que el botón sea siempre visible y accesible visualmente, pero difícil de alcanzar.

📌 6. Lógica del temporizador automático

Lógica:
Queríamos agregar dramatismo y tensión al juego, por eso el botón fijo inicia una cuenta regresiva cuando el usuario se acerca al botón tricky.

Explicación del código:

jsCopiarEditarlet timerStarted = false;
function startCountdown(button) {
    if (timerStarted) return;
    timerStarted = true;
    button.disabled = true;
    let currentTime = 10;
    button.innerText = `${originalText} (${currentTime} seg)`;

    const countdownInterval = setInterval(() => {
        currentTime--;
        button.innerText = `${originalText} (${currentTime} seg)`;
        if (currentTime <= 0) {
            clearInterval(countdownInterval);
            completarTest();
        }
    }, 1000);
}

• setInterval() maneja la lógica del temporizador.
• Usamos button.disabled para evitar que el usuario interrumpa la cuenta regresiva.
• Al finalizar el tiempo, invocamos la función para mostrar el emergente final.

📌 7. Mensaje emergente personalizado

Lógica:
Quisimos dar feedback claro y personalizado al usuario al finalizar la experiencia.

Explicación del código:

jsCopiarEditarfunction completarTest() {
    alert('Muchas gracias por tu elección de ' + fixedButtonOriginalText + ', ya fue enviada la notificación a quien te envió la consulta.');
    screenContainer.style.display = 'none';
    overlayMessage.style.display = 'flex';
}

• El mensaje incluye el texto original del botón elegido, proporcionando claridad y confirmación al usuario.
• Ocultamos la interfaz de juego para centrar la atención del usuario en el mensaje emergente.

🚩 Consejos finales para tu “How-To”:

• Usa fragmentos cortos de código acompañados de explicaciones sencillas y directas.
• Puedes incluir ilustraciones gráficas (diagramas o flujos de trabajo) para explicar la lógica visualmente.
• Incluye anotaciones en el código resaltando decisiones de diseño importantes (seguridad, rendimiento, UX).