Javascriptでマインスイーパをつくる(群雄割拠編)ソリューション事業部テラダです。
Javascript。マイブームです。いえ、マイブームどころじゃないですね。
フロントラインでは業界的に一大センセーションの大ロングセラーです。
特にAPIを利用したマッシュアップコンテンツなんかでは必需品ですよね。APIに限らずブログなどのCMSが吐き出すフィードを利用して、リッチなインターフェースも当たり前になりつつあるのかもしれません。
ということで自由にインターフェースづくりが出来るようにと、遅ればせながら最近Javascriptの勉強を始めたわけですが、楽しい!
非プログラマな僕でもprototype.jsやjqueryなどを始めとするライブラリも日本語ドキュメントと共に充実してきたので、いつでもどこでも楽しく勉強が始められます。
今回はプログラミングの練習にはゲームをつくるのがイイ(と勝手に思ってる)ので、みんな大好きマインスイーパを作ってみました。
ええと、そうですよね。いろいろ足りてないんですよね。というかマインスイーパと呼ぶのはマズイ感じです。第6感スイーパとでもしておきましょうか。
何事も晒さないことには上達しないということで、次回機会があれば、完成版を披露したいと思いますが、現在つまづいているのは(コードがヒドイ!というのは置いといて)
・爆弾の場所のヒントになるアノ数字の計算方法がわからない
・爆弾の配置場所を決める乱数がユニークではない
というところで主につまづいています。
実際、検索してみると、完成品は出回っているのですぐにクリアできると思うのですが、
プログラムは表現(と勝手に思っている)なので、もう少しあがいておこうと思います。
とか言いつつ、この恥ずかしいコードをさらしておくと、きっとプログラマのTさんやIさんが明日にでもそっと優しく指導して頂けるかもしれないので公開。
var divObj = $("msStage");
var pObj = document.createElement("ul");
var bObj = document.createElement("p");
divObj.style.cssText="border: 2px solid #000000;margin:24px;padding:0px;width:0px;height:0px;";
pObj.style.cssText="margin: 0px;padding: 0px";
divObj.appendChild(pObj);
divObj.appendChild(bObj);
function gameReset(){
pObj.innerHTML="";
bObj.innerHTML="";
divObj.style.cssText="border: 2px solid #000000;margin:24px;padding:0px;width:0px;height:0px;";
}
function loadStage(level){
if(pObj.childNodes){pObj.innerHTML=""; bObj.innerHTML="";}
var pCount = level*level;
divObj.style.width=30*level+"px";
divObj.style.height=30*level+"px";
loadPanel(pCount);
}
function loadPanel(pNum){
var bombs =[]; var bArr = []; var sArr=[];
bombs = createBomb(pNum);
for(var i=0;i