TL;博士 看到这个JSFiddle https://jsfiddle.net/bricksphd/z01umwvq/3/
要从四名玩家转变为六名玩家，您必须了解四名玩家情况下的数学原理，然后将其应用于六名玩家情况。
四人案例
您可以将每个玩家的位置视为围绕原点位于桌子中心的圆的给定度数（或弧度）。在四名玩家的情况下，第一个玩家（索引 0）将处于 0 度，第二个玩家将处于 90 度，依此类推。
要确定一个玩家的移动如何影响另一个人屏幕上角度不同的卡牌的移动，您需要根据卡牌的移动基础对其进行分解。在这种情况下，基础由定义当前玩家的移动空间的两个正交向量组成。第一个向量是使用角度生成的向量。第二个向量可以通过将当前角度加上 90 度（Pi/2 弧度）来找到。对于四名玩家的情况，第一个玩家的主基向量为 0 度，即 (1,0)。第一个玩家的辅助基向量将为 0+90=90 度，即 (0,1)。
要将鼠标移动（增量屏幕 x 和 y）转换为使用任意基的移动，您需要获取增量屏幕 x 和 y 以及基中每个向量的 x 和 y 的点积。在四名玩家的情况下，当第一位玩家移动一张牌时，主要和次要基础的点积分别产生 x 增量和 y 增量。
计算出当前玩家的牌数后，您可以根据其基础在其他玩家的屏幕上移动牌。为此，将已转换为沿两个基地的运动的运动并将其应用到其他玩家的基础上。在四名玩家的情况下，第二名玩家的主要基准为 90 度 = (1,0)，次要基准为 90+90 度 = (-1,0)。因此，为了镜像第二个玩家位置的运动，原始 x 运动被转换为 y 运动，原始 y 运动被转换为 -x 运动。
六名（或任意数量）玩家
要将其更改为具有任意数量玩家且第一个玩家可能偏离 0 度的游戏，您需要遵循相同的数学计算。首先，计算每个玩家的底数。其次，使用点积来计算卡片以其基数为基础移动的增量。第三，将此动作应用到其他玩家的基地。
下面的示例允许您更改玩家数量和起始偏移角度。这些卡片是 div，并且在 div 上叠加了一个画布，以显示每个基础的主轴（红色）和辅助轴（蓝色）。
<div>
<div class="table-div">
</div>
<div>
This example shows how the current players card (blue) can be shown moving on other players' (red "ghost" cards).
Below you
can change the number of players and the angle offset of the starting player.
</div>
<div>
<p>Players</p>
<input type="text" onchange="playerChange()" id="playerText" value="6">
</div>
<div>
<p>Angle (Degrees)</p>
<input type="text" onchange="angleChange()" id="angleText" value="45">
</div>
<canvas id="canv"></canvas>
body {
margin: 0;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 9;
}
.table-div {
background-color: lightgreen;
width: 400px;
height: 400px;
}
.card {
position: absolute;
width: 50px;
height: 70px;
}
.current {
background-color: blue;
}
.ghost {
background-color: red;
}
//A simple class to hold an x,y pair
class Vector2 {
constructor(x, y) { [this.x, this.y] = [x, y] }
}
//Set up our parameters
let playerCount = 6; //Can be changed by the user
let offsetAngle = 45; //Can be changed by the user
let width = 400;
let height = width;
let radius = width / 2;
let cardWidth = 50;
let cardHeight = 50 * 1.4;//~70
let cards;
//Track the mouse
let lastMouse = null;
let currentMouse = null;
let mouseDown = false;
//The angle in radians between each player on the table
let angleDelta;
//Grab the table div
let tableElement = document.querySelector(".table-div");
let canvas = document.querySelector("canvas")
let ctx = canvas.getContext("2d");
canvas.style.width = width + "px";
canvas.style.height = height + "px"
canvas.width = width;
canvas.height = height;
function update() {
ctx.clearRect(0, 0, width, height);
for (let i = 0; i < playerCount; i++) {
//Draw the first axis
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(radius, radius);
ctx.lineTo(radius + Math.cos(angleDelta * i + offsetAngle) * radius, radius + Math.sin(angleDelta * i + offsetAngle) * radius)
ctx.stroke();
//Draw the second axis
let secondAxisAngle = angleDelta * i + Math.PI / 2;
let startX = radius + Math.cos(angleDelta * i + offsetAngle) * radius / 2;
let startY = radius + Math.sin(angleDelta * i + offsetAngle) * radius / 2;
let endX = Math.cos(secondAxisAngle + offsetAngle) * radius / 4;
let endY = Math.sin(secondAxisAngle + offsetAngle) * radius / 4;
ctx.strokeStyle = "green";
ctx.beginPath();
ctx.moveTo(startX, startY)
ctx.lineTo(startX + endX, startY + endY)
ctx.stroke();
}
}
document.body.addEventListener("mousemove", e => {
//Keep track of the last mouse position so we can calculate a delta
lastMouse = currentMouse;
currentMouse = new Vector2(e.clientX, e.clientY);
if (lastMouse && mouseDown) {
let mouseDelta = new Vector2(currentMouse.x - lastMouse.x, currentMouse.y - lastMouse.y);
if (mouseDown) {
//Determine the movement in the current player's basis
let primaryAxisCurrent = new Vector2(Math.cos(angleDelta * 0 + offsetAngle), Math.sin(angleDelta * 0 + offsetAngle))
let secondAxisCurrent = new Vector2(Math.cos(angleDelta * 0 + Math.PI / 2 + offsetAngle), Math.sin(angleDelta * 0 + Math.PI / 2 + offsetAngle))
//Determine the movement in terms of the primary axes
let primary = (primaryAxisCurrent.x * mouseDelta.x + primaryAxisCurrent.y * mouseDelta.y)// * mouseDelta.x;
let second = (secondAxisCurrent.x * mouseDelta.x + secondAxisCurrent.y * mouseDelta.y)// * mouseDelta.y;
//Update all the cards using the primary and secondary motion
for (let i = 0; i < playerCount; i++) {
//Get the axes for this card
let primaryAxis = new Vector2(Math.cos(angleDelta * i + offsetAngle), Math.sin(angleDelta * i + offsetAngle))
let secondAxis = new Vector2(Math.cos(angleDelta * i + Math.PI / 2 + offsetAngle), Math.sin(angleDelta * i + Math.PI / 2 + offsetAngle))
//Translate the motion into this card's axes
let primaryAxisMovement = new Vector2(primaryAxis.x * primary, primaryAxis.y * primary)
let secondAxisMovement = new Vector2(secondAxis.x * second, secondAxis.y * second)
//Get the current location (strip the 'px') and add the change in position.
let div = cards[i];
let location = new Vector2(parseFloat(div.style.left) + primaryAxisMovement.x + secondAxisMovement.x, parseFloat(div.style.top) + primaryAxisMovement.y + secondAxisMovement.y)
//Reappend 'px'
div.style.left = location.x + "px"
div.style.top = location.y + "px"
}
}
}
})
document.body.addEventListener("mousedown", () => mouseDown = true)
document.body.addEventListener("mouseup", () => mouseDown = false)
function initDivs() {
//Create all the cards
cards = [];
tableElement.innerHTML = "";
for (let i = 0; i < playerCount; i++) {
let div = document.createElement("div");
tableElement.appendChild(div);
div.classList.add("card")
if (i == 0) div.classList.add("current")
else div.classList.add("ghost")
let radians = angleDelta * i;
div.style.left = (radius - cardWidth / 2 + Math.cos(radians + offsetAngle) * (radius - cardWidth / 2)) + "px";
div.style.top = (radius - cardHeight / 2 + Math.sin(radians + offsetAngle) * (radius - cardHeight / 2)) + "px"
cards.push(div);
}
}
function playerChange() {
playerCount = +document.querySelector("#playerText").value;
angleDelta = Math.PI * 2 / playerCount;
initDivs();
angleChange();
}
function angleChange() {
//Convert from degrees to radians
offsetAngle = parseFloat(document.querySelector("#angleText").value) * Math.PI / 180;
initDivs();
update();
}
playerChange();
