将激光存储在阵列中，然后根据当前的喷枪提取'X‘量的激光
将激光存储在阵列中，然后根据当前的喷枪提取'X‘量的激光
提问于 2020-01-30 10:27:13
我正在制作一款第一人称太空射击游戏，其中激光从屏幕外开始，并向目标位置射击。我一直在研究一个简单的解决方案，不用画布就能做到这一点，目前我得到了这样的结果：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个激光，所有激光都来自屏幕外的不同位置，并在目标的中间结束，如示例所示。
回答 1
Stack Overflow用户
发布于 2020-01-30 11:00:30
您需要创建更多的激光元素，并循环通过每个元素。我为你做了几个。您还需要为每个激光器设置初始css。我为css对象创建了一个数组，因此您也可以在动画循环中重置它们。
我还根据回路的索引任意设置了激光器的位置。
我希望这能帮助你实现你想要的结果！
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"
});
}
}
);
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59978284
复制相关文章
相似问题
腾讯云开发者
