09-04-2010, 23:09
Niedawno zacząłem pracę z JS, jednak w pierwszym skrypcie natknąłem się na problem 
Skrypt ma za zadanie losowo napełniać tabelę jednym z 4 kolorów, kwadratów jednego koloru ma być 9.
Bardzo proszę o pomoc!
Skrypt ma za zadanie losowo napełniać tabelę jednym z 4 kolorów, kwadratów jednego koloru ma być 9.
Kod:
var colours = new Array("blue", "green", "yellow", "red");
var usedColours = new Array(9,9,9,9);
window.onload = setColours();
function setColours() {
for(var i = 0; i < 6; i++) {
for(var j = 0; j < 6; j++) {
var newCol = getNum();
var theSquare = "square" + i + j;
document.getElementById(theSquare).className = colours[newCol]; // problem prawdopodobnie tutaj
}
}
}
function getNum() {
do {
var num = Math.floor(Math.random() * 4);
}
while(usedColours[num] == 0);
usedColours[num]--;
return num;
}Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Gra Kolory</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="gra.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<p id="naglowek">
Kolory
</p>
<div id="gra">
<table id="tabelaGry">
<tr>
<td class="linkDown"></td>
<td class="linkDown">v</td>
<td class="linkDown">v</td>
<td class="linkDown">v</td>
<td class="linkDown">v</td>
<td class="linkDown">v</td>
<td class="linkDown">v</td>
</tr>
<tr>
<td class="linkRight">></td>
<td id="square00" class=""> </td>
<td id="square01" class=""> </td>
<td id="square02" class=""> </td>
<td id="square03" class=""> </td>
<td id="square04" class=""> </td>
<td id="square05" class=""> </td>
</tr>
<tr>
<td class="linkRight">></td>
<td id="square10" class=""> </td>
<td id="square11" class=""> </td>
<td id="square12" class=""> </td>
<td id="square13" class=""> </td>
<td id="square14" class=""> </td>
<td id="square15" class=""> </td>
</tr>
<tr>
<td class="linkRight">></td>
<td id="square20" class=""> </td>
<td id="square21" class=""> </td>
<td id="square22" class=""> </td>
<td id="square23" class=""> </td>
<td id="square24" class=""> </td>
<td id="square25" class=""> </td>
</tr>
<tr>
<td class="linkRight">></td>
<td id="square30" class=""> </td>
<td id="square31" class=""> </td>
<td id="square32" class=""> </td>
<td id="square33" class=""> </td>
<td id="square34" class=""> </td>
<td id="square35" class=""> </td>
</tr>
<tr>
<td class="linkRight">></td>
<td id="square40" class=""> </td>
<td id="square41" class=""> </td>
<td id="square42" class=""> </td>
<td id="square43" class=""> </td>
<td id="square44" class=""> </td>
<td id="square45" class=""> </td>
</tr>
<tr>
<td class="linkRight">></td>
<td id="square50" class=""> </td>
<td id="square51" class=""> </td>
<td id="square52" class=""> </td>
<td id="square53" class=""> </td>
<td id="square54" class=""> </td>
<td id="square55" class=""> </td>
</tr>
</table>
</div>
<a href="#" id="newGame">Nowa plansza</a>
</div>
</body>
</html>Kod:
#content {
margin: 50px auto;
border: 1px solid black;
width: 700px;
background: white;
}
#naglowek{
text-align: center;
font-size: 32px;
display: block;
font-weight: bold;
}
#gra {
border: 1px solid black;
margin: 10px auto;
height: 300px;
width: 600px;
padding: 30px;
}
#tabelaGry {
border-collapse: collapse;
margin: 0 auto;
}
td {
border: 1px solid black;
height: 40px;
width:40px;
}
.linkDown, .linkRight {
text-align: center;
border: none;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}Bardzo proszę o pomoc!
