Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Como hacer que un juego en javascript se conecte a una base de datos

preguntó
Web
584 Vistas
2 Respuestas
abierta

Buenas estoy desarrollando el siguiente jueguecillo que podeis encontrar en la siguiente pagina http://juegocaritas.comuf.com/ , muy simple ya que consta solo de unas cuantas funciones escritas en javascript, y ahora queria implementarle una tabla con las maximas puntuaciones a las que han llegado los usuarios,estos niveles actualmente los tengo en una variable en javascript, cual seria la manera mas facil de pasarlos a una base de datos para luego poder mostrar los numeros mas altos en una tabla, al lado del nombre del jugador?
por si alguno tiene problemas al ver la pagina aqui les dejo el codigo:

<!doctype html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet" type="text/css">
<style>
body{
    background: rgba(8,213,240,1) no-repeat;
    background: -moz-linear-gradient(top, rgba(8,213,240,1) 0%, rgba(8,213,240,1) 7%, rgba(50,189,207,1) 23%, rgba(48,170,207,1) 34%, rgba(68,123,219,1) 49%, rgba(49,111,204,1) 58%, rgba(106,120,176,1) 80%, rgba(122,106,176,1) 100%) no-repeat;
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(8,213,240,1)), color-stop(7%, rgba(8,213,240,1)), color-stop(23%, rgba(50,189,207,1)), color-stop(34%, rgba(48,170,207,1)), color-stop(49%, rgba(68,123,219,1)), color-stop(58%, rgba(49,111,204,1)), color-stop(80%, rgba(106,120,176,1)), color-stop(100%, rgba(122,106,176,1)));
    background: -webkit-linear-gradient(top, rgba(8,213,240,1) 0%, rgba(8,213,240,1) 7%, rgba(50,189,207,1) 23%, rgba(48,170,207,1) 34%, rgba(68,123,219,1) 49%, rgba(49,111,204,1) 58%, rgba(106,120,176,1) 80%, rgba(122,106,176,1) 100%) no-repeat;
    background: -o-linear-gradient(top, rgba(8,213,240,1) 0%, rgba(8,213,240,1) 7%, rgba(50,189,207,1) 23%, rgba(48,170,207,1) 34%, rgba(68,123,219,1) 49%, rgba(49,111,204,1) 58%, rgba(106,120,176,1) 80%, rgba(122,106,176,1) 100%) no-repeat;
    background: -ms-linear-gradient(top, rgba(8,213,240,1) 0%, rgba(8,213,240,1) 7%, rgba(50,189,207,1) 23%, rgba(48,170,207,1) 34%, rgba(68,123,219,1) 49%, rgba(49,111,204,1) 58%, rgba(106,120,176,1) 80%, rgba(122,106,176,1) 100%) no-repeat;
    background: linear-gradient(to bottom, rgba(8,213,240,1) 0%, rgba(8,213,240,1) 7%, rgba(50,189,207,1) 23%, rgba(48,170,207,1) 34%, rgba(68,123,219,1) 49%, rgba(49,111,204,1) 58%, rgba(106,120,176,1) 80%, rgba(122,106,176,1) 100%) no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08d5f0', endColorstr='#7a6ab0', GradientType=0 );
    background-size: 800% 800%;
}

img{
    position:absolute;
}
div{
    position: absolute;
    height: 500px;
    width: 500px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
#rightside {
    position: absolute;
    left: 500px;
    border-left: 1px solid black;
    }
#nivel{
    position:absolute;
    text-align:center;
    top:700px;
    width:1000px;
}
#caras{
    position:absolute;
    text-align:center;
    top:720px;
    width:1000px;
}
#halerta{
    position:absolute;
    text-align:center;
    top:750px;
    width:1000px;

    }
h1{
    font-family: 'Indie Flower', cursive;
    }
p{
    font-family: 'Indie Flower', cursive;
    }
