Tutorial: crear tu propio juego trivial

cjdga · 26 May 2014

Holaa betas en este tuto te enseño crear una trivia simple con php y jquery mobile muy adaptable a tablets

algunas capturas:

Ver el archivo adjunto 27702
Ver el archivo adjunto 27703
Ver el archivo adjunto 27704
Ver el archivo adjunto 27705

Con todo lo anterior tenemos un sencillo juego de trivial para poder aprender algo más sobre la lógica en la programación, porque ya no se trata de hacer cosas, sino de saber hacerlas y de forma rápida que es lo importante, y con estos ejemplos, aunque marean un poco, se puede ir cogiendo lógica de programación.
Dejo los archivos para descargar y espero que sea de utilidad, un saludo.
https://mega.co.nz/#!rUBhjLwC!Yv5AYucMfKfX7ReYbkzW7gech1VFlWmKSn8Gwp-a1Vg

aca una breve explicación

base de datos y tablas

PHP:

CREATE DATABASE trivial
 
-- phpMyAdmin SQL Dump
-- version 3.5.2.2
-- http://www.phpmyadmin.net
--
-- Servidor: 127.0.0.1
-- Tiempo de generación: 09-06-2013 a las 09:38:36
-- Versión del servidor: 5.5.27
-- Versión de PHP: 5.4.7
 
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
 
 
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
 
--
-- Base de datos: `trivial`
--
 
-- --------------------------------------------------------
 
--
-- Estructura de tabla para la tabla `preguntas`
--
 
