CodePen Embed - Galaxian

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>
  <div id='game'>
    <span id='player'>
      1UP
      <b>0</b>
    </span>
    <span id='score'>
      HI-SCORE
      <b>5000</b>
    </span>
    <div id='contentHome'>
      <span id="logo"></span>
      <ul id="option">
        <li>
          <a href="#" id='start'>1 PLAYER</a>
        </li>
        <li>
          <a href="#" id='help'>INSTRUCIONS</a>
        </li>
      </ul>
      <div id="instrucions">
        <a href="" id="close" title="Close"></a>
        <b>controls</b>
        <p>move left</p>
        <span id="buttonMoveLeft"></span>
        <p>move right</p>
        <span id="buttonMoveRight"></span>
        <p>shot</p>
        <span id="buttonShot">space</span>
      </div>
    </div>
    <div id='contentGame'>
      <!-- enemy -->
      <!-- aircraft -->
      <!-- missile -->
    </div>
  </div>
  <script src='js/jquery-1.11.0.min.js'></script>
  <script src='js/functions.js'></script>
</body>

</html>

html,
body,
div,
p,
img,
span,
header,
section,
footer,
ul,
li,
a,
b {
  border: 0;
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  outline: none;
  text-align: left;
}

body {
  background: url('https://s5.postimg.org/4g3thxrd3/image.png') repeat center center #000000;
  font-family: courier;
}

#game {
  width: 496px;
  height: 480px;
  margin: 0 auto;
}

#player,
#score {
  font-size: 17px;
  color: #EC170F;
  font-weight: bold;
  display: block;
  float: left;
}

#player b,
#score b {
  color: #BEBEBE;
  display: block;
}

#player {
  width: 100px;
  margin: 0px 106px 0px 0px;
}

#score b {
  color: #2054C1;
  text-align: center;
}

#contentHome {
  width: 100%;
  display: block;
  float: left;
}

#logo {
  width: 360px;
  height: 95px;
  background: url('https://s5.postimg.org/ugrbat0hz/logo.png') no-repeat center center #0056FE;
  border: #2771FF 1px solid;
  margin: 50px auto;
  display: block;
}

#option {
  width: 110px;
  margin: 0px auto;
  display: block;
}

#option li a {
  margin: 0px auto 15px auto;
  font-size: 17px;
  color: #A661FB;
  font-weight: bold;
  text-indent: 18px;
  display: block;
}

#option li a:hover {
  color: #FFFFFF;
}

#option li a::before {
  content: '';
  width: 10px;
  height: 9px;
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat 0 -81px;
  position: absolute;
  margin: 5px 0px 0px 0px;
  display: block;
}

#instrucions {
  width: 450px;
  background: rgba(24, 24, 24, 0.95);
  border: rgba(119, 119, 119, 0.12) 1px solid;
  border-radius: 7px;
  margin: -227px 0px 0px 0px;
  padding: 25px 0px 30px 0px;
  left: calc(50% - 226px);
  position: absolute;
  display: none;
}

#buttonMoveLeft,
#buttonMoveRight,
#buttonShot,
#buttonKill {
  width: 35px;
  height: 25px;
  line-height: 25px;
  background: #B9B9B9;
  font-family: arial;
  font-size: 11px;
  text-transform: uppercase;
  color: #000000;
  text-align: center;
  margin: 0px 5px;
  border-radius: 3px;
  display: block;
  float: left;
}

#buttonMoveLeft::before,
#buttonMoveRight::before {
  content: '';
  width: 13px;
  height: 11px;
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat 0 -99px;
  margin: 7px auto;
  display: block;
}

#buttonMoveRight::before {
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -14px -99px;
}

#buttonShot,
#buttonKill {
  width: 65px;
}

