关于如何制造星球大战的问题

Question

我正在用HTML，CSS和JS制作星球大战游戏。它应该看起来有点像这个游戏：https://www.gog.com/game/star_wars_xwing_vs_tie_fighter

现在我想把它变成一种必须向敌人射击的游戏。对于这些船只，我想使用此图片：http://vignette4.wikia.nocookie.net/starwars/images/0/0a/TIE_Advanced_x1_starfighter.png/revision/latest?cb=20150310124250

现在她这是我的问题：

如何让它看起来像这张图片中的船越来越接近你了？所以它看起来距离很小并且离你越来越近，变得越来越大，所以它看起来像是飞向你？

我尝试使用z-index，但这不起作用。

另外请不要介意我已经使用了很长时间的代码并且它最终按照我想要的方式工作，但是如果它阻碍了任何进一步的进展，请随时告诉我我的意思需要添加/更改/删除或任何。

此外，我一直在互联网上四处看看我怎么可能做类似星球大战游戏的东西但是例如在这个网站上我能找到与星球大战相关的obly事情是如何制作爬行的介绍但是不是我在找什么：）

Number.prototype.clamp = function(min, max) {
  'use strict';
  return Math.max(min, Math.min(this, max));
};
var url = document.location.href;
var n = parseInt((url.indexOf('n=') != -1) ? url.substring(url.indexOf('n=') + 2, ((url.substring(url.indexOf('n=') + 2, url.length)).indexOf('&') != -1) ? url.indexOf('n=') + 2 + (url.substring(url.indexOf('n=') + 2, url.length)).indexOf('&') : url.length) : 512 * 4);
var star = new Array(n);
var hyperspace = 0;
var lol = {}
lol.id = 'starfield';
lol.pr = {
  w: 1,
  h: 1
};
lol.zr = 256;
lol.timer = 0;
lol.spd = 1;
lol.rid = false;
lol.cvs = false;
lol.ctx = false;
lol.util = {
  isboolean: function(v) {
    if (typeof v === 'boolean') {
      return true;
    }
    return false;
  },
  isstring: function(v) {
    if (typeof v === 'string') {
      return true;
    }
    return false;
  },
  isobject: function(v) {
    if (typeof v === 'object') {
      return true;
    }
    return false;
  },
  isfunction: function(v) {
    if (typeof v === 'function') {
      return true;
    }
    return false;
  },
  isempty: function(obj) {
    if (window.Object.getOwnPropertyNames(obj).length === 0) {
      return true;
    }
    return false;
  },
  isffx: function() {
    return (/firefox/i).test(window.navigator.userAgent);
  },
  copy: function(v) {
    return v.slice(0);
  },
  clone: function(v) {
    return Object.create({
      x: v.x,
      y: v.y,
      z: v.z
    });
  },
  sign: function(v) {
    v = parseFloat(Number(v).toFixed(1));
    if (v === 0) {
      return ' ';
    }
    if (v < 0) {
      return '';
    }
    if (v > 0) {
      return '+';
    }
  },
  random: function(n) {
    var i = 0,
      type, start, len, rnd = '';
    while (i < n) {
      type = Math.round(Math.random() * 2);
      if (type === 0) {
        start = 48;
        len = 10;
      } else {
        start = (Math.round(Math.random() * 2) % 2 === 0) ? 65 : 97;
        len = 26;
      }
      rnd += String.fromCharCode(start + Math.floor(Math.random() * len));
      i += 1;
    }
    return rnd;
  },
  interpolate: function(from, to, n, i) {
    return from + (to - from) / n * i;
  },
  time: function() {
    return (new Date()).getTime();
  }
};
lol.i = function(id) {
  return window.document.getElementById(String(id));
};
lol.el = function(el) {
  return window.document.createElement(String(el));
};
lol.tn = function(txt) {
  return window.document.createTextNode(String(txt));
};

function $r(parent, child) {
  (document.getElementById(parent)).removeChild(document.getElementById(child));
}

function $t(name) {
  return document.getElementsByTagName(name);
}

function $c(code) {
  return String.fromCharCode(code);
}

function $h(value) {
  return ('0' + Math.max(0, Math.min(255, Math.round(value))).toString(16)).slice(-2);
}

function _i(id, value) {
  $t('div')[id].innerHTML += value;
}

function _h(value) {
  return !hires ? value : Math.round(value / 2);
}

