如何用矢量添加破折号 function

Question

在我的 2D（自上而下）游戏中，我试图添加破折号 function。

在名为dash的 function 中使用if (keyWentDown("e")) {}条件。 我设置了一个面向玩家方向的东西，即： plrvector.rotation = 90 ，我希望我的角色在按下E时平滑移动约50px 。

问题是，我不知道如何使用矢量。 有什么提示或指示吗？ 我尝试使用各种技术； 但是，我找不到任何教程或任何可以帮助我的东西。

Answer 1

我不确定您想将播放器精确移动 50 像素。 您只需暂时将速度提高一个系数。 在下面的示例中，如果按下E键，则会激活“涡轮”模式，将速度提高 3 倍。

你必须按照以下方式做一些事情：

function update(progress) {
  const { player } = state;
  const turbo = state.pressedKeys.turbo ? 3 : 1; // x3 speed (E)

  if (state.pressedKeys.left) {
    if (player.speed.x > 0) player.speed.x *= -1;
    player.position.x += progress * player.speed.x * turbo;
  }
}

注意：这可以修改为仅允许短时间涡轮增压。 例如，玩家可能需要填充一个涡轮流量计才能使用此模式。

以下示例改编自： 《快速提示：如何在 JavaScript 中制作游戏循环》 。 我没有使用 vectors pre se ，但我将 position 和速度（速度）存储在类似 vector 的 object 中。如果你想将其转换为矢量，你可以查看victor.js 。 它可以轻松地为您添加/乘以/归一化向量。

 // Canvas context reference const ctx = document.querySelector('#game').getContext('2d'); const hud = document.querySelector('#hud'); // Set the canvas size Object.assign(ctx.canvas, { width: 600, height: 160 }); // Game state const state = { player: { dimensions: { depth: 10, height: 10, width: 10 }, position: { x: Math.floor(ctx.canvas.width / 2), y: Math.floor(ctx.canvas.height / 2) }, speed: { x: 0.25, y: 0.25 } }, pressedKeys: { left: false, right: false, turbo: false, up: false, down: false } }; // Track keys const keyMap = new Map(Object.entries({ ArrowDown: 'down', ArrowLeft: 'left', ArrowRight: 'right', ArrowUp: 'up', a: 'left', d: 'right', e: 'turbo', s: 'down', w: 'up', })); // Game Loop ~ Update function update(progress) { const { player } = state; hud.innerText = Object.entries(state.pressedKeys).filter(([k, v]) => v).map(([k]) => `<${k}>`).sort().join(' '); const turbo = state.pressedKeys.turbo? 3: 1; // x3 speed (E) // Check pressed keys to update position if (state.pressedKeys.left) { if (player.speed.x > 0) player.speed.x *= -1; player.position.x += progress * player.speed.x * turbo; } if (state.pressedKeys.right) { if (player.speed.x < 0) player.speed.x *= -1; player.position.x += progress * player.speed.x * turbo; } if (state.pressedKeys.up) { if (player.speed.y > 0) player.speed.y *= -1; player.position.y += progress * player.speed.y * turbo; } if (state.pressedKeys.down) { if (player.speed.y < 0) player.speed.y *= -1; player.position.y += progress * player.speed.y * turbo; } // Check bounds const threshold = player.dimensions.width; if (player.position.x > ctx.canvas.width - threshold) { player.position.x = ctx.canvas.width - threshold; } else if (player.position.x < threshold) { player.position.x = threshold; } if (player.position.y > ctx.canvas.height - threshold) { player.position.y = ctx.canvas.height - threshold; } else if (player.position.y < threshold) { player.position.y = threshold; } } // Game Loop ~ Draw function draw() { const { player, pressedKeys } = state; ctx.fillStyle = 'black'; ctx.beginPath(); ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.closePath(); ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(player.position.x, player.position.y, player.dimensions.width, 0, 2 * Math.PI); ctx.fill(); ctx.closePath(); } // Game Loop ~ Main function loop(timestamp) { const progress = timestamp - lastRender; update(progress); draw(); lastRender = timestamp; window.requestAnimationFrame(loop); } // Begin game let lastRender = 0; window.requestAnimationFrame(loop); // Register keyboard events window.addEventListener('keydown', onKeyDown, false); window.addEventListener('keyup', onKeyUp, false); // Event handlers function onKeyDown({ key }) { toggleKey(key, true); } function onKeyUp({ key }) { toggleKey(key, false); } // Convenience function toggleKey(key, value) { const index = keyMap.get(key); if (index) { const currentValue = state.pressedKeys[index]; state.pressedKeys[index] = value?? ;currentValue; } }

 *, *::before,*::after { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.25em; padding: 0.25em; } #hud { white-space: pre; text-transform: uppercase; }

 <:-- See: https.//www.sitepoint.com/quick-tip-game-loop-in-javascript/ --> <canvas id="game"></canvas> <div id="hud"></div>

---

矢量数学

这是添加/乘以向量的示例：

1. 添加t和u得到{ x: 4, y: 7 }
2. 将上面的结果乘以t得到{ x: 4, y: 14 }

 const vectorAdd = (a, b) => ({ x: ax + bx, y: ay + by }); const vectorMultiply = (a, b) => ({ x: ax * bx, y: ay * by }); let t = { x: 1, y: 2 }, u = { x: 3, y: 5 }, v = vectorMultiply(vectorAdd(t, u), t); console.log(v); // { x: 4, y: 14 }

如果你想链接这些调用，你可以尝试创建一个包装器：

 const vectorAdd = (a, b) => ({ x: ax + bx, y: ay + by }); const vectorMultiply = (a, b) => ({ x: ax * bx, y: ay * by }); const vector = function({ x, y }) { [this.x, this.y] = [x, y]; this.add = (other) => { const { x, y } = vectorAdd(this, other); [this.x, this.y] = [x, y]; return this; }; this.multiply = (other) => { const { x, y } = vectorMultiply(this, other); [this.x, this.y] = [x, y]; return this; }; this.value = () => ({ x: this.x, y: this.y }); return this; } let t = { x: 1, y: 2 }, u = { x: 3, y: 5 }, v = vector(t).add(u).multiply(t).value(); console.log(v); // { x: 4, y: 14 }