#instrucions b {
  width: 100%;
  height: 25px;
  line-height: 25px;
  font-family: arial;
  font-size: 13px;
  text-transform: uppercase;
  color: #FFFFFF;
  text-align: center;
  margin: 15px 0px;
  border-radius: 3px;
  display: block;
}

#instrucions p {
  width: 90px;
  height: 25px;
  line-height: 25px;
  font-family: arial;
  font-size: 11px;
  text-transform: uppercase;
  color: #FFFFFF;
  text-align: right;
  margin: 5px 15px 5px 130px;
  border-radius: 3px;
  display: block;
  float: left;
}

#instrucions #close {
  width: 11px;
  height: 11px;
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -29px -99px;
  position: absolute;
  margin: -15px 0px 0px 430px;
  cursor: pointer;
  display: block;
}

#contentGame {
  width: 100%;
  margin: 20px 0px 0px 0px;
  display: none;
  float: left;
}

#enemyBox {
  position: absolute;
  display: block;
}

#aircraft {
  width: 26px;
  height: 32px;
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') repeat 0px 0;
  position: absolute;
  top: 366px;
  left: 0;
  display: block;
}

#missile {
  width: 26px;
  height: 6px;
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') repeat 0 -66px;
  position: absolute;
  top: 360px;
  left: 0;
  display: block;
}

.enemy {
  width: 26px;
  height: 20px;
  position: absolute;
  opacity: 0;
  display: block;
  float: left;
}

.colorBoss {
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -106px 0;
}

.colorRed {
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -27px 0;
}

.colorPurple {
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -54px 0;
}

.colorGreen {
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -81px 0;
}

.animatedColorBoss {
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -106px -33px;
}

.animatedColorRed {
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -27px -33px;
}

.animatedColorPurple {
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -54px -33px;
}

.animatedColorGreen {
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -81px -33px;
}

.explosionColorBoss {
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -106px -66px;
}

.explosionColorRed {
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -27px -66px;
}

.explosionColorPurple {
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -54px -66px;
}

.explosionColorGreen {
  background: url('https://s5.postimg.org/5xp9thw3n/sprite.png') no-repeat -81px -66px;
}

.info {
  width: 100%;
  text-align: center;
  margin: 200px 0px 0px 0px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  display: block;
}

// --- vars
_ = {
  position: 0,
  bgPosition: 0,
  leftMissile: 0,
  topMissile: 360,
  shotMissile: true,
  amountEnemy: 46,
  marginBoxEnemy: '20px',
  positionEnemy: [],
  pointsEnemy: [],
  move: 26,
  margin: 0,
  points: 0,
  explosion: false,
  AnimateEnemyBg: true,
  stopLeft: '',
  stopRight: '',
  Init: '',
  Start: '',
  Help: '',
  Dimensions: '',
  Enemy: '',
  AnimeMoveEnemy: '',
  Controls: '',
  AnimeDisplayEnemy: '',
  LimitAircraft: '',
  Background: '',
  MoveLeft: '',
  MoveRight: '',
  ButtonFire: '',
  Shot: '',
  ExplosionEnemy: '',
  GetPoints: ''
};

// --- ready
$(document).ready(function() {
  _.Init();
  _.Dimensions();
  $(window).resize(function() {
    _.Dimensions();
  });
  _.Background();
});

// --- menu
_.Init = function() {
  $('#option li a').click(function() {
    if ($(this).attr('id') == 'start') {
      _.Start();
    } else if ($(this).attr('id') == 'help') {
      _.Help();
    }
    return false;
  });
};

// --- menu help
_.Help = function() {
  $('#instrucions').fadeIn(250);

  $('#instrucions #close').click(function() {
    $('#instrucions').fadeOut(250);
    return false;
  });
};

// --- menu start
_.Start = function() {
  $('#contentHome').fadeOut(200, function() {
    $('#contentGame').fadeIn(250, function() {
      _.Enemy();
      _.AnimeDisplayEnemy();
      setTimeout('_.AnimeMoveEnemy()', 2900);
      setTimeout('_.Controls()', 2900);
      _.LimitAircraft();
    });
  });
};