button {

    position:absolute;
    text-align:center;
    top:825px;
    left:400px;
    width:200px;
    font-family: 'Indie Flower', cursive;
    border-top: 1px solid #a398f5;
    background: #65d6d0;
    background: -webkit-gradient(linear, left top, left bottom, from(#453e9c), to(#65d6d0));
   background: -webkit-linear-gradient(top, #453e9c, #65d6d0);
   background: -moz-linear-gradient(top, #453e9c, #65d6d0);
   background: -ms-linear-gradient(top, #453e9c, #65d6d0);
   background: -o-linear-gradient(top, #453e9c, #65d6d0);
   padding: 12px 24px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 19px;
   text-decoration: none;
   vertical-align: middle;
   }
button:hover {
   border-top-color: #3354a6;
   background: #3354a6;
   color: #ffffff;
   }
button:active {
   border-top-color: #2d94d4;
   background: #2d94d4;
   }
   }

</style>
<script>
var number_of_faces=5;
var nivel=1;
function generate_faces(){
    "use strict";
    var the_body=document.getElementById("thebody");
    var left_side=document.getElementById("leftside");
    var right_side=document.getElementById("rightside");
    if(boleean1==true){
        alert("1");
        the_body.removeChild(boton);
        var boleean1=false;
        }
    function fnivel(){
        "use strict";
        var onivel=document.getElementById("nivel");
        onivel.innerHTML="Nivel: "+nivel;
    }
    function alerta(mensaje){
        "use strict";
        var oalerta=document.getElementById("halerta");
        oalerta.innerHTML=""+mensaje;
        }
    function fcaras(){
        "use strict";
        var ocaras=document.getElementById("caras");
        ocaras.innerHTML="Numero de caras: "+number_of_faces;
    }
    var bucle1;
    bucle1=setInterval(fnivel(),2000);
    var bucle2;
    bucle2=setInterval(fcaras(),2000);
    for(var i=number_of_faces;i>0;i--){
        var carita=document.createElement("img");
        carita.src="http://juegocaritas.comuf.com/smilea.png";
        var numero1=Math.floor(Math.random()*400);
        var numero2=Math.floor(Math.random()*400);
        carita.style.left=numero1+"px";
        carita.style.top=numero2+"px";
        left_side.appendChild(carita);
    }
    var left_side_images=left_side.cloneNode(true);
    left_side_images.removeChild(left_side_images.lastChild);
    right_side.appendChild(left_side_images);
    left_side.lastChild.onclick= function nextlevel(event){
        event.stopPropagation();
        number_of_faces+=5;
        nivel=nivel+1;
        while(left_side.firstChild){
            left_side.removeChild(left_side.firstChild);
        }
        while(right_side.firstChild){
            right_side.removeChild(right_side.firstChild);
        }
        generate_faces();
        alerta("Buen trabajo, nivel superado");

    }
    left_side.onclick = function gameOver() {
        alerta("Te has equivocado :( ,el juego ha terminado");
        left_side.onclick = null;
        left_side.lastChild.onclick = null;
        left_side.lastChild.src="http://juegocaritas.comuf.com/smileb.png";
        clearInterval(bucle1);
        clearInterval(bucle2);
        var boton=document.createElement("button");
        boton.type="button";
        boton.innerHTML="volver a jugar";
        boton.onclick= function reseteo(){
            while(left_side.firstChild){
                left_side.removeChild(left_side.firstChild);
            }
            while(right_side.firstChild){
                right_side.removeChild(right_side.firstChild);
            }
            number_of_faces=5;
            boton.parentNode.removeChild(boton);
            alerta("");
            generate_faces();
        }
        the_body.appendChild(boton);        
    }
    right_side.onclick=function error(){
        var right_side=document.getElementById("rightside");
        alerta("Debes hacer click en la cara que sobra del lado izquierdo");
    }
}
</script>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>

<body id="thebody" onLoad="generate_faces()">
<h1>Juego de las caras</h1>
<p>Pulsa en la cara de la derecha que sobra en el lado izquierdo</p>
<div id="leftside" ></div>
<div id="rightside"></div>
<p id="nivel">fallo en el javascript</p>
<p id="caras"></p>
<h1 id="halerta"></h1>
</body>
</html>
por oscar rodriguez (690 puntos) en Web

2 Respuestas

2votos

bl4z3r Puntos16850

Para implementar un sistema de puntuaciones necesitas tener un servicio de registracion de usuario, cosa que no veo en el codigo.

PD: Te recomiendo que hagas 2 cosas con tu codigo:

  1. Mueve los estilos a archivos css.
  2. Mueve los scripts a archivos js.
por bl4z3r (16.850 puntos)

3votos

cobasESP Puntos19650

Primero, creo que deberias hacer lo que @bl4z3r te recomienda, ya que en un juego hay mucho código y es mejor tenerlo lo mas organizado posible, y respondiendo a tu pregunta es fácil, usa jQuery e implementalo en tu código, y usando su funcion $.Ajax(){} puedes mandar datos a traves de GET o POST a un php y este hace el insert en la tabla, te pongo un ejemplo:

var variable1 = loquesea; //aqui vas cargando las variables que vas a guardar.
$.ajax({
     type: "GET",
     url: "guardarjuego.php?var1="+variable1, //aqui las vas añadiendo a la url
     success: function(d) { //d te devuelve algo en funcion de lo que suceda en el script php
        if (d == 1){ //si se ha guardado bien devuelvo 1 y sino, error al guardar
             alert("Guardado con éxito");
        }else{
             alert("Error al guardar");
        }
     }
});

Esto lo apañas tu para que se adapte a tu código y listo, no es muy complicado, el php solo recoges las variables y haces el insert son 4 lineas.

Aun asi, encontrarás muchos mas ejemplo en la documentacion oficial, aunque este en ingles se entiende bien. http://api.jquery.com/jquery.ajax/

por cobasESP (19.650 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta