1
Programación Web / duda sobre jquery
« en: Marzo 24, 2016, 10:37:30 pm »
debo de hacer un juego basico en donde un muñeco ordenado por el teclado, se mueva por un laberinto.
el laberinto lo debo de hacer con divs , el muñeco se mueve y todo pero ,no choca con los divs(paredes del laberinto), los trespasa o funicona de la forma que no es.
alguien se sabe el truco para que funcione.
debo usar jquery obligado, use una libreria para que funcione.
SOLO necesito que me expliquen como debo de hacerlo. gracias
codigo html
codigo css
codigo jquery
el laberinto lo debo de hacer con divs , el muñeco se mueve y todo pero ,no choca con los divs(paredes del laberinto), los trespasa o funicona de la forma que no es.
alguien se sabe el truco para que funcione.
debo usar jquery obligado, use una libreria para que funcione.
SOLO necesito que me expliquen como debo de hacerlo. gracias
codigo html
Código: Text
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Ejemplo 3 - Movimiento</title>
- <script src="ext/jquery.min.js"></script>
- <script src="js/bart.js"></script>
- <link rel="stylesheet" type="text/css" href="css/estilo2.css">
- </head>
- <body>
- <div id="c"></div>
- <div id="d"></div>
- <div class="todas" id="principal" width="100"></div>
- </body>
- </html>
Código: CSS
- .todas{
- position:relative;
- top:0px;
- left:0px;
- }
- body{
- background-color:#CCC;
- }
- #c{
- position: relative;
- width: 1100px;
- height: 80px;
- background-color: red;
- }
- #d{
- position: relative;
- top: 100px;
- left: 200px;
- width: 400px;
- height: 80px;
- background-color:blue;
- }
Código: Javascript
- $(document).ready(function(e) {
- pos_top = 0;
- pos_left = 0;
- tamano = 100;
- $("#principal").html("<img src='image/stop.jpg'>");
- $("body").keypress(function(e) {
- if(e.keyCode == "" || e.keyCode === undefined){
- letra = e.charCode;
- }else{
- letra = e.keyCode;
- }
- switch(letra){
- case 119:
- //arriba
- if(pos_top>0){
- pos_top -= 8;
- $("#principal").css("top", pos_top+"px");
- $("#principal").html("<img src='image/arriva.gif'>");
- }
- break;
- case 115:
- //abajo
- if(pos_top<500){
- pos_top += 8;
- $("#principal").css("top", pos_top+"px");
- $("#principal").html("<img src='image/abajo.gif'>");
- }
- break;
- case 97:
- //izquierda
- if(pos_left>0){
- pos_left -= 8;
- $("#principal").css("left", pos_left+"px");
- $("#principal").html("<img src='image/izquierda.gif'>");
- }
- break;
- case 100:
- //derecha
- if(pos_left<1200){
- pos_left += 8;
- $("#principal").css("left", pos_left+"px");
- $("#principal").html("<img src='image/derecha.gif'>");
- }
- break;
- case 103:
- //grande
- if(tamano < 300){
- tamano += 10;
- $("#principal").attr("width", tamano);
- }
- break;
- case 112:
- //pequeño
- if(tamano > 30){
- tamano -= 10;
- $("#principal").attr("width", tamano);
- }
- break;
- }
- });
- $("body").keyup(function(e) {
- $("#principal").html("<img src='image/stop.jpg'>");
- });
- });