Pacman CSS
18 de Mayo del 2008(texto en castellano abajo)
After drawing in CSS (see Homer CSS and Bush CSS), a generator software for CSS Art (jpeg2css) and animated CSS art (CSS-Cola), what to do next?
Pacman CSS uses no images, only pure vectorial and rescalable CSS art composed of hundreds of Verdana font characters, and javascript code for animation and game. It is less than 9kb uncompressed -less than 3 with zip compression-.
It requires a browser with javascript enabled and the Verdana font installed. It has been tested in 11 different browsers, Internet Explorer 5.5 to 8, Firefox 2 and 3, Opera 9, Safari 3, Maxthon 1.6 and 2 and Flock, working on all. To IE 8 beta users: use IE7 emulation to run it (without the emulation it works, but too slow, it takes several seconds to start and generates very few images per second -I assume it is a problem with the beta IE version-)
Push the START GAME button to play it!
Castellano
Tras dibujar en CSS (ver Homer CSS y Bush CSS), un software generador de arte CSS (jpeg2css) y arte CSS animado (CSS-Cola), ¿qué sería lo siguiente?
Pacman CSS no usa imágenes, sólo arte CSS vectorial y redimensionable compuesto de cientos de caracteres de la fuente Verdana, y código javascript para la animación y el juego. Ocupa menos de 9kb descomprimido (y menos de 3kb con zip).
Requiere un navegador con javascript y la fuente Verdana instalada. Ha sido probado en 11 navegadores distintos; Internet Explorer de 5.5 a 8, Firefox 2 y 3, Opera 9, Safari 3, Maxthon 1.6 y 2 y Flock, funcionando en todos. A los usuarios de IE 8 beta: jugad con la emulación de IE7 activa (sin la emulación funciona, pero demasiado lento; tarda varios segundos en empezar y genera muy pocas imágenes por segundo… supongo que es un problema de la beta de IE)
¡Pulsad el botón START GAME para jugar!
Agradecimientos a Xero por su apoyo moral durante la realización del juego y el beta-testing.
Eres un máquina tio!!! yo flipo con las cosas que haces…
Eres Dios XD
BRUTAL !!!
lo único que hoy es 17 y no 18 XDDD
Saludos
Bueno bueno, al final lo has terminado, y es impresionante, como no podía ser menos.
Pero te advierto, recojo tu guante. Un día, no sabrás como ni cuando, pero la invasión llegará, hahaha…
Enorabuena, vaya palizón te has pegado, pero el resultado ha merecido la pena, eh?
Roman, como te decía haces un trabajo increíble, felicitaciones :-)
[…] Vía|Roman Cortés […]
Román, está buenísimo.
No sé si son bugs o no le diste mucha bola, pero en mi caso sólo salió un fantasmita, pero no me quiere ni puede agarrar, y cuando agarro la bola grande tampoco lo puedo comer yo.
Además, nunca termina el nivel :P.
Por las dudas, estoy con el Firefox3b5 desde UbuntuHH.
Un saludo, y seguí redescubriendo el CSS :P
… Sin Comentarios … ERES DIOSSSSSSS???
Muy buen trabajo amigo!!!
Ya lo probe con IE y si funciona, quiza esa vez si era que mi navegador lo bloqueaba por “seguridad”.
Saludos y felecidades!!
Fepe: es así, simplemente una prueba de que se pueden hacer pequeños juegos con gráficos en el estilo del Homer CSS. Tenía incluso hechos los “sprites” de los fantasmitas en azul (cuando los puedes comer), pero vi que no aportaban realmente nada… A nivel de jugabilidad, el Pacman original es insuperable y este proyecto/post, no trataba de eso.
Fepe: ¿tú por qué no estás en mi Messenger? ¿Estás?
[…] Cortés, conocido por su diseño en CSS de Homero Simpson y algunos otros desarrollados y posteados en su blog personal ahora nos sorprende con una versión de Pacman desarrollada integramente en CSS al cual ha acoplado […]
Buen trabajo, ya escribí un post referente a tu trabajo en mi blog y como me pareció bastante interesante me tomé la libertad (espero que me disculpes si no lo deseabas así) de mandarlo a Digg asi que ya va contando algunos votos, sería bueno que lo pusieras en tu post, asi te llegan más votos y visitas. Saludos y éxitos.
[…] Pacman en tan solo 9kb en CSS y Javascriptwww.romancortes.com/blog/pacman-css/ por Yonkis hace pocos segundos […]
Hey, que tal? excelente trabajo!! queria saber si era posible que liberaras el codigo js y el css pues para estudiarlo y hasta trabajarlo… se me ocurren algunas cosas con jquery bastante interesante!!! espero tu respuesta, Gracias!
impresionante
[…] a browser with javascript enabled and the Verdana font installed. Tested in 11 different browsers.read more | digg […]
Muy buen trabajo Román, muy creativo y me imagino que muy exhaustivo… pero genial. Siempre publico en mi blog tu trabajo, me parece muy interesante.
Saludos!
Excelente trabajo Román, muy impresionado nos dejas.
Excelente trabajo!!!!
¿Has pensado como todas estas cosas pueden implementarse en algún
producto innovador?
Saludos
Román, tengo dos palabras para describir esto: IMPRE-SIONANTE !!!
Saludos
[…] Cortés nuevamente sacó a relucir toda su calidad y nos dejó boquiabiertos con un PacMan hecho con CSS y Javascript. Román ya había hecho magia hace tiempo al crear a Homero Simpson y a Bush(it) en […]
me encanta ese juego.quisiera lo enviaran a mi correo con instrucciones de juego. Gracias, son fenomenales
wow!!!
es una de las cosas mas increíbles que he visto ( jamas hubiese creído que en nuestra época iba yo a decir eso de un pacman XD )
felicidades ;)
Jaja, no, no estoy, y no sé porqué.
No uso la dirección con la que generalmente comento, pero hoy comento que la que uso, así que agregame cuando quieras.
¡Saludos!
Wowwwww, asombroso! Repito la pregunta de muchos comments, Roman, eres Dios?????
[…] o jogo Pacman. Sim, em […]
No sabes que alegria me ha dado volver a jugar a este juego legendario, me he llevado por un instante a aquellas tardes de mi adolescencia cuando yo iba a los recres a jugar con mi amiga Lidia.
Un saludito Javi.
es genial lo que hiciste yo estoy haciendo uno en java usando greenfoot
pero nose hacer los metodos para que el fantasma cambie de estado
me ayudas?
Está excelente, Román!
Te felicito por semejante creación.
Saludos,
Debi
[…] el Arkanoid, luego Mario Kart y Super Mario con JavaScript, pero ahora le toca el turno al CSS con Pacman CSS. Se trata de una creación de Román Cortés, quen nos da la palabra justa sobre esta maravilla del […]
Nada que decir… quedé para adentro, eres un puto genio.
nnnnaaaaaaa!!! kiero jugar pero aki nio se puede,,,, ke le pasa al pacman ???
[…] del Pacman ahora Román Cortés ha creado un Pacman utilizando sólamente CSS y Javascript, como comenta en su blog: “Pacman CSS no usa imágenes, sólo arte CSS vectorial y redimensionable compuesto de cientos […]
[…] probado mi pacman-css y el efecto pelo y son mucho más rápidos en Chrome que en ningún otro […]
Increible!!! No puedo imaginar que sea solo CSS!! La verdad que tengo que felicitarte.
Hace poco terminé mi versión de Pacman en JS pero, a diferencia de tu versión, esta usa muchas imágenes y sonidos a través de una librería en JS que a su vez utiliza un flash. Es que los sonidos co JS son malísimos y es muy dificil sincronizarlos con el juego.
Bueno…si puedes pasate por mi web site y prueba mi versión de Pacman:
http://www.harryguillermo.com/Pacman.aspx
Espero que os guste!!!
[…] Link | PACMAN CSS […]
[…] del Pacman ahora Román Cortés ha creado un Pacman utilizando sólamente CSS y Javascript, como comenta en su blog: “Pacman CSS no usa imágenes, sólo arte CSS vectorial y redimensionable compuesto de cientos […]
[…] La representación del juego PacMan sin usar imágenes […]
Excelente tío!!!
[…] sí, el bueno de Román Cortés nos ofrece, en su página personal, una muestra de su creción. completamente jugable. Sin necesidad de imágenes y haciendo uso tan […]
[…] Pacman CSS: arte vectorial y redimensionable compuesto de cientos de caracteres de la fuente Verdana y código Javascript para la animación y el juego. […]
[…] emoción podría jurar que es HTML5 (como “Capman“), en realidad en un juego hecho con Javascript y CSS, empleando Flash para el […]
[…] por la emoción podría jurar que es HTML5 (como “Capman“), en realidad es un juego hecho con Javascript y CSS, empleando Flash para el […]
Y yo pensaba que sabía algo de CSS ¡JA! que digo en pañales, que ni a embrión llego, gracias por mostrarnos que el límite es nuestra imaginación Román, sin duda es un logro estupendo con muchísimas horas de dedicación.
Eres un fenómeno, altamente recomendado tu trabajo.