Aplicación de Troleo en PHP y MySQL

Aplicación de Troleo en PHP y MySQL

🔥 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

Aplicación de Troleo en PHP y MySQL puedes verla en mi sitio web confiuroweb.com
https://github.com/configuroweb/tetrotroleo
0 forks.
0 stars.
0 open issues.

Recent commits:

📌 ¿Qué vamos a crear?

📌 Requisitos previos

📌 Estructura básica del proyecto

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

📌 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:

📌 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)

📌 Resolución de problemas frecuentes (FAQs)

📌 Conclusión y recursos adicionales

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

Recursos recomendados:

🧠 “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);

📌 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);

📌 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())";

📌 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]);

📌 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';
}

📌 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);
}

📌 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';
}

🚩 Consejos finales para tu “How-To”:

🤖 Asistente Virtual
¡Hola! 👋

¿En qué te puedo ayudar hoy?