基於隨機數的Javascript css類

我有一個4x3矩陣，其中類設置爲空白（白色背景）。我正在使用 var rand = Math.floor(Math.random()*2 + 1);
並且如果它的1，類設置爲1（紅色背景）並且如果它的2，類設置爲2（藍色背景）。我的代碼是假設6個鏈接是紅色的，6個鏈接是使用newgame函數藍色的，但是有時候它們中的一些仍然是白色的，或者不完全是6個紅色或藍色。您可能需要刷新（不要點擊新遊戲按鈕），明白我的意思基於隨機數的Javascript css類

這裏是現場：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>

來源

2010-01-01 Raptrex

讓我你一個稍微不同的方式提供。將該板表示爲12個整數的數組。

用這個填充這個數組的前半部分，用第二個填充2。
洗牌陣列

循環通過陣列和由在基質

// 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); 
    } 
}

來源

2010-01-01 09:06:16

謝謝，這工作 – Raptrex 2010-01-01 09:16:00

再次閱讀你的代碼：

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

一旦你滾紅色超過六次，或者藍色超過六次，你的代碼對這個方塊沒有任何作用，這就是爲什麼你最終得到白色方塊。

嘗試這樣：

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

來源

2010-01-01 08:56:57

數組索引轉化爲相應的行和列更新DOM元素好嗎這解決了白色正方形的問題。但是，有時我並沒有完全6紅和6藍。 – Raptrex 2010-01-01 09:10:39

基於隨機數的Javascript css類

回答

相關問題