Taller HTML5: EJEMPLOS

JQUERY (SITIO OFICIAL)

DEMOS (EJEMPLOS)

1. Juego Adivina (DOM)

adivina-1.html
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
    <title>Juego del Adivina</title>
<script>
var oculto;
 
function init() {
    oculto = Math.floor(Math.random()*1001);
}
 
function msj(str) {
    display = document.getElementById("txt"); // DOM
    display.innerHTML = str;
//    nodo = document.createTextNode(str);
//    display.replaceChild(nodo,display.firstChild);
}
 
function procesa(usuario) {
    if ( oculto==usuario ) {
        msj("Felicidades! Ganaste!");
        init();
    } else if (oculto < usuario) {
        msj("Anota núm. menor");
    } else {
        msj("Anota núm. MAYOR");
    }
}
 
</script>
</head>
<body onload="init();">
<form>
    <div id="txt">Adivina un numero del 1 al 1000</div>
    Número: <input name="num" type="number" maxlength="4" />
    <input type="button" onclick="procesa(num.value);" value="Aceptar"></input>
</form>
</body>
</html>

2. Juego Adivina (jQuery)

adivina-jq.html
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
    <title>Juego del Adivina</title>
<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
var oculto;
 
function init() {
    oculto = Math.floor(Math.random()*1001);
}
 
function msj(str) {
//    display = document.getElementById("txt"); // DOM
//    nodo = document.createTextNode(str);
//    display.replaceChild(nodo,display.firstChild);
    $("#txt").html(str); // jQuery
}
 
function procesa(usuario) {
    if ( oculto==usuario ) {
        msj("Felicidades! Ganaste!");
        init();
    } else if (oculto < usuario) {
        msj("Anota núm. menor");
    } else {
        msj("Anota núm. MAYOR");
    }
}
 
</script>
</head>
<body onload="init();">
<form>
    <div id="txt">Adivina un numero del 1 al 1000</div>
    Número: <input name="num" type="number" maxlength="4" />
    <input type="button" onclick="procesa(num.value);" value="Aceptar"></input>
</form>
</body>
</html>

3. Juego Adivina (jQuery Mobile+SVG)

adivina-svg.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Adivina (jQuery+SVG)</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
 
 var cuenta, oculto;
 var max_intento = 12; // No. máx. intentos
 
function init( chg ) // (re)inicia juego
{
    if ( chg ) // change Page?
        $.mobile.changePage($("#home"));
    cuenta = 0;
    oculto = Math.floor(Math.random()*1001);
    display("Adivina un número del 1 al 1000","rgba(102,51,51,0.2)",null);
    $("#num").attr("value",""); // borrar entrada
} // init
 
function display( msj, color, hi)
{
    $("#txt").text((cuenta>0?(cuenta+') '):'')+msj); // msj 
    $("#fondo").attr("fill",color); // color
    if (hi==null) // inicio=hide-arrow
        $("#arrow").attr({transform:"rotate(90,32,32) translate(0,10)",fill:"#663333"});
    else if (hi) // mayor=up-arrow
        $("#arrow").attr({transform:"translate(-10,0)",fill:"#003f7f"} );
    else // menor=down-arrow
        $("#arrow").attr({transform:"rotate(180,32,32) translate(10,0)",fill:"orange"});
} // display
 
function finPage( msj, win )
{
    $.mobile.changePage($("#fin"),{reverse:true}); // page #fin
    $("#aviso").text( msj ); // display msj
    if (win)
        $("#hand").attr("transform","");
    else
        $("#hand").attr("transform","rotate(180,24,32)");
}// finPage
 