function get_screen_size() {
  var w = document.documentElement.clientWidth;
  var h = document.documentElement.clientHeight;
  return Array(w, h);
};
lol.init = function() {

  window.addEventListener('resize', lol.resize, false);
  window.addEventListener('mousemove', lol.mouse.move, false);
  var e = lol.util.isffx() ? 'DOMMouseScroll' : 'mousewheel';
  window.addEventListener(e, lol.mouse.wheel, false);
  window.addEventListener('keypress', lol.key, false);
  lol.viewport();
  lol.resize();
  for (var i = 0; i < n; i++) {
    star[i] = new Array(5);
    star[i][0] = Math.random() * lol.w * 3 - lol.x * 3;
    star[i][1] = Math.random() * lol.h * 3 - lol.y * 3;
    star[i][2] = Math.round(Math.random() * lol.z);
    star[i][3] = lol.x;
    star[i][4] = lol.y;
  }
  lol.anim.start();
};
lol.viewport = function() {
  var el = lol.el('div');
  el.id = lol.id;
  el.style.position = 'absolute';
  window.document.body.appendChild(el);
  lol.cvs = lol.el('canvas');
  lol.cvs.id = lol.id + '-viewport';
  lol.cvs.style.position = 'absolute';
  el.appendChild(lol.cvs);
  lol.ctx = lol.cvs.getContext('2d');
};
lol.resize = function() {
  var w = window.innerWidth,
    h = window.innerHeight,
    el = lol.i(lol.id);
  lol.w = (w + lol.pr.w - w % lol.pr.w) / lol.pr.w;
  lol.w += lol.w % 2;
  lol.h = (h + lol.pr.h - h % lol.pr.h) / lol.pr.h;
  lol.h += lol.h % 2;
  lol.x = Math.round(w / 2);
  lol.y = Math.round(h / 2);
  lol.z = (w + h) / 2;
  lol.r = 1 / lol.z;
  el.width = lol.w * lol.pr.w;
  el.height = lol.h * lol.pr.h;
  lol.cvs.width = lol.w * lol.pr.w;
  lol.cvs.height = lol.h * lol.pr.h;
  lol.cvs.style.backgroundColor = '#000';
  lol.ctx.scale(lol.pr.w, lol.pr.h);
  lol.mouse.o = {
    x: lol.x,
    y: lol.y
  };

};
lol.anim = {
  update: function() {
    var c;
    lol.ctx.fillStyle = 'rgba(0,0,0,0.5)';
    if (hyperspace === 1) {
      lol.spd = lol.spd * 1.015;
      lol.zr = lol.zr * 0.99;
      c = Math.round(lol.spd * 4);
      lol.ctx.fillStyle = 'rgba(' + c + ',' + c + ',' + c + ',0.5)';
      if (lol.spd > 64) {
        lol.ctx.fillStyle = 'rgba(0,0,0,0.5)';
        lol.spd = 16;
        lol.zr = 256;
        hyperspace = 2;
      }
    }
    if (hyperspace === 2) {
      if (lol.spd > 1) {
        lol.spd *= 0.99;
      } else {
        lol.spd = 1;
        hyperspace = 0;
      }
    }
    lol.ctx.fillRect(0, 0, lol.w, lol.h);

    for (var i = 0; i < n; i++) {
      var test = true,
        x2 = star[i][3],
        y2 = star[i][4];
      star[i][0] += lol.mouse.p.x * 0.1;
      if (star[i][0] > lol.x * 3) {
        star[i][0] -= lol.w * 3;
        test = false;
      }
      if (star[i][0] < -lol.x * 3) {
        star[i][0] += lol.w * 3;
        test = false;
      }
      star[i][1] += lol.mouse.p.y * 0.1;
      if (star[i][1] > lol.y * 3) {
        star[i][1] -= lol.h * 3;
        test = false;
      }
      if (star[i][1] < -lol.y * 3) {
        star[i][1] += lol.h * 3;
        test = false;
      }
      star[i][2] -= lol.spd;
      if (star[i][2] > lol.z) {
        star[i][2] -= lol.z;
        test = false;
      }
      if (star[i][2] < 0) {
        star[i][2] += lol.z;
        test = false;
      }
      star[i][3] = lol.x + (star[i][0] / star[i][2]) * lol.zr;
      star[i][4] = lol.y + (star[i][1] / star[i][2]) * lol.zr;

      if (test) {
        c = 1 - lol.r * star[i][2];
        lol.ctx.fillStyle = 'rgba(255,255,255,' + c + ')';
        lol.ctx.strokeStyle = 'rgba(255,255,255,' + (c / 4) + ')';
        lol.ctx.lineWidth = (1 - lol.r * star[i][2]) * 1.5;
        lol.ctx.beginPath();
        lol.ctx.moveTo(x2, y2);
        lol.ctx.lineTo(star[i][3], star[i][4]);
        lol.ctx.rect(star[i][3] - 0.75, star[i][4] - 0.75, 1.5, 1.5);
        lol.ctx.closePath();
        lol.ctx.stroke();
        lol.ctx.fill();
      }
    }
    lol.rid = window.requestAnimationFrame(lol.anim.update);
  },
  start: function() {
    lol.anim.update();
  },
  stop: function() {
    window.cancelAnimationFrame(lol.rid);
    lol.rid = false;
  },
  pause: function() {
    lol.anim[lol.rid ? 'stop' : 'start']();
  }
};
lol.mouse = {
  p: {
    x: 0,
    y: 0
  },
  o: {
    x: 0,
    y: 0
  },
  click: false,
  move: function(e) {
    e = e || window.event;
    lol.mouse.p.x = ((e.pageX - lol.mouse.o.x) / window.innerWidth) * 256;
    lol.mouse.p.y = ((e.pageY - lol.mouse.o.y) / window.innerHeight) * 256;
    e.preventDefault();
  },
  wheel: function(e) {
    e = e || window.event;
    var delta = e.wheelDelta / 120;
    lol.spd -= delta * 0.1;
    e.preventDefault();
  }
};
lol.key = function(e) {
  e = e || window.event;
  console.log(e.keyCode);
  switch (e.keyCode) {
    case 13:
      lol.anim.pause();
      break;
    case 32:
      hyperspace = 1;
      break;
  }
};
lol.init();

body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  z-index: -1
}
#footer {
  text-align: center;
  background-color: black;
  color: white;
}
#div {
  background-color: black;
  text-align: center;
}

<footer id="footer">Galaxy Defender
  <br>Mohan Bloxs</br>
</footer>