픽셀 아트

<div class="screen">
  <div class="stars"></div>
  <div class="sprite" id="sprite"></div>
  <div class="ground"></div>
  <span class="hud">SCORE 0120</span>
</div>

.screen{position:relative;width:min(90%,300px);aspect-ratio:1.5;overflow:hidden;background:#0d1524;
  border:2px solid #37507a;image-rendering:pixelated}
.stars{position:absolute;inset:0;
  background-image:radial-gradient(1.5px 1.5px at 20% 20%,#9fd,transparent),
    radial-gradient(1.5px 1.5px at 70% 40%,#9fd,transparent),
    radial-gradient(1.5px 1.5px at 40% 70%,#9fd,transparent),
    radial-gradient(1.5px 1.5px at 85% 75%,#9fd,transparent);opacity:.6}
.ground{position:absolute;left:0;right:0;bottom:0;height:18%;background:#274a2e;
  box-shadow:0 -3px 0 #3b6b45}
.sprite{position:absolute;left:38%;bottom:18%;width:7px;height:7px}
.hud{position:absolute;left:8px;top:6px;font:8px/1 "Courier New",monospace;color:#7bffb0;letter-spacing:1px}

function pixels(rows, unit, color) {
  const out = [];
  rows.forEach((row, y) => {
    for (let x = 0; x < row.length; x++) {
      if (row[x] === 'X') out.push((x * unit) + 'px ' + (y * unit) + 'px 0 ' + color);
      if (row[x] === 'O') out.push((x * unit) + 'px ' + (y * unit) + 'px 0 #0d1524');
    }
  });
  return out.join(',');
}
const frameA = ['.XXXXX.', 'XXXXXXX', 'XOXXXOX', 'XXXXXXX', '.XXXXX.', '..X.X..', '.X...X.'];
const frameB = ['.XXXXX.', 'XXXXXXX', 'XOXXXOX', 'XXXXXXX', '.XXXXX.', '.X...X.', 'X.....X'];
const sprite = document.getElementById('sprite');
const unit = 7;
let toggled = false;
let dir = 1;
function step() {
  sprite.style.boxShadow = pixels(toggled ? frameB : frameA, unit, '#7bffb0');
  toggled = !toggled;
  const left = parseFloat(sprite.style.left) || 38;
  let next = left + dir * 3;
  if (next > 62) dir = -1;
  if (next < 14) dir = 1;
  sprite.style.left = next + '%';
  sprite.style.transform = dir < 0 ? 'scaleX(-1)' : 'scaleX(1)';
}
step();
setInterval(step, 380);