JavaScriptでオセロ盤を作ってみた
ちょっとJavaScriptの勉強がてら、オセロ盤*1を作ってみました。我ながらなんとセンスのないプログラムか・・・。作成に掛かったのは4hぐらいっす。
んで、Firefoxだと動いたんだけども、IE7じゃ動かなかった。わけが分からん・・・。
↓これをメモ帳にコピペして拡張子を.htmlで保存すれば、ブラウザでオセロが楽しめます。
<html> <head> <style type="text/css"> <!-- #con { font-family : 'ＭＳ ゴシック', 'Osaka-等幅'; line-Height : 1em; } div span{ cursor: pointer; } --> </style> <script language="JavaScript" type="text/javascript"> <!-- var gBoard = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,-1, 0, 0, 0, 0, 0, 0,-1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ]; var gTurn = -1; function $(id){return document.getElementById(id);} function show() { for(x = 0; x < 8; x++){ for(y = 0; y < 8; y++){ switch(gBoard[y * 8 + x]){ case 1: $('sq' + y + x).innerHTML = "○"; break; case -1: $('sq' + y + x).innerHTML = "●"; break; default: $('sq' + y + x).innerHTML = " "; break; } } } $('info').innerHTML = ""; count(); ShowTurn(); } function ShowTurn() { $('info').innerHTML += (gTurn < 0 ? "黒":"白") + "の番です。"; } function reverse(y,x,wy,wx,s) { if(y < 0 || y > 7 || x < 0 || x > 7) return -1; if(gBoard[y * 8 + x] == 0) return -1; if(gBoard[y * 8 + x] == s) return 0; var result = reverse(y + wy, x + wx, wy, wx, s); if(result < 0) return -1; gBoard[y * 8 + x] = s; return result + 1; } function PutStone(y,x) { if(gBoard[y * 8 + x] != 0) return; var way = new Array(8); way[0] = new Array( -1, 0); way[1] = new Array( -1, 1); way[2] = new Array( 0, 1); way[3] = new Array( 1, 1); way[4] = new Array( 1, 0); way[5] = new Array( 1, -1); way[6] = new Array( 0, -1); way[7] = new Array( -1, -1); var check = -1; for(i = 0; i < 8; i++){ if(reverse(y + way[i][0], x + way[i][1], way[i][0], way[i][1], gTurn) > 0){ check = 1; } } if(check == -1) return; gBoard[y * 8 + x] = gTurn; gTurn *= -1; show(); } function pass() { gTurn *= -1; $('info').innerHTML += '<br>パスしました。<br>'; ShowTurn(); } function count() { var cnt_b = 0; var cnt_w = 0; for(i = 0; i < 64; i++){ cnt_b += gBoard[i] < 0 ? 1 : 0; cnt_w += gBoard[i] > 0 ? 1 : 0; } $('info').innerHTML += "黒：" + cnt_b + " - 白：" + cnt_w + "<br>"; } // --> </script> </head> <body onLoad="show()"> <noscript> (´･ω･｀) 遊べないよ。<br> </noscript> <form name="form1"> <input value="パス" type="button" onClick="pass()"> <div id="con"> ┌─┬─┬─┬─┬─┬─┬─┬─┐<br> │<span id="sq00" onClick="PutStone(0,0)"> </span>│<span id="sq01" onClick="PutStone(0,1)"> </span>│<span id="sq02" onClick="PutStone(0,2)"> </span>│<span id="sq03" onClick="PutStone(0,3)"> </span>│<span id="sq04" onClick="PutStone(0,4)"> </span>│<span id="sq05" onClick="PutStone(0,5)"> </span>│<span id="sq06" onClick="PutStone(0,6)"> </span>│<span id="sq07" onClick="PutStone(0,7)"> </span>│<br> ├─┼─┼─┼─┼─┼─┼─┼─┤<br> │<span id="sq10" onClick="PutStone(1,0)"> </span>│<span id="sq11" onClick="PutStone(1,1)"> </span>│<span id="sq12" onClick="PutStone(1,2)"> </span>│<span id="sq13" onClick="PutStone(1,3)"> </span>│<span id="sq14" onClick="PutStone(1,4)"> </span>│<span id="sq15" onClick="PutStone(1,5)"> </span>│<span id="sq16" onClick="PutStone(1,6)"> </span>│<span id="sq17" onClick="PutStone(1,7)"> </span>│<br> ├─┼─┼─┼─┼─┼─┼─┼─┤<br> │<span id="sq20" onClick="PutStone(2,0)"> </span>│<span id="sq21" onClick="PutStone(2,1)"> </span>│<span id="sq22" onClick="PutStone(2,2)"> </span>│<span id="sq23" onClick="PutStone(2,3)"> </span>│<span id="sq24" onClick="PutStone(2,4)"> </span>│<span id="sq25" onClick="PutStone(2,5)"> </span>│<span id="sq26" onClick="PutStone(2,6)"> </span>│<span id="sq27" onClick="PutStone(2,7)"> </span>│<br> ├─┼─┼─┼─┼─┼─┼─┼─┤<br> │<span id="sq30" onClick="PutStone(3,0)"> </span>│<span id="sq31" onClick="PutStone(3,1)"> </span>│<span id="sq32" onClick="PutStone(3,2)"> </span>│<span id="sq33" onClick="PutStone(3,3)"> </span>│<span id="sq34" onClick="PutStone(3,4)"> </span>│<span id="sq35" onClick="PutStone(3,5)"> </span>│<span id="sq36" onClick="PutStone(3,6)"> </span>│<span id="sq37" onClick="PutStone(3,7)"> </span>│<br> ├─┼─┼─┼─┼─┼─┼─┼─┤<br> │<span id="sq40" onClick="PutStone(4,0)"> </span>│<span id="sq41" onClick="PutStone(4,1)"> </span>│<span id="sq42" onClick="PutStone(4,2)"> </span>│<span id="sq43" onClick="PutStone(4,3)"> </span>│<span id="sq44" onClick="PutStone(4,4)"> </span>│<span id="sq45" onClick="PutStone(4,5)"> </span>│<span id="sq46" onClick="PutStone(4,6)"> </span>│<span id="sq47" onClick="PutStone(4,7)"> </span>│<br> ├─┼─┼─┼─┼─┼─┼─┼─┤<br> │<span id="sq50" onClick="PutStone(5,0)"> </span>│<span id="sq51" onClick="PutStone(5,1)"> </span>│<span id="sq52" onClick="PutStone(5,2)"> </span>│<span id="sq53" onClick="PutStone(5,3)"> </span>│<span id="sq54" onClick="PutStone(5,4)"> </span>│<span id="sq55" onClick="PutStone(5,5)"> </span>│<span id="sq56" onClick="PutStone(5,6)"> </span>│<span id="sq57" onClick="PutStone(5,7)"> </span>│<br> ├─┼─┼─┼─┼─┼─┼─┼─┤<br> │<span id="sq60" onClick="PutStone(6,0)"> </span>│<span id="sq61" onClick="PutStone(6,1)"> </span>│<span id="sq62" onClick="PutStone(6,2)"> </span>│<span id="sq63" onClick="PutStone(6,3)"> </span>│<span id="sq64" onClick="PutStone(6,4)"> </span>│<span id="sq65" onClick="PutStone(6,5)"> </span>│<span id="sq66" onClick="PutStone(6,6)"> </span>│<span id="sq67" onClick="PutStone(6,7)"> </span>│<br> ├─┼─┼─┼─┼─┼─┼─┼─┤<br> │<span id="sq70" onClick="PutStone(7,0)"> </span>│<span id="sq71" onClick="PutStone(7,1)"> </span>│<span id="sq72" onClick="PutStone(7,2)"> </span>│<span id="sq73" onClick="PutStone(7,3)"> </span>│<span id="sq74" onClick="PutStone(7,4)"> </span>│<span id="sq75" onClick="PutStone(7,5)"> </span>│<span id="sq76" onClick="PutStone(7,6)"> </span>│<span id="sq77" onClick="PutStone(7,7)"> </span>│<br> └─┴─┴─┴─┴─┴─┴─┴─┘<br> </div> <div id="info"></div> </form> </body> </html>
修正しました！
Ashさんの助言の通り直したらIEでも動きました！
さすがAshさん！そこにしびれるッ！あこがれるゥ〜！！
ありがとうございました(^o^)
