Space Invaders en HTML + CSS

space invaders

Curiosa figura creada por GenteGeek donde se emula a uno de los bichitos de Space Invaders, pero lo más original es que está creado en HTML y CSS, el código es el siguiente:

Código HTML (space_invaders.html):

  1. <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»

  2.     «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

  3. <html xmlns=»http://www.w3.org/1999/xhtml» xml:lang=»ca» lang=»ca»>

  4. <head>

  5. <title>HTML + CSS Space Invaders</title>

  6. <link href=»space_invaders.css» rel=»stylesheet» type=»text/css» />

  7. </head>

  8. <body>

  9. <div id=»cuerpo»> </div>

  10. <div id=»cuerpo2″> </div>

  11. <div id=»ojo1″> </div>

  12. <div id=»ojo2″> </div>

  13. <div id=»antena11″> </div>

  14. <div id=»antena12″> </div>

  15. <div id=»antena21″> </div>

  16. <div id=»antena22″> </div>

  17. <div id=»pata11″> </div>

  18. <div id=»pata12″> </div>

  19. <div id=»pata21″> </div>

  20. <div id=»pata22″> </div>

  21. <div id=»mano1″> </div>

  22. <div id=»mano2″> </div>

  23. </body>

  24. </html>

Código CSS (space_invaders.css):

  1. div  {background-color: #000;}

  2.  

  3. #cuerpo {position:absolute; width:400px; height:200px; top:100px; left:200px; }

  4. #cuerpo2 {position:absolute; width:500px; height: 130px; top: 170px; left: 150px; }

  5.  

  6. #ojo1 {background-color: #fff; position:absolute; width:50px; height:50px; top:170px; left:250px; }

  7. #ojo2 {background-color: #fff; position:absolute; width:50px; height:50px; top:170px; left:500px; }

  8.  

  9. #antena11 {position:absolute; width:50px; height:50px; top:50px; left:250px; }

  10. #antena12 {position:absolute; width:50px; height:50px; top:0px; left:200px; }

  11.  

  12. #antena21 {position:absolute; width:50px; height:50px; top:50px; left:500px; }

  13. #antena22 {position:absolute; width:50px; height:50px; top:0px; left:550px;}

  14.  

  15. #pata11 {position:absolute; width:50px; height:50px; top:300px; left:200px;}

  16. #pata12 {position:absolute; width:50px; height:50px; top:350px; left:150px;}

  17.  

  18. #pata21 {position:absolute; width:50px; height:50px; top:300px; left:550px;}

  19. #pata22 {position:absolute; width:50px; height:50px; top:350px; left:600px;}

  20.  

  21. #mano1 {position:absolute; width:50px; height:200px; top:50px; left:100px;}

  22. #mano2 {position:absolute; width:50px; height:200px; top:50px; left:650px;}

Pueden ver un ejemplo en GenteGeek

Deja un comentario

This site uses Akismet to reduce spam. Learn how your comment data is processed.