// --- keyboard keydown
_.Controls = function() {
  $(document).keydown(function(e) {
    _.MoveLeft(e);
    _.MoveRight(e);
    _.ButtonFire(e);
  });
};

// --- center box game
_.Dimensions = function() {
  var
    widthWindow = $(window).width(),
    heightWindow = $(window).height();

  $('#game').css({
    'margin-top': parseInt((heightWindow / 2) - 240)
  });
};

// --- create enemy, aircraft and missile
_.Enemy = function() {
  var
    i = 1, // enemy
    col = 0; // column
  z = 26; // width
  t = 30; // position top
  x = '',
    pLeft = '',
    pTop = '',
    color = '',
    key = 0,
    point = 0;

  $('#contentGame').append('<span id="enemyBox"></span>');

  while (i <= _.amountEnemy) {
    // 1 column
    if (i == 1) {
      col = 6;
      pLeft = (z * col);
      pLeft = 'left:' + pLeft + 'px;';
      pTop = 'top:0;';
      color = 'colorBoss';
      point = 350;
    } else if (i == 2) {
      col = 12;
      pLeft = (z * col);
      pLeft = 'left:' + pLeft + 'px;';
      pTop = 'top:0;';
      color = 'colorBoss';
      point = 350;
    } else if ((i > 2) && (i <= 8)) { // 2 column
      col = (i == 3) ? 4 : col + 2;
      pLeft = (z * col);
      pLeft = 'left:' + pLeft + 'px;';
      pTop = 'top:' + (t * 1) + 'px;';
      color = 'colorRed';
      point = 200;
    } else if ((i > 8) && (i <= 16)) { // 3 column
      col = (i == 9) ? 2 : col + 2;
      pLeft = (z * col);
      pLeft = 'left:' + pLeft + 'px;';
      pTop = 'top:' + (t * 2) + 'px;';
      color = 'colorPurple';
      point = 150;
    } else if ((i > 16) && (i <= 26)) { // 4 column
      col = (i == 17) ? 0 : col + 2;
      pLeft = (z * col);
      pLeft = 'left:' + pLeft + 'px;';
      pTop = 'top:' + (t * 3) + 'px;';
      color = 'colorGreen';
      point = 50;
    } else if ((i > 26) && (i <= 36)) { // 5 column
      col = (i == 27) ? 0 : col + 2;
      pLeft = (z * col);
      pLeft = 'left:' + pLeft + 'px;';
      pTop = 'top:' + (t * 4) + 'px;';
      color = 'colorGreen';
      point = 50;
    } else if ((i > 36) && (i <= 46)) { // 6 column
      col = (i == 37) ? 0 : col + 2;
      pLeft = (z * col);
      pLeft = 'left:' + pLeft + 'px;';
      pTop = 'top:' + (t * 5) + 'px;';
      color = 'colorGreen';
      point = 50;
    }

    // create enemy
    $('#enemyBox').append('<span class="enemy ' + color + '" style="' + pTop + '' + pLeft + '" id="en' + key + '"></span>');

    // positions array
    x = $('#en' + key).position();
    _.positionEnemy[key] = x;
    _.pointsEnemy[key] = point;

    i++;
    key++;
  }

  $('#enemyBox').append('<span id="aircraft"></span><span id="missile"></span>');
};

// --- animate display delay enemy
_.AnimeDisplayEnemy = function() {
  var
    delay = 100,
    x = 90;

  $.each(_.positionEnemy, function(key) {
    setTimeout(function() {
      $('#en' + key).animate({
        'opacity': 1
      }, 300);
    }, delay);
    delay = delay + (x--);
  });
};

