Morton 3 de junio de 2011 a las 08.22
   Imprimir artículo
elWebmaster.com

Crea un juego de Snake en tu sitio web con s贸lo jQuery y CSS


jquerywideAunque no lo creas, puedes realizar tu propia versi贸n del popular juego Snake y colocarla en tu sitio web. En este art铆culo te mostramos c贸mo hacerlo utilizando s贸lo jQuery y CSS, para que quienes visitan tu sitio puedan disfrutar de este cl谩sico de los videojuegos.

Fuente original del art铆culo: CSS3 Forum
Traducci贸n realizada por
elWebmaster.com

Haz clic aqu铆 para ver una demostraci贸n >>

Primero, colocamos el c贸digo jQuery:

  1. jQuery(document).ready(function() {
  2.  
  3.     var pressedArrow;
  4.     var tailCount = 1;
  5.     var snakeCount = 0;
  6.     var start = 0;
  7.     var speed = 300;
  8.     var speedIncrease = 1;
  9.     var points = 0;
  10.  
  11.     $(this).keypress(function(event) {
  12.         pressedArrow = event.which;
  13.         if (start == 0) {
  14.             start = 1;
  15.             speedIncreaseF();
  16.             go();
  17.         }
  18.     });
  19.  
  20.     $("body").append("<div id='playGround'><div id='snake'><!-- --></div><div id='points'></div></div>");
  21.  
  22.     function speedIncreaseF(){
  23.         speed -= speedIncrease;
  24.         setTimeout(speedIncreaseF, 500);
  25.     }
  26.  
  27.     function insertTail(){
  28.         $("#playGround").append("
  29.  
  30.  
  31. ");
  32.         $("#snakeTail_"+tailCount).css('left',  $("#snake").position().left + "px");
  33.         $("#snakeTail_"+tailCount).css('top', $("#snake").position().top + "px");
  34.         tailCount += 1;
  35.         points += 100;
  36.     }
  37.  
  38.      function intToHex(n){
  39.         n = n.toString(16);
  40.         if( n.length < 2)
  41.             n = "0"+n;
  42.         return n;
  43.      }
  44.  
  45.     function insertSnak(){
  46.         playGroundWidth = $("#playGround").width();
  47.         playGroundHeight = $("#playGround").height();
  48.         snakeWidth = $("#snake").width();
  49.         snakeHeight = $("#snake").height();
  50.  
  51.         countX = playGroundWidth/snakeWidth-1;
  52.         countY = playGroundHeight/snakeHeight-1;
  53.  
  54.         left_ = Math.floor(Math.random()*countX) * snakeWidth;
  55.         top_ = Math.floor(Math.random()*countY) * snakeHeight;
  56.  
  57.         if ($(".snak").length == 0)
  58.         {
  59.             var r = Math.floor(Math.random()*256);
  60.             var g = Math.floor(Math.random()*256);
  61.             var b = Math.floor(Math.random()*256);
  62.             $("#playGround").append("
  63.  
  64.  
  65. ");
  66.             $("#snak_"+snakeCount).css('left',left_+"px");
  67.             $("#snak_"+snakeCount).css('top',top_+"px");
  68.  
  69.             $("#snak_"+snakeCount).css("background", getHex(r,g,b));
  70.  
  71.             $("#playGround").css("-webkit-box-shadow", getHex(r,g,b) + "  0 0 6px");
  72.             $("#playGround").css("-moz-box-shadow", getHex(r,g,b) + "  0 0 6px");
  73.             $("#playGround").css("box-shadow", getHex(r,g,b) + "  0 0 6px");
  74.  
  75.             $('#points').text("Your points: " + points);
  76.         }
  77.      }
  78.  
  79.     function intToHex(n){
  80.     n = n.toString(16);
  81.     if( n.length < 2)
  82.         n = "0"+n;
  83.     return n;
  84.     }
  85.  
  86.      function getHex(r, g, b){
  87.         return '#'+intToHex(r)+intToHex(g)+intToHex(b);
  88.      }
  89.  
  90.     function go() {
  91.         if (start == 1) {
  92.             x = $("#snake").position().left;
  93.             y = $("#snake").position().top;
  94.             height = $("#snake").height();
  95.             width = $("#snake").width();
  96.  
  97.             insertSnak();
  98.  
  99.             for( i=1; i < tailCount; i++){
  100.                 tail = tailCount - i;
  101.                 if (tail == 1) {
  102.                     $("#snakeTail_1").css('left', x + "px");
  103.                     $("#snakeTail_1").css('top', y + "px");
  104.                 } else {
  105.                     $("#snakeTail_" + tail).css('left',  $("#snakeTail_" + (tail - 1)).position().left + "px");
  106.                     $("#snakeTail_" + tail).css('top', $("#snakeTail_" + (tail - 1)).position().top + "px");
  107.  
  108.                     if ($("#snake").position().left == $("#snakeTail_" + tail).position().left && $("#snake").position().top == $("#snakeTail_" + tail).position().top)
  109.                     endGame();
  110.                 }
  111.             }
  112.  
  113.             //left
  114.             if (pressedArrow == 97)
  115.             $("#snake").css('left', x  - width + "px")
  116.             //top
  117.             if (pressedArrow == 119)
  118.             $("#snake").css('top', y - height + "px")
  119.             //right
  120.             if (pressedArrow == 100)
  121.             $("#snake").css('left', x  + width + "px")
  122.             //bottom
  123.             if (pressedArrow == 115)
  124.             $("#snake").css('top', y + height + "px")
  125.  
  126.             x = $("#snake").position().left;
  127.             y = $("#snake").position().top;
  128.  
  129.             $('.snak').each(function(index) {
  130.                 if ($("#snake").position().left == $(".snak").position().left && $("#snake").position().top == $(".snak").position().top) {
  131.                     $(this).remove();
  132.                     insertTail();
  133.                 }
  134.             });
  135.  
  136.             checkWalls(x,y,height,width);
  137.             setTimeout(go, speed);
  138.         }
  139.     }
  140.  
  141.     function checkWalls(x,y,height,width) {
  142.         playGroundW = $("#playGround").width()-width;
  143.         playGroundH = $("#playGround").height()-height;
  144.         if (x<0)
  145.         endGame();
  146.         if (x>playGroundW)
  147.         endGame();
  148.         if (y<0)
  149.         endGame();
  150.         if (y>playGroundH)
  151.         endGame();
  152.     }
  153.  
  154.     $("#points").click(function () {
  155.         window.location.reload();
  156.     });
  157.  
  158.     function endGame(){
  159.         start = 3;
  160.         $('#points').text("Your points: " + points + ". Game over. Restart?");
  161.     }
  162. });

…y finalmente, el c贸digo CSS:

  1. #playGround {
  2.     background: #000;
  3.     opacity: 0.8;
  4.     width: 300px;
  5.     height: 300px;
  6.     position: absolute;
  7.     margin-left: -150px;
  8.     top: 100px; left: 50%;
  9.     -webkit-box-shadow: #3fb523 0 0 6px;
  10.     -moz-box-shadow: #3fb523 0 0 6px;
  11.     box-shadow: #3fb523 0 0 6px;
  12.     overflow: hidden;
  13. }
  14.  
  15. #points {
  16.     position: absolute;
  17.     top: 380px; left: 50%;
  18.     margin-left: -147px;
  19.     width: 300px;
  20.     color: #fff;
  21.     z-index: 10;
  22.     line-height: 20px;
  23.     cursor: pointer;
  24. }
  25.  
  26. #points:hover {
  27.     text-decoration: underline;
  28. }
  29.  
  30. #snake, .tail {
  31.     opacity: 0.8;
  32.     width: 20px;
  33.     height: 20px;
  34.     position: absolute;
  35.     z-index: 1002;
  36.     background: #222;
  37.     border: 1px solid green;
  38.     -webkit-border-radius: 10px;
  39.     -moz-border-radius: 10px;
  40.     border-radius: 10px;
  41.     background: #40b724;
  42. }
  43.  
  44. #snake {
  45.     background: green;
  46. }
  47.  
  48. .snak {
  49.     opacity: 0.8;
  50.     width: 20px;
  51.     height: 20px;
  52.     position: absolute;
  53.     z-index: 1002;
  54.     background: green;
  55. }

隆Y listo! Para jugar, deber谩s usar las teclas W,A, S y D. 隆A divertirse!

Haz clic aqu铆 para ver una demostraci贸n >>

Fuente original del art铆culo: CSS3 Forum
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder