我正在制作第一人称太空射击游戏，其中激光从屏幕外发射并射击到目标位置。一直在研究一个简单的解决方案来实现此功能，而无需使用画布，目前我得到的是：https://jsfiddle.net/Ljhnqkf9/
一些代码解释：
function adjustLine(x1,y1,x2,y2,lineId) //will rotate the laser properly before it's fired
$laser.animate( //this is the animation code where the laser is traveling to the target
{
left: targetX + ( targetW / 2 ),
top: targetY + (targetH / 2),
width: "0px"
},
complete: function() { //once the animation is completed, restore the laser at starting position (off-screen)
$laser.css({ left: "0px", top: "0px", width: "100px" });
$laserBtn.css({
textShadow:
"-1px -1px 0 #e5b13a, 1px -1px 0 #e5b13a, -1px 1px 0 #e5b13a, 1px 1px 0 #e5b13a"
});
}
您可以看到，我正在使用jquery.ui插件对激光进行动画处理，我很喜欢结果，但是现在，当我考虑添加多个激光（例如10台或更多）时，我被困在如何正确执行此操作上。我当时想将激光器存储在阵列中，然后根据当前的舰炮将它们绘制成一个循环，但是由于某些原因它不想接受阵列，或者由于某些原因，它总是在$ laser.animation（）部分失败。做错了。想法是同时发射10束激光，它们全部来自屏幕外的不同位置，并结束于目标的中间，如示例所示。
我希望这可以帮助您获得想要的结果！
HTML：
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Poller+One" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body>
<div class="stage">
<button id="fire-laser" class="fire-laser">Fire Laser</button>
<div id="laser1" class="laser"></div>
<div id="laser2" class="laser"></div>
<div id="laser3" class="laser"></div>
<div id="laser4" class="laser"></div>
<div id="ship" class="target"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js'></script>
</body>
</html>
Javascript：
$(document).ready(function() {
var $window = $(window),
lasers = [$("#laser1"),$("#laser2"),$("#laser3"),$("#laser4")];
lasersCss = [];
$laserBtn = $(".fire-laser");
var target = document.getElementById("ship");
var targetW = target.offsetWidth;
var targetH = target.offsetHeight;
function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
var targetX = getOffset(target).left;
var targetY = getOffset(target).top;
function adjustLine(x1,y1,x2,y2,lineId) {
dist = Math.sqrt( ((x1-x2)*(x1-x2)) + ((y1-y2)*(y1-y2)) );
x_center = (x1+x2)/2
y_center = (y1+y2)/2
rad = Math.atan2(y1 - y2, x1 - x2)
deg = (rad * 180) / Math.PI;
lsr = document.getElementById(lineId)
lsr.style.width = dist
lsr.style.top = y_center
lsr.style.left = x_center - (dist/2)
lsr.style.transform = "rotate("+deg+"deg)";
}
lasers.forEach((laser, idx) => {
currentCss = {
left: '0px',
top: (idx * 100) + 'px',
width: '100px'
};
laser.css(currentCss);
lasersCss.push(currentCss);
});
$("#fire-laser").click(function() {
lasers.forEach((laser, idx) => {
adjustLine(0, 0, targetX, targetY, laser[0].id);
laser.animate(
{
left: targetX + ( targetW / 2 ),
top: targetY + (targetH / 2),
width: "0px"
},
{
duration: 1000,
easing: "easeOutQuad",
queue: true,
complete: function() {
console.log("laser fired!");
laser.css(lasersCss[idx]);
$laserBtn.css({
textShadow:
"-1px -1px 0 #e5b13a, 1px -1px 0 #e5b13a, -1px 1px 0 #e5b13a, 1px 1px 0 #e5b13a"
});
}
}
);
});
});
});