// --- animate moviment enemy
_.AnimeMoveEnemy = function() {
  var
    animated = '';

  if (!_.AnimateEnemyBg) {
    _.AnimateEnemyBg = true;
  } else {
    _.AnimateEnemyBg = false;
  }

  $.each(_.positionEnemy, function(key) {
    if (key < 2) {
      animated = 'animatedColorBoss';
    } else if (key < 8) {
      animated = 'animatedColorRed';
    } else if (key < 16) {
      animated = 'animatedColorPurple';
    } else {
      animated = 'animatedColorGreen';
    }

    if (!_.AnimateEnemyBg) {
      $('#en' + key).addClass(animated);
    } else {
      $('#en' + key).removeClass(animated);
    }
  });

  setTimeout('_.AnimeMoveEnemy()', 450);
};

// --- background animated
_.Background = function() {
  _.bgPosition++;

  $('body').css({
    'background-position': '50%' + _.bgPosition + 'px'
  });

  setTimeout('_.Background()', 30);
};

// --- limit moviment aircraft
_.LimitAircraft = function() {
  _.stopLeft = parseInt($('#aircraft').position().left);
  _.stopRight = _.stopLeft + (26 * 18); // width * column
};

// --- aircraft move left
_.MoveLeft = function(event) {
  var
    e = event;

  if (e.keyCode == 37) {
    _.colisionRight = false;
    _.margin = $('#aircraft').position();
    _.position = parseInt(_.margin.left);
    _.left = (_.position - _.move);

    // colision
    if (_.position != _.stopLeft) {
      $('#aircraft, #missile').css({
        'left': _.left
      });
      _.position = _.left;
    }
  }
};

// --- aircraft move right
_.MoveRight = function(event) {
  var
    e = event;

  if (e.keyCode == 39) {
    _.colisionLeft = false;
    _.margin = $('#aircraft').position();
    _.position = parseInt(_.margin.left);
    _.left = (_.position + _.move);

    // colision
    if (_.position != _.stopRight) {
      $('#aircraft, #missile').css({
        'left': _.left
      });
      _.position = _.left;
    }
  }
};

// --- aircraft fire missile
_.ButtonFire = function(event) {
  var
    e = event;

  if (e.keyCode == 32) {
    if (_.shotMissile) {
      _.leftMissile = _.position;
      _.Shot();
    }
  }
};

// --- missile moviment
_.Shot = function() {
  var
    x = '';

  _.shotMissile = false;
  _.topMissile -= 3;

  if (_.topMissile > -10) {
    $('#missile').css({
      'top': _.topMissile,
      'left': _.leftMissile
    });

    x = $('#missile').position();

    $.each(_.positionEnemy, function(key, value) {
      if (!_.explosion) {
        if ((x.top == value.top) && (x.left == value.left)) {
          _.ExplosionEnemy(key);
          _.GetPoints(key);
          _.positionEnemy[key] = '';
          _.explosion = true;

          // reset missile
          _.topMissile = -10;
        }
      }
    });

    setTimeout('_.Shot()', 1);
  } else {
    $('#missile').css({
      'top': '360px',
      'left': _.position
    });

    _.topMissile = 360;
    _.shotMissile = true;
    _.explosion = false;
  }
};

// --- animate shot enemy
_.ExplosionEnemy = function(element) {
  var
    explode = '';

  if (element < 2) {
    explode = 'explosionColorBoss';
  } else if (element < 8) {
    explode = 'explosionColorRed';
  } else if (element < 16) {
    explode = 'explosionColorPurple';
  } else {
    explode = 'explosionColorGreen';
  }

  $('#en' + element).addClass(explode);
  $('#en' + element).animate({
    'top': '+=25px',
    'opacity': 0
  }, 1000, function() {
    $(this).remove();
  });
};

// --- count points
_.GetPoints = function(key) {
  _.points = _.points + _.pointsEnemy[key];

  $('#player b').html(_.points);
};

This Pen is owned by adonis domingues vieira on CodePen.

See more by @wizardfly on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js