Question

我有一个4x3矩阵，其中类被设置为空白（白色背景）。我正在使用 var rand = Math.floor(Math.random()*2 + 1);
如果为1，则将类设置为1（红色背景），如果为2，则将类设置为2（蓝色背景）。我的代码假设使用newgame函数使6个链接为红色，6个链接为蓝色，但是，有时其中一些仍然是白色或者没有正好6个红色或蓝色。您可能需要刷新（而不是单击新游戏按钮）以查看我的意思

这里是现场：https://dl.dropbox.com/u/750932/iPhone/risk.html

<!DOCTYPE html>
<html>
<head>
<title>RISK</title>
<style type="text/css" media="screen">
    a:link, a:visited {color: #eee;border:3px solid #ccc;display:inline-block;margin:3px;text-decoration:none;padding:26px;}
    .blank {background:#fff;}
    .one {background: #7B3B3B;}
    .two {background: #547980;}
    #status {color: #eee;padding:1px;text-align:center}
    .current {border:3px solid #000;}
    p {margin:0 0 15px;padding:0;}
</style>
<script type="text/javascript" charset="utf-8">
var oneTurn = true;
var gameOver = false;
var numMoves = 0;

function newgame()
{
    var status = document.getElementById('status');
    var one = 0;
    var two = 0;
    numMoves = 0;
    gameOver = false;
    oneTurn = true;
    status.innerHTML = 'Player One\'s turn';

    for(var x = 0; x < 4; x++)
    {
        for(var y = 0; y < 3; y++)
        {
            var rand = Math.floor(Math.random()*2 + 1);
            if(rand == 1 && one < 7)
            {
                document.getElementById('a' + x + '_' + y).setAttribute("class", "one");
                one++;
                console.log("one");
            }
            else if(rand == 2 && two < 7)
            {
                document.getElementById('a' + x + '_' + y).setAttribute("class", "two");
                two++;
                console.log("two");
            }
            document.getElementById('a' + x + '_' + y).innerHTML = Math.floor(Math.random()*5 + 1);
        }
    }
    console.log(one);
    console.log(two);
}
function current(selected)
{
    var status = document.getElementById('status');
    var value = selected.value; 
}
</script>
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>

<body onload='newgame();'>
<p id="status" class="one">Player One's turn</p>
<br />
<a href="#" id="a0_0" class="blank" onclick="current(this);"></a>
<a href="#" id="a1_0" class="blank" onclick="current(this);"></a>
<a href="#" id="a2_0" class="blank" onclick="current(this);"></a>
<a href="#" id="a3_0" class="blank" onclick="current(this);"></a>
<br />

<a href="#" id="a0_1" class="blank" onclick="current(this);"></a>
<a href="#" id="a1_1" class="blank" onclick="current(this);"></a>
<a href="#" id="a2_1" class="blank" onclick="current(this);"></a>
<a href="#" id="a3_1" class="blank" onclick="current(this);"></a>
<br />

<a href="#" id="a0_2" class="blank" onclick="current(this);"></a>
<a href="#" id="a1_2" class="blank" onclick="current(this);"></a>
<a href="#" id="a2_2" class="blank" onclick="current(this);"></a>
<a href="#" id="a3_2" class="blank" onclick="current(this);"></a>
<br /><br />

<p><input type="button" id="newgame" value="New Game" onclick="newgame();" /></p>
</body>
</html>

Answer 1

让我给你一个稍微不同的方法。将板表示为12个整数的数组。

将此阵列的前半部分填充为一个，将后半部分填充为两个。
随机播放阵列

循环遍历数组并通过将数组索引转换为矩阵中对应的行和列来更新DOM元素

// initialize the array
var board = [1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2];

// shuffle the array
for(var j, x, i = board.length; i; j = parseInt(Math.random() * i), 
    x = board[--i], board[i] = board[j], board[j] = x);

// At this stage one's and two's will be randomly distributed
var row = -1;
for (var i = 0; i < board.length; i++) {
    var class = board[i] == 1 ? 'one' : 'two';
    var col = i % 4;
    if (col == 0) row++;
    var box = document.getElementById('a' + col + '_' + row);
    if (box != null) {
        box.setAttribute('class', class);
        box.innerHTML = 1 + Math.floor(Math.random() * 5);
    }
}

Answer 2

再次阅读您的代码：

if(rand == 1 && one < 7)
...
else if(rand == 2 && two < 7)

一旦你将红色滚动超过六次，或者蓝色超过六次，你的代码就不会对该方块做任何事情，这就是你最终得到白色方块的原因。

尝试这样的事情：

if((rand == 1 && one <= 6) || two > 6)
...
else

基于随机数的Javascript css类

2 个答案: