Subí el código del eight queens puzzle, posteado hace un par de meses en este blog, a GitHub.
El repo es https://github.com/pmolina/eqp.
Subí el código del eight queens puzzle, posteado hace un par de meses en este blog, a GitHub.
El repo es https://github.com/pmolina/eqp.
El acertijo de las ocho reinas es un problema didáctico en donde se busca colocar ocho reinas en un tablero de ajedrez de forma tal que ninguna de ellas se ataquen entre sí a través de sus movimientos estándar. Por lo tanto, la solución requiere que las reinas no compartan su filas, columnas y diagonales con las demás. Fue propuesto por el ajedrecista alemán Max Bezzel en 1848. Existe un excelente artículo en Wikipedia con más información sobre este problema y sus estrategias de solución.
Tuve que crear una versión en C++ de este programa y me pareció interesante hacerlo “para la web”, así que en una noche de insomnio lo cociné con jQuery y algo de CSS. Pueden jugarlo haciendo clic en el siguiente enlace: eight queens puzzle.
El código del juego se encuentra liberado bajo una licencia Creative Commons By-SA (como el resto de mi blog) y la imagen de la reina la saqué de Wikimedia Commons (bajo licencia GFDL y compatibles).
El programa consta de dos partes: el contenedor de resultados y el script.
Contenedor de resultados
Se trata del elemento HTML donde se mostrarán los resultados de una búsqueda. Los términos de búsqueda se establecen en el atributo title.
Por ejemplo, si quisiéramos mostrar los resultados del tag #obama:
1 | <div class="twitter_search" title="#obama"></div> |
Podés crear todos los contenedores que quieras en la misma página, en el lugar que desees:
1 2 | <div class="twitter_search" title="#python"></div> <div class="twitter_search" title="#jquery"></div> |
El script
Son las instrucciones JavaScript del programa que se encargará de todo el trabajo: obtendrá los términos de búsqueda, solicitará los resultados a través de la API de Twitter y mostrará los resultados en el navegador.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | // Number of tweets to show for each column var MAX_RESULTS = 20; function twitter_search() { var url = 'http://search.twitter.com/search.json?callback=?'; // Iterating over the different search columns $('.twitter_search').each(function() { var container = $(this); // Search terms are specified in the 'title' attribute var search = container.attr('title'); if (search) { // Showing column title if (container.siblings('h1').length == 0) { container.parent().prepend('<h1>' + search + '</h1>'); } var since_id = 0; if (container.children().length) { // Retrieve results since this id since_id = container.children(':first').attr('id').replace('#', ''); } // Request the results $.getJSON(url, {'q': search, 'since_id': since_id}, function(data) { // Processing those results, if any if (data.results.length) { for (i in data.results.reverse()) { var r = data.results[i]; // Creating the result container var div = $('<div id="#' + r.id + '"></div>'); // Don't show this element now div.hide(); // Adding some styles through .twitter_result div.addClass('twitter_result'); // Adding user's image div.append('<img src="' + r.profile_image_url + '" alt="' + r.from_user + '" />'); // Adding username div.append('<a href="http://twitter.com/' + r.from_user + '">' + r.from_user + '</a>'); // Adding tweet div.append('<span>' + r.text + '</span>'); // Adding corners div.corner(); // Adding this result to the main container container.prepend(div); // Effect div.slideDown('slow'); } } // Removing old tweets if (container.children().length > MAX_RESULTS) { // Negative index to_remove = MAX_RESULTS - container.children().length container.children().slice(to_remove).each(function() { $(this).slideUp(); }); } }); } }); }; $(document).ready(function() { // Initial search twitter_search(); // Refresh the results every 5 seconds setInterval("twitter_search();", 5000); }); |
Acá pueden ver una demostración funcional del script: Twitter Search + jQuery (actualizado marzo de 2010).
Aclaraciones de la demo: