Home/ Questions/Q 527599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T08:54:01+00:00

I have a 4×3 matrix where the class is set to blank (white background).

  • 0

I have a 4×3 matrix where the class is set to blank (white background). I’m using
var rand = Math.floor(Math.random()*2 + 1);
and if its 1, the class is set to one (red background) and if its 2, the class is set to two (blue background). My code is suppose to make 6 links red and 6 links blue with the newgame function, however, sometimes a few of them are still white or there are not exactly 6 red or blue. You might need to refresh (not click new game button) to see what I mean

here it is live: 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Let me offer you a slightly different approach. Represent the board as an array of 12 integers.

    1. Fill the first half of this array with one’s and the second half with two’s.
    2. Shuffle the array

    3. Loop through the array and update the DOM elements by converting the array index to the corresponding row and column in the matrix

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