CREATE TABLE IF NOT EXISTS `preguntas` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pregunta` varchar(255) COLLATE utf8_spanish_ci NOT NULL,
  `correcta` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=9 ;
 
--
-- Volcado de datos para la tabla `preguntas`
--
 
INSERT INTO `preguntas` (`id`, `pregunta`, `correcta`) VALUES
(1, '¿En que año estamos?', 3),
(2, 'Nombre del presidente del gobierno de España', 10),
(3, 'Ganador de la liga de España 2013', 15),
(4, 'Ganador mundial f1 2012', 11),
(5, 'Como se llama el muñeco naranja de Barrio Sesamo', 17),
(6, 'Como se llama la pasta cuadrada rellena', 20),
(7, 'Cuántas películas tiene la saga de harry potter', 25),
(8, 'En que año salio el disco de Manolo García pájaros de barro', 27);
 
-- --------------------------------------------------------
 
--
-- Estructura de tabla para la tabla `ranking`
--
 
CREATE TABLE IF NOT EXISTS `ranking` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(100) COLLATE utf8_spanish_ci NOT NULL,
  `puntuacion` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=4 ;
 
--
-- Volcado de datos para la tabla `ranking`
--
 
INSERT INTO `ranking` (`id`, `nombre`, `puntuacion`) VALUES
(1, 'Carla', 50),
(2, 'Pepe', 40),
(3, 'Israel', 270);
 
-- --------------------------------------------------------
 
--
-- Estructura de tabla para la tabla `respuestas`
--
 
CREATE TABLE IF NOT EXISTS `respuestas` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `id_pregunta` int(11) NOT NULL,
  `respuesta` varchar(255) COLLATE utf8_spanish_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=29 ;
 
--
-- Volcado de datos para la tabla `respuestas`
--
 
INSERT INTO `respuestas` (`id`, `id_pregunta`, `respuesta`) VALUES
(1, 1, '2011'),
(2, 1, '2012'),
(3, 1, '2013'),
(8, 2, 'Zapatero'),
(9, 2, 'Aznar'),
(10, 2, 'Rajoy'),
(11, 4, 'Vetel'),
(12, 4, 'Alonso'),
(13, 4, 'Hamilton'),
(14, 3, 'Atletico de Madrid'),
(15, 3, 'Barcelona'),
(16, 3, 'Madrid'),
(17, 5, 'Epi'),
(18, 5, 'Blas'),
(19, 5, 'La gallina caponata'),
(20, 6, 'ravioli'),
(21, 6, 'tortellini'),
(22, 6, 'macarron'),
(23, 7, '3'),
(24, 7, '6'),
(25, 7, '8'),
(26, 8, '1995'),
(27, 8, '1998'),
(28, 8, '2000');
 
-- --------------------------------------------------------
 
--
-- Estructura de tabla para la tabla `users`
--
 
CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(100) COLLATE utf8_spanish_ci NOT NULL,
  `puntos` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `nombre` (`nombre`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=13 ;
 
--
-- Volcado de datos para la tabla `users`
--
 
INSERT INTO `users` (`id`, `nombre`, `puntos`) VALUES
(1, 'Israel', 20),
(2, 'Pepe', 40),
(12, 'Carla', 0);
 
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

El proyecto
Creamos una carpeta en nuestro servidor local que llamaremos trivial, dentro dos más, la carpeta clases y la carpeta instancias.

Dentro de clases creamos dos archivos, uno llamado conexion.class.php y otro llamado trivial.class.php.
Con eso estamos bien, ahora simplemente creamos un archivo llamado index.php y lo colocamos en la raíz de la aplicación, esta será la primera imagen del tutorial, así que lo abrimos y colocamos el siguiente código.

PHP:

<!DOCTYPE html> 
<html>
<head>
    <meta charset="UTF-8" />
    <title>Juego de trivial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript">
    //VALIDAMOS SI HAN INTRODUCIDO UN NOMBRE EN EL FORMULARIO DE INICIO-->
        $(document).ready(function(){
            $("#form").live('submit',function(){        
                if($("#nombre").val() == "")
                {
                    alert("Introduce tu nombre"); return false;
                 }else{
                     $("#form").submit();
                 }
            })              
        });
    </script>
</head>
 
<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed"><h1>Trivial</h1></div>
        <div data-role="content">
        <!--AL PULSAR APARECE UN DIALOG PARA EMPEZAR A JUGAR-->
        <div class="content-primary">    
            <ul data-role="listview">
                <li><a href="dialog.php" data-rel="dialog" data-transition="slidedown" data-theme="b">
                    <img src="trivial.jpg" />
                    <h3>Ciencias</h3>
                    <p>Preguntas sobre ciencias</p>
                </a></li>
                <li><a href="dialog.php" data-rel="dialog" data-transition="slidedown" data-theme="b">
                    <img src="trivial.jpg" />
                    <h3>Deportes</h3>
                    <p>Preguntas sobre deportes</p>
                </a></li>
                <li><a href="dialog.php" data-rel="dialog" data-transition="slidedown" data-theme="b">
                    <img src="trivial.jpg" />
                    <h3>Historia</h3>
                    <p>Preguntas sobre historia</p>
                </a></li>
                <li><a href="dialog.php" data-rel="dialog" data-transition="slidedown" data-theme="b">
                    <img src="trivial.jpg" />
                    <h3>Infomática</h3>
                    <p>Preguntas sobre informática</p>
                </a></li>
            </ul>
        </div>
        </div>
        <div data-role="footer" data-position="fixed"><h6>Juega al trivial</h6></div>
    </div>
 
</body>
</html>

login
Como hemos dicho, esta página se abrirá como un dialog, así que aunque realmente sea una página con jQuery Mobile se abrirá como un dialog.
Creamos un archivo llamado dialog.php y lo guardamos en la raíz de la aplicación, dentro colocamos el siguiente código.

PHP:

<!DOCTYPE html> 
<html>
    <head>
    <meta charset="utf-8">
    <title>Juego de trivial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head> 
<body> 
<!--dialog que mostramos para iniciar sesión-->
<div data-role="page" class="dialog-actionsheet">
 
    <div data-role="content" data-theme="a">
        <!--establecemos data-ajax a false para que se haga la petición y redirección-->
        <form method="post" id="form" action="instancias/login.php" accept-charset="utf-8" data-ajax="false">
            <h3>Introduce tu nombre</h3>
            <p><label for="email">Nombre</label></p>
            <input type="text" name="nombre" id="nombre" data-role="button" data-theme="b" />  
            <input type="submit" class="submit" name="submit" data-role="button" value="Jugar" data-theme="b" />               
            <a href="index.php" data-role="button" data-rel="back" data-theme="a">Volver atrás</a>    
        </form>
    </div>
</div>
</body>
</html>

Y eso es todo :encouragement:

kanikase · 26 May 2014

A abrir el bloc de notas :devilish:

Voldemorth · 26 May 2014

Aplaudo de pie estos tutoriales

juandajd · 26 May 2014

JUSTO LO QUE BUSCABA :encouragement:

Voldemorth · 26 May 2014

Les dejo una idea usando slim o el framework que les apetezca podrían crearle un pequeño backend para cargar las preguntas sin tener que tocar directamente la base para hacerlo.

juandajd · 26 May 2014

al juego se le puede poner ads?

cjdga · 26 May 2014

Voldemorth dijo:
Les dejo una idea usando slim o el framework que les apetezca podrían crearle un pequeño backend para cargar las preguntas sin tener que tocar directamente la base para hacerlo.

una muy buena idea :encouragement:

Don Gato · 26 May 2014

El Notepad++ :encouragement:

¡Gracias [MENTION=45538]cjdga[/MENTION]!

kanikase dijo:
A abrir el bloc de notas :devilish:

kanikase · 26 May 2014

Marcelord dijo:
El Notepad++ :encouragement:

¡Gracias [MENTION=45538]cjdga[/MENTION]!

No tengo notepad ni brackets ni naa de eso, esta pc es de mi mama y no me deja instalarle nada

Cicklow · 26 May 2014

...Dentro de clases creamos dos archivos, uno llamado conexion.class.php y otro llamado trivial.class.php....

Ni las explicaciones de los codes PHP ni nada, y que le agregamos a esos files que mencionas???...

... solo copiaste pegaste el code de algunas cosas (del rar) y listo... Ni como configurarlo ni nada...

Buena intención... pero mal armado!

palalo · 26 May 2014

me parece conocido

Insertar CODE, HTML o PHP:

http://uno-de-piera.com/juego-de-trivial-con-php-y-jquery-mobile/