知識的に限界かと思うところに来ました。
コード:
<html>
<head>
<script type="text/javascript" src="test2_.js"></script>
<link rel="stylesheet" type="text/css" href="test2X.css">
<script type="text/javascript">
<!--
bashoko=new Array(
"c37",
"c38",
"c39",
"c40",
"c41",
"c42",
"c43",
"c44",
"c45",
"c46",
"c47",
"c48",
"c49",
"c50",
"c51",
"c52",
"c53",
"c54",
"c55",
"c56",
"c57",
"c58",
"c59",
"c60",
"c61",
"c62",
"c63",
"c64",
"c65",
"c66",
"c67",
"c68",
"c69",
"c70",
"c71",
"c72"
);
var iroEX
var bashoEX
var kotae1
var kotae2
function mondai()
{
iroEX=Math.floor( Math.random() * 9 );
bashoEX=Math.floor( Math.random() * 36 );
document.getElementById(bashoko[bashoEX]).style.backgroundColor=iroko[iroEX];
kotae1=iroko[iroEX];
kotae2=bashoko[bashoEX];
alert(kotae1);
alert(kotae2);
setTimeout('mes()',500);
}
function mes()
{
document.getElementById(bashoko[bashoEX]).style.backgroundColor="#FFFFFF";
}
function awase()
{
if(kotae1=kotaec1){
alert("色正解")
}else{
alert("色ハズレ")
}
if(kotae2=kotaec2){
alert("場所正解")
}else{
alert("場所ハズレ")
}
}
iroko = new Array(
"#0000FF",
"#FFFF00",
"#FF00FF",
"#B22222",
"#228B22",
"#0000FF",
"#87CEEB",
"#8B008B",
"#808080"
);
// -->
</script>
</head>
<body onLoad="mondai()">
<div class="aaa">
<table cellspacing="0">
<tr>
<th class="bbb">
<table cellspacing="0">
<tr>
<th class="ccc" id="c37" onClick="cc37(document.getElementById('c37'))"></th>
<th class="ccc" id="c38" onClick="cc38(document.getElementById('c38'))"></th>
<th class="ccc" id="c39" onClick="cc39(document.getElementById('c39'))"></th>
<th class="ccc" id="c40" onClick="cc40(document.getElementById('c40'))"></th>
<th class="ccc" id="c41" onClick="cc41(document.getElementById('c41'))"></th>
<th class="ccc" id="c42" onClick="cc42(document.getElementById('c42'))"></th>
</tr>
<tr>
<th class="ccc" id="c43" onClick="cc43(document.getElementById('c43'))"></th>
<th class="ccc" id="c44" onClick="cc44(document.getElementById('c44'))"></th>
<th class="ccc" id="c45" onClick="cc45(document.getElementById('c45'))"></th>
<th class="ccc" id="c46" onClick="cc46(document.getElementById('c46'))"></th>
<th class="ccc" id="c47" onClick="cc47(document.getElementById('c47'))"></th>
<th class="ccc" id="c48" onClick="cc48(document.getElementById('c48'))"></th>
</tr>
<tr>
<th class="ccc" id="c49" onClick="cc49(document.getElementById('c49'))"></th>
<th class="ccc" id="c50" onClick="cc50(document.getElementById('c50'))"></th>
<th class="ccc" id="c51" onClick="cc51(document.getElementById('c51'))"></th>
<th class="ccc" id="c52" onClick="cc52(document.getElementById('c52'))"></th>
<th class="ccc" id="c53" onClick="cc53(document.getElementById('c53'))"></th>
<th class="ccc" id="c54" onClick="cc54(document.getElementById('c54'))"></th>
</tr>
<tr>
<th class="ccc" id="c55" onClick="cc55(document.getElementById('c55'))"></th>
<th class="ccc" id="c56" onClick="cc56(document.getElementById('c56'))"></th>
<th class="ccc" id="c57" onClick="cc57(document.getElementById('c57'))"></th>
<th class="ccc" id="c58" onClick="cc58(document.getElementById('c58'))"></th>
<th class="ccc" id="c59" onClick="cc59(document.getElementById('c59'))"></th>
<th class="ccc" id="c60" onClick="cc60(document.getElementById('c60'))"></th>
</tr>
<tr>
<th class="ccc" id="c61" onClick="cc61(document.getElementById('c61'))"></th>
<th class="ccc" id="c62" onClick="cc62(document.getElementById('c62'))"></th>
<th class="ccc" id="c63" onClick="cc63(document.getElementById('c63'))"></th>
<th class="ccc" id="c64" onClick="cc64(document.getElementById('c64'))"></th>
<th class="ccc" id="c65" onClick="cc65(document.getElementById('c65'))"></th>
<th class="ccc" id="c66" onClick="cc66(document.getElementById('c66'))"></th>
</tr>
<tr>
<th class="ccc" id="c67" onClick="cc67(document.getElementById('c67'))"></th>
<th class="ccc" id="c68" onClick="cc68(document.getElementById('c68'))"></th>
<th class="ccc" id="c69" onClick="cc69(document.getElementById('c69'))"></th>
<th class="ccc" id="c70" onClick="cc70(document.getElementById('c70'))"></th>
<th class="ccc" id="c71" onClick="cc71(document.getElementById('c71'))"></th>
<th class="ccc" id="c72" onClick="cc72(document.getElementById('c72'))"></th>
</tr>
</table>
</th>
<th class="bbb">
<table cellspacing="0">
<tr>
<th class="ccc" id="c1" onClick="cc1(document.getElementById('c1'))"></th>
<th class="ccc" id="c2" onClick="cc2(document.getElementById('c2'))"></th>
<th class="ccc" id="c3" onClick="cc3(document.getElementById('c3'))"></th>
<th class="ccc" id="c4" onClick="cc4(document.getElementById('c4'))"></th>
<th class="ccc" id="c5" onClick="cc5(document.getElementById('c5'))"></th>
<th class="ccc" id="c6" onClick="cc6(document.getElementById('c6'))"></th>
</tr>
<tr>
<th class="ccc" id="c7" onClick="cc7(document.getElementById('c7'))"></th>
<th class="ccc" id="c8" onClick="cc8(document.getElementById('c8'))"></th>
<th class="ccc" id="c9" onClick="cc9(document.getElementById('c9'))"></th>
<th class="ccc" id="c10" onClick="cc10(document.getElementById('c10'))"></th>
<th class="ccc" id="c11" onClick="cc11(document.getElementById('c11'))"></th>
<th class="ccc" id="c12" onClick="cc12(document.getElementById('c12'))"></th>
</tr>
<tr>
<th class="ccc" id="c13" onClick="cc13(document.getElementById('c13'))"></th>
<th class="ccc" id="c14" onClick="cc14(document.getElementById('c14'))"></th>
<th class="ccc" id="c15" onClick="cc15(document.getElementById('c15'))"></th>
<th class="ccc" id="c16" onClick="cc16(document.getElementById('c16'))"></th>
<th class="ccc" id="c17" onClick="cc17(document.getElementById('c17'))"></th>
<th class="ccc" id="c18" onClick="cc18(document.getElementById('c18'))"></th>
</tr>
<tr>
<th class="ccc" id="c19" onClick="cc19(document.getElementById('c19'))"></th>
<th class="ccc" id="c20" onClick="cc20(document.getElementById('c20'))"></th>
<th class="ccc" id="c21" onClick="cc21(document.getElementById('c21'))"></th>
<th class="ccc" id="c22" onClick="cc22(document.getElementById('c22'))"></th>
<th class="ccc" id="c23" onClick="cc23(document.getElementById('c23'))"></th>
<th class="ccc" id="c24" onClick="cc24(document.getElementById('c24'))"></th>
</tr>
<tr>
<th class="ccc" id="c25" onClick="cc25(document.getElementById('c25'))"></th>
<th class="ccc" id="c26" onClick="cc26(document.getElementById('c26'))"></th>
<th class="ccc" id="c27" onClick="cc27(document.getElementById('c27'))"></th>
<th class="ccc" id="c28" onClick="cc28(document.getElementById('c28'))"></th>
<th class="ccc" id="c29" onClick="cc29(document.getElementById('c29'))"></th>
<th class="ccc" id="c30" onClick="cc30(document.getElementById('c30'))"></th>
</tr>
<tr>
<th class="ccc" id="c31" onClick="cc31(document.getElementById('c31'))"></th>
<th class="ccc" id="c32" onClick="cc32(document.getElementById('c32'))"></th>
<th class="ccc" id="c33" onClick="cc33(document.getElementById('c33'))"></th>
<th class="ccc" id="c34" onClick="cc34(document.getElementById('c34'))"></th>
<th class="ccc" id="c35" onClick="cc35(document.getElementById('c35'))"></th>
<th class="ccc" id="c36" onClick="cc36(document.getElementById('c36'))"></th>
</tr>
</table>
</th>
</tr>
</table>
<div class="ddd">
<div class="eee" id="e0">
</div>
<table cellspacing=0>
<tr>
<th class="eee" id="e1" style="background-color:#FFFFFF" onClick="chgColor1(document.getElementById('e0'))"></th>
<th class="eee" id="e2" style="background-color:#FFFF00" onClick="chgColor2(document.getElementById('e0'))"></th>
<th class="eee" id="e3" style="background-color:#FF0000" onClick="chgColor3(document.getElementById('e0'))"></th>
<th class="eee" id="e4" style="background-color:#FF00FF" onClick="chgColor4(document.getElementById('e0'))"></th>
<th class="eee" id="e5" style="background-color:#B22222" onClick="chgColor5(document.getElementById('e0'))"></th>
</tr>
<tr>
<th class="eee" id="e6" style="background-color:#228B22" onClick="chgColor6(document.getElementById('e0'))"></th>
<th class="eee" id="e7" style="background-color:#0000FF" onClick="chgColor7(document.getElementById('e0'))"></th>
<th class="eee" id="e8" style="background-color:#87CEEB" onClick="chgColor8(document.getElementById('e0'))"></th>
<th class="eee" id="e9" style="background-color:#8B008B" onClick="chgColor9(document.getElementById('e0'))"></th>
<th class="eee" id="e10" style="background-color:#808080" onClick="chgColor10(document.getElementById('e0'))"></th>
</tr>
</table>
<form>
<input type="button" value="答!" onclick="awase()">
<input type="button" value="OK!" onclick="mondai()">
</form>
</div>
<div class="fff">
</div>
<div class="ggg">
</div>
<table cellspacing=0>
<tr>
<th class="hhh"></th>
<th class="hhh"></th>
<th class="hhh"></th>
</tr>
</table>
<div class="iii">
</div>
</div>
</body>
</html>
test2_.js
コード:
//色を送る。
var iro
function chgColor1(obj)
{
obj.style.backgroundColor = "#FFFFFF";
iro="#FFFFFF"
}
function chgColor2(obj)
{
obj.style.backgroundColor = "#FFFF00";
iro="#FFFF00"
}
function chgColor3(obj)
{
obj.style.backgroundColor = "#FF0000";
iro="#FF0000"
}
function chgColor4(obj)
{
obj.style.backgroundColor = "#FF00FF";
iro="#FF00FF"
}
function chgColor5(obj)
{
obj.style.backgroundColor = "#B22222";
iro="#B22222"
}
function chgColor6(obj)
{
obj.style.backgroundColor = "#228B22";
iro="#228B22"
}
function chgColor7(obj)
{
obj.style.backgroundColor = "#0000FF";
iro="#0000FF"
}
function chgColor8(obj)
{
obj.style.backgroundColor = "#87CEEB";
iro="#87CEEB"
}
function chgColor9(obj)
{
obj.style.backgroundColor = "#8B008B";
iro="#8B008B"
}
function chgColor10(obj)
{
obj.style.backgroundColor = "#808080";
iro="#808080"
}
//さらに色を送る。
var kotaec1
var kotaec2
function cc1(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c37;
}
function cc2(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c38;
}
function cc3(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c39;
}
function cc4(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c40;
}
function cc5(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c41;
}
function cc6(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c42;
}
function cc7(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c43;
}
function cc8(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c44;
}
function cc9(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c45;
}
function cc10(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c46;
}
function cc11(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c47;
}
function cc12(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c48;
}
function cc13(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c49;
}
function cc14(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c50;
}
function cc15(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c51;
}
function cc16(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c52;
}
function cc17(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c53;
}
function cc18(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c54;
}
function cc19(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c55;
}
function cc20(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c56;
}
function cc21(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c57;
}
function cc22(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c58;
}
function cc23(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c59;
}
function cc24(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c60;
}
function cc25(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c61;
}
function cc26(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c62;
}
function cc27(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c63;
}
function cc28(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c64;
}
function cc29(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c65;
}
function cc30(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c66;
}
function cc31(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c67;
}
function cc32(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c68;
}
function cc33(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c69;
}
function cc34(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c70;
}
function cc35(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c71;
}
function cc36(obj)
{
obj.style.backgroundColor = iro;
kotaec1=iro;
kotaec2=c72;
}
cssは変えてないです。
正解したらレベルが上がって、レベルの数だけ表示される色の数が増える。という風にしたいのと
それを答え合わせる。ということです。左の画面で表示されて右の画面で答えを色で作ってそれを照らし合わせて正解したらレベルアップ、間違えたら同じレベルをやるのと3回間違えたら記録されるようにしたいです。
よくわからなすぎてどうしようもないです。
他サイトなどでどういうところを見ればいいか教えてください。
できればここはifやforを使えばできるなど教えてください。