Tutorial: Criar seu próprio jogo de trivia

cjdga · 26/05/2014

Olá betas, neste tutorial ensino a criar uma trivia simples com PHP e jQuery Mobile, muito adaptável a tablets.

algumas capturas:

Ver o anexo 27702
Ver o anexo 27703
Ver o anexo 27704
Ver o anexo 27705

Com tudo o que foi visto, temos um jogo de trivia simples para poder aprender um pouco mais sobre a lógica na programação, porque já não se trata apenas de fazer coisas, mas de saber fazê-las e de forma rápida, que é o importante. Com estes exemplos, embora confundam um pouco, é possível ir pegando a lógica de programação.
Deixo os arquivos para download e espero que seja útil, um abraço.
https://mega.co.nz/#!rUBhjLwC!Yv5AYucMfKfX7ReYbkzW7gech1VFlWmKSn8Gwp-a1Vg

aqui uma breve explicação

banco de dados e tabelas

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 */;

O projeto
Criamos uma pasta em nosso servidor local que chamaremos de trivial, dentro dela mais duas, a pasta classes e a pasta instancias.

Dentro de classes criamos dois arquivos, um chamado conexion.class.php e outro chamado trivial.class.php.
Com isso estamos bem, agora simplesmente criamos um arquivo chamado index.php e o colocamos na raiz da aplicação, esta será a primeira imagem do tutorial, então o abrimos e colocamos o seguinte 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 dissemos, esta página será aberta como um dialog, então, embora realmente seja uma página com jQuery Mobile, ela abrirá como um dialog.
Criamos um arquivo chamado dialog.php e o salvamos na raiz da aplicação, dentro colocamos o seguinte 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>

E isso é tudo :encouragement:

kanikase · 26/05/2014

Abrindo o bloco de notas :devilish:

Voldemorth · 26/05/2014

Aplaudindo de pé estes tutoriais

juandajd · 26/05/2014

EXATAMENTE O QUE EU ESTAVA PROCURANDO :encouragement:

Voldemorth · 26/05/2014

Deixo uma ideia para vocês: usando slim ou o framework que preferirem, poderiam criar um pequeno backend para carregar as perguntas sem ter que tocar diretamente no banco de dados para fazer isso.

juandajd · 26/05/2014

dá para colocar anúncios no jogo?

cjdga · 26/05/2014

Voldemorth disse:
Deixo uma ideia para vocês: usando slim ou o framework que preferirem, poderiam criar um pequeno backend para carregar as perguntas sem ter que tocar diretamente no banco de dados para fazer isso.

uma ideia muito boa :encouragement:

Don Gato · 26/05/2014

O Notepad++ :encouragement:

Obrigado [MENTION=45538]cjdga[/MENTION]!

kanikase disse:
Abrindo o bloco de notas :devilish:

kanikase · 26/05/2014

Marcelord disse:
O Notepad++ :encouragement:

Obrigado [MENTION=45538]cjdga[/MENTION]!

Não tenho notepad nem brackets nem nada disso, este PC é da minha mãe e ela não me deixa instalar nada 🙁

Cicklow · 26/05/2014

...Dentro de classes criamos dois arquivos, um chamado conexion.class.php e outro chamado trivial.class.php....

Nem as explicações dos códigos PHP nem nada, e o que adicionamos a esses arquivos que você menciona???... 😛 ... você só copiou e colou o código de algumas coisas (do rar) e pronto... Nem como configurar nem nada...

Boa intenção... mas mal estruturado! 😕

palalo · 26/05/2014

me parece conhecido

Inserir CODE, HTML ou PHP:

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

Tutorial: Criar seu próprio jogo de trivia

cjdga

kanikase

Voldemorth

juandajd

Voldemorth

juandajd

cjdga

Don Gato

kanikase

Cicklow

palalo

Tópicos similares