space-invader

In this example below you will see how to do a space-invader with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 1zm0, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1zm0 ©
  • HTML
  • CSS
  • JavaScript
    <body>
  <div id="space-invader"></div>
</body>

/*Downloaded from https://www.codeseek.co/1zm0/space-invader-OvPqNa */
    * {
  
}
body {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  margin: 0px;
  pading: 0px;
  position: fixed;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
}
#space-invader { 
  box-shadow: 
    0 0 0 1em red, 
    0 1em 0 1em red,
    -2.5em 1.5em 0 .5em red,
    2.5em 1.5em 0 .5em red,
    -3em -3em 0 0 red,
    3em -3em 0 0 red,
    -2em -2em 0 0 red,
    2em -2em 0 0 red,
    -3em -1em 0 0 red,
    -2em -1em 0 0 red,
    2em -1em 0 0 red,
    3em -1em 0 0 red,
    -4em 0 0 0 red,
    -3em 0 0 0 red,
    3em 0 0 0 red,
    4em 0 0 0 red,
    -5em 1em 0 0 red,
    -4em 1em 0 0 red,
    4em 1em 0 0 red,
    5em 1em 0 0 red,
    -5em 2em 0 0 red,
    5em 2em 0 0 red,
    -5em 3em 0 0 red, 
    -3em 3em 0 0 red,
    3em 3em 0 0 red,
    5em 3em 0 0 red,
    -2em 4em 0 0 red,
    -1em 4em 0 0 red,
    1em 4em 0 0 red,
    2em 4em 0 0 red; 
  background: red; 
  width: 1em; 
  height: 1em; 
  overflow: hidden; 
  margin: 50px 0 70px 65px; 
}


/*Downloaded from https://www.codeseek.co/1zm0/space-invader-OvPqNa */
    

Comments