function procesa( num ) // procesa número capturado
{
    if ( num<1 || num>1000 ) // Validar
    {
        alert("Número incorrecto\nDebe ser del 1 al 1000");
        $("#num").attr("value","").focus();
        return;
    }
    cuenta++; // incrementa no. intentos
    if ( cuenta < max_intento ) // aun puede adivinar?
    {
        if ( num < oculto )
            display("Anota un número MAYOR","rgba(0,68,68,0.2)",true);
        else if ( num > oculto )
            display("Anota un número menor","rgba(68,0,68,0.2)",false);
        else // Ganador: cambiar pantalla & mensaje
        {
            finPage("G-A-N-A-S-T-E! en "+cuenta+" intentos.",true);
            return;
        }
        $("#num").attr("value","").focus(); // activar+borrar entrada
    }
    else //  intentos agotados!
        finPage("LO SIENTO.. era "+oculto,false); // pantalla & mensaje
} // procesa
 
</script>
</head>
<body onload="init(false);">
<section id="home" data-role="page">
    <div data-role="header">
        <h1>Adivina Número</h1>
    </div>
    <ul data-role="listview">
        <li align="center"><center>
            <svg width="320" height="64" xmlns="http://www.w3.org/2000/svg">
                <rect id="fondo" x="62" y="0" width="258" height="64" fill="black" />
                <path id="arrow" transform="" fill="#003f7f" d="M 29 8 L 8 30 L 19 30 L 19 52 L 40 52 L 40 30 L 52 30 L 29 8 Z" />
                <text id="txt" font-weight="bold" font-family="Sans-serif" font-size="16px" x="72" y="39" stroke-width="0" fill="#000000">
                </text>
            </svg></center>
        </li>
        <li>
            <form>
                <input id="num" type="number" min="1" max="1000" value="" />
                <input type="button" onclick="procesa(num.value)" value="Aceptar" />
            </form>
        </li>
    </ul>
</section>
<section id="fin" data-role="page">
    <div data-role="header">
        <h1>Adivina Número</h1>
    </div>
    <ul data-role="listview">
        <li>
            <center>
            <svg width="310" height="64" xmlns="http://www.w3.org/2000/svg">
                <path id="hand" mask="none" stroke-linecap="round" stroke-linejoin="round" transform="" fill="#ffd4aa" stroke="#000000" stroke-width="3"
                    d="M 1 37 C 1 37 5 36 8 31 C 10 29 11 25 12 22 C 13 21 13 20 17 18 C 19 17 23 14 25 9 C 25 7 24 3 28 3 C 33 3 33 7 33 10 C 33 15 29 19 29 19 L 25 25 C 25 25 27 25 31 25 C 34 25 37 24 41 26 C 51 31 43 34 43 34 C 48 38 43 42 43 42 C 47 48 41 50 41 50 C 43 50 46 54 40 57 C 40 57 33 60 29 60 C 27 61 20 61 14 58 C 8 57 9 59 4 60" />
                <text id="aviso" font-weight="bold" font-family="Sans-serif" font-size="16px" x="70" y="39" stroke-width="0" fill="#000000">
                </text>
            </svg>
            </center>
        </li>
        <li>
            <form>
                <input type="button" onclick="init(true)" value="JUGAR OTRA VEZ" />
            </form>
        </li>
    </ul>
</section>
</body>
</html>

4. Juego Adivina (jQuery+Canvas+Giroscopio)

adivina-gyro.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Adivina (Canvas+Giroscopio)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
 
 var num;  // Numero
 var oculto; // Num. Aleatorio
 var count; // Intentos
 var MAX_COUNT = 15; // No Max Intentos
 var min = 1;
 var max = 1000;
 var ctx; // Canvas
 var c180=Math.PI, c30=c180/6.0, c360=c180*2; // arc: 30º, 180º y 360º
 var beta=0, gamma=0; // Gyroscope
 
