Space Invaders en HTML + CSS
Código HTML (space_invaders.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca"> <head> <title>HTML + CSS Space Invaders</title> <link href="space_invaders.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="cuerpo"> </div> <div id="cuerpo2"> </div> <div id="ojo1"> </div> <div id="ojo2"> </div> <div id="antena11"> </div> <div id="antena12"> </div> <div id="antena21"> </div> <div id="antena22"> </div> <div id="pata11"> </div> <div id="pata12"> </div> <div id="pata21"> </div> <div id="pata22"> </div> <div id="mano1"> </div> <div id="mano2"> </div> </body> </html>
div {background-color: #000;} #cuerpo {position:absolute; width:400px; height:200px; top:100px; left:200px; } #cuerpo2 {position:absolute; width:500px; height: 130px; top: 170px; left: 150px; } #ojo1 {background-color: #fff; position:absolute; width:50px; height:50px; top:170px; left:250px; } #ojo2 {background-color: #fff; position:absolute; width:50px; height:50px; top:170px; left:500px; } #antena11 {position:absolute; width:50px; height:50px; top:50px; left:250px; } #antena12 {position:absolute; width:50px; height:50px; top:0px; left:200px; } #antena21 {position:absolute; width:50px; height:50px; top:50px; left:500px; } #antena22 {position:absolute; width:50px; height:50px; top:0px; left:550px;} #pata11 {position:absolute; width:50px; height:50px; top:300px; left:200px;} #pata12 {position:absolute; width:50px; height:50px; top:350px; left:150px;} #pata21 {position:absolute; width:50px; height:50px; top:300px; left:550px;} #pata22 {position:absolute; width:50px; height:50px; top:350px; left:600px;} #mano1 {position:absolute; width:50px; height:200px; top:50px; left:100px;} #mano2 {position:absolute; width:50px; height:200px; top:50px; left:650px;}
Responder
|
