基于随机数的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类

回答

相关问题