function setup()
{
 if (window.DeviceMotionEvent) {
  window.ondeviceorientation = function(event) {
      beta = Math.round(event.beta); // (-180, 180)
      gamma = Math.round(event.gamma); // (-90,90)
  }  
  setInterval( function () {
   range = max - min + 1;
   med = Math.round(range/2); 
   centro = min + med;
   paso = med/40.0;
   if (gamma<40 && gamma>-40)
     delta = centro + Math.round(gamma*paso); // Real=12.5 --> Fix=13
   else if (gamma<=180&&gamma>=140)
     delta = centro - Math.round((gamma-180)*paso);
   else if (gamma<-140&&gamma>=-180)
     delta = centro - Math.round((gamma+180)*paso);
   if (delta>1000) delta=1000;
   if (delta<1) delta=1;
   // See http://jquerymobile.com/demos/1.0.1/docs/forms/slider/methods.html
   $("#slide").val(delta).slider("refresh");
  }, 100);
 }
 ctx = document.querySelector('canvas').getContext('2d');  // Canvas
 cara(0.8);
 init(); // Start Game
}
 
function cara(escala) {
 cc = 60; // coord. centrales cx=cy (60,60)
 ctx.clearRect(0,0,120,120);
 ctx.beginPath(); // Cabeza
 ctx.strokeStyle = "#334";
 ctx.fillStyle = "rgba(255,255,255,0.6)";
 ctx.lineWidth = 3;
 ctx.arc(cc,cc,50*escala,0,c360,true);
 ctx.fill();
 ctx.stroke();
 ctx.beginPath(); // Rostro: Ojos
 ctx.strokeStyle = "#335";
 ctx.fillStyle = "black";
 ctx.arc(cc-15*escala,cc-5*escala,6*escala,0,c360,true);
 ctx.fill();
 ctx.moveTo(cc+15*escala,cc-5*escala);
 ctx.arc(cc+15*escala,cc-5*escala,6*escala,0,c360,true);
 ctx.fill();
 ctx.stroke();
 ctx.beginPath(); // Rostro: Sonrisa
 ctx.arc(cc,cc+5*escala,20*escala,c30,c180-c30,false);
 ctx.stroke();
}
 
function init() {
  count=0;  inf(1);  sup(1000);
  $("#slide").val(500).slider("refresh");
  oculto = 1+Math.round(Math.random()*1000);
  print("OK");
}
 
function inf(n) { $("#slide").attr("min",min=n); }
 
function sup(n) { $("#slide").attr("max",max=n); }
 
function input() { return parseInt( $("#slide").val() ); }
 
function print(msj) { $("#boton").text(msj); }
 
function pulsa() // Procesa eventos
{
  ++count;
  print("Intento #"+count);
  num = input();
  if ( count > MAX_COUNT ) {
   print("PERDISTE! el numero era "+oculto);
   setTimeout(init,3000);
   return;
  }
  if ( num > oculto ) {
    cara(0.5);
    sup(num);
  } else if ( num < oculto ) {
    cara(1.0);
    inf(num);
  } else {
    print("GANASTE! en "+count+" intentos");
    setTimeout(init,3000);
  }
}
</script>
</head>
<body onload="setup()">
 <section id="home" data-role="page">
  <div data-role="header">
      <h1>Adivina Número</h1>
  </div>
  <ul data-role="listview">
   <li>
    <center><canvas id="face" width="120" height="120">
     Actualiza tu navegador para disfrutar del juego (versión más reciente de Chrome, Safari, Firefox, Opera).
    </canvas></center>
   <li>
    <form>
     <div data-role="fieldcontain" width="100%" class="ui-hide-label">
      <label for="slide">Número:</label>
      <input id="slide" type="range" min="1" max="1000" value="500" style="width:70px" />
      <a id="boton" data-role="button" href="#" onclick="pulsa()" style="height:36px"></a>
     </div>
    </form>
   </li>
  </ul>
 </section>
</body>
</html>
html5_-_juego_adivina.txt · Última modificación: 2012/03/24 01:51 por apacheco
 
Excepto donde se indique lo contrario, el contenido de esta wiki se autoriza bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki