2

我尝试展示一些免费扑克游戏（HTML/Javascript 客户端、python 服务器）游戏的筹码。桌子中央有座位。对于每个座位，我知道 cosinus、sinus、半径（距桌子中心的距离）和值/计数芯片数组。

我尝试在座位点的切线上显示每个芯片对齐和平衡

在图像中：（我无法创建图像：http: //i.stack.imgur.com/a4Obw.png）

现在，我写了这段代码：

function balanced_stack( chips, cos, sin, radius ) 
{
    var html = ''

    // I receive a chips array like [ [ 100, 8 ], [ 200, 10 ], [ 500, 7 ] ]
    // so 8 chips of 100$, 10 chips of 200$ .. etc
    for(var i in chips) 
    {
        var value = chips[i][0]; // the token value
        var count = chips[i][1]; // the token count

        var m = 0; // margin for a single stack
        var left = i * 20 * sin + cos * radius;
        var top = -i * 20 * cos + sin * radius;

        for( var j=1; j<= count; j++ ) 
        {       
            html += '<img style="z-index:'+( parseInt(top) + 9999)+'; left:'+left+'px; top: '+top+'px; margin-top:'+( -2*m )+'px;" \
                            src="/images/chips/'+value+'.png" />'
            m ++;
        }

        return html
    }
}

但它不平衡，也不好看。

add : cosinus 和 sinus 可以大于 1 小于 -1 因为表格可能是椭圆形的

4

4 回答 4

1

如果椭圆由 {a*cos(x),b*sin(x)} 定义，则切线为 {-a*sin(x),b*cos(x)}。使用将椭圆轴与桌子周围角度的正弦/余弦相结合的定义不允许您轻松提取。此外，将这个量称为 sin/cos 似乎是个坏主意，因为它们的数学定义仅限于 -1 到 +1 域......

于 2010-12-15T16:58:13.483 回答
0

我有点盲目地尝试了解决方案，我写道：（这似乎有效）

var left = (i * ((20*a) - 20) * sin * a) + (cos * radius * a); 
var top = -(i * ((20*a) - 20) * cos * b) + (sin * radius * b);

你能解释一下为什么会这样吗？我数学很弱。

椭圆表周围有 20 个假玩家（a=1.6，b=1）：

替代文字

于 2010-12-16T11:14:37.437 回答
0

我想我用 SEngstrom 方程解决了切线问题。所有芯片都在右切线上对齐。你可以在这里看到：替代文字

function( chips, cos, sin, radius ) 
{
    var html = ''

    // Considering the equation for the tangent {a*cos(x),b*cos(x)}+d*{-a*sin(x),b*cos(x)}
    var a = 1.6; // x coefficient for the ellipse
    var b = 1; // y coefficient for the ellipse


    // I receive a chips array like [ [ 100, 8 ], [ 200, 10 ], [ 500, 7 ] ], so 8 chips of 100$, 10 chips of 200$ .. etc
    for(var i in chips) 
    {
        var value = chips[i][0]; // the token value
        var count = chips[i][1]; // the token count

        var m = 0; // margin for a single stack

        var left = i * 20 * sin * a + cos * radius * a; 
        var top = -i * 20 * cos * b + sin * radius * b;

        for( var j=1; j<= count; j++ ) 
        {       
            html += '<img style="z-index:'+( parseInt(top) + 9999)+'; left:'+left+'px; top: '+top+'px; margin-top:'+( -2*m )+'px;" \
                            class="chip chip_'+value+'" src="/images/chips/'+CHIPS.COLORS[ value ]+'.png" />'
            m ++;
        }       
    }
    return html
}

但是正如你所看到的，每个堆栈之间都有一个空白区域，因为一个芯片的宽度是 20px，使用常规 cos/sin 就可以了，但是在这里，每个堆栈之间的距离被椭圆系数放大（i * 20 *罪*一）

于 2010-12-16T09:26:10.847 回答
0

这样想：代码中 (left,top) 的第二项找到堆栈的中心。为此，您要沿切线添加堆栈。由于您的堆栈是由像素宽度定义的，添加到中心点的术语的形式可以有 i*pxwidth*{nx,ny} 的方便形式，其中 nx 和 ny 是 (x,y) 的分量归一化切线向量，'i' 是一个整数，对各个堆栈进行计数，而 pxwidth 是所需的像素宽度。如果 sin 和 cos 是真正的正弦/余弦，则 (-sin,cos) 已经是归一化向量，因为 sin^2+cos^2=1。

我在您的代码中不明白的是 ((20*a)-20) 等于 20*(a-1)。a>1 的某种校正因子。它对于 b 是不对称的，但是对于 b = 1 它将为零...

于 2010-12-16T18:26:24.850 回答