0

各位下午好

我是编码游戏的新手，并且已经通过 Grasshoppers 教程。

在沙盒环境中，我正在尝试使用 JavaScript 中的 SVG 编写一个简单的“保持状态”游戏。

我有一个背景 SVG 和一个球 SVG。

我已经给出了这两个 .on(“click”,...) 参数。

背景 SVG 将球重置为随机的 cX 位置和 35 的 cY 位置。

球 SVG 应在随机 cX 处将球转换回 cY 35，在随机 cX 处转换为 1000 的 cY。

当球被点击时，它会点击进入背景并中断动画并将其立即返回到 cY 35 和随机 cX。

如何防止点击？

我尝试了各种随机的测试，但无法使任何工作。

非常感谢， TheShadows645

按要求编辑；PosistionX 只是一个包含各种数字的数组来给出 cX。

var ball = svg.append(‘circle’).attr(‘fill’,’white’).attr(‘r’,25).attr(‘cY’,’35).attr(‘cX’, PickRandom(PosistionX));

var background =svg.append(‘rect’).attr(‘fill’,’green’).attr(‘height’,’1000’).attr(‘width’,’1000’).attr(‘cY’,’0’).attr(‘cX’,’0’);

function kickBall () {
ball.on(‘click’, () => {
    ball.transistion().attr(‘cY’,’35’).attr(‘cX’,’PickRandom(PosistionX)).duration(3000);

ball.transistion().attr(‘cY’,’1000’).attr(‘cX’,’PickRandom(PosistionX)).duration(3000);
});

编辑2；

我增加了球的大小，并减慢了动画的速度。我发现球现在显然没有重置，但在第一次转换时没有上升。而是直接落入新的 PosistionX。

编辑3；澄清一下，现在看来问题不是点击问题，只是原始圆形 SVG 上的“命中框”非常差。但是，如果有人有任何建议，新的 .transition 问题仍然是一个问题。

4

2 回答 2

0

你需要做Event Delegation。在两个 SVG 的父级上设置一个事件，然后用于e.target检查事件是从哪个元素发生的，并相应地编写您的逻辑。

像这样的东西：（只是说出逻辑）

HTML：

<div class="wrapper">
  <div class="svg1" id="svg1">SVG1</div>
  <div class="svg2" id="svg2">SVG2</div>
</div>

Javascript：

document.querySelector(".wrapper").addEventListener("click",(e)=>{
   if(event.target.id==="svg1"){
      // SVG1 logic here
   }

   if(event.target.id==="svg2"){
      // SVG2 logic here
   }
});

注意：所以想法是，一旦在包装器中发生点击，无论是来自svg1还是svg2，我们首先交叉检查触发事件的元素是什么。对于那个元素，根据我们的要求设置我们的代码。e.target.id帮助我们知道事件是从哪个元素冒泡的。

于 2021-01-10T15:43:09.970 回答
-1 

let background = document.getElementById('background');
let ball = document.getElementById('ball');

document.addEventListener('click', (e) => {
  if (e.target.closest('#background')) {
    ball.style.top = '0px';
    ball.style.left = '0px';
  } else if (e.target.closest('#ball')) {
    ball.style.top = (Math.random() * 100) + 'px';
    ball.style.left = (Math.random() * 100) + 'px';
  }
});
svg {
  position: absolute;
}
<svg id="background" width="1000" height="1000">
  <rect width="1000" height="1000" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

<svg id="ball" height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

于 2021-01-10T16:01:09.540 回答