2008年11月12日: Javascriptでマインスイーパをつくる(リベンジ編)
[ソリューション事業部 寺田]
もはや誰も覚えていらっしゃらないと思うのですが、以前Javascriptでマインスイーパをつくる試みをやりまして全然できなかったのですが、こっそり勉強してリベンジしてみました。
ものすごくカオスなコードを晒します。
(function(){ var MineSweeper=function(){ this.elem=document.createElement("div"); document.body.appendChild(this.elem); this.init(); } MineSweeper.prototype={ init:function(){ this.elem.id="MineSweeper"; this.setStyle(); setTimeout(function(e){ return function(){ e.gameContainer=new mineSweeperContainer(e); e.gameControler=new mineSweeperControler(e); e.gameCore=new mineSweeperCore(e); } }(this),1500) }, setStyle:function(){ with(this.elem.style){ position="fixed"; width="100%"; height="100%"; left="0px"; top="0px"; backgroundColor="#000000"; color="#FFFFFF"; zIndex="30"; opacity=0.8; } this.overRay(this.elem,0.8); }, flash:function(){ this.timerId=setInterval(function(e){ var i=0; return function(){ if(i%2==0){ e.elem.style.backgroundColor="#ff0000"; }else{ e.elem.style.backgroundColor="#000000"; } i++; if(i==10)clearInterval(e.timerId); } }(this),100) }, Start:function(level){ }, End:function(){ document.body.removeChild(this.elem); } }; //ゲーム本体の親オブジェクト //----------------------------------------------------------// var mineSweeperContainer=function(parent){ this.root=parent; this.parent=parent.elem; this.elem=document.createElement("div"); this.parent.appendChild(this.elem); this.init(); }; mineSweeperContainer.prototype={ init:function(){ this.elem.id="mineSweeperContainer"; this.setStyle(); }, setStyle:function(){ with(this.elem.style){ position="absolute"; left=(document.body.clientWidth-500)/2+"px"; margin="120px auto"; backgroundColor="#FFFFFF"; width="500px"; height="540px"; color="#000000"; fontFamily="arial,helvetica,sans-serif"; zIndex="50"; opacity="0"; } this.overRay(this.elem,0.99); } }; //ゲームコントローラー //----------------------------------------------------------// var mineSweeperControler=function(root){ this.root=root; this.parent=root.gameContainer; this.parent.elem=root.gameContainer.elem; this.elem=document.createElement("div"); this.parent.elem.appendChild(this.elem); this.levels=["Easy","Normal","Hard"]; this.level=false; this.init(); }; mineSweeperControler.prototype={ init:function(){ this.elem.id="mineSweeperControler"; this.difficultySelect(); this.restartSwitch(); this.closeSwitch(); this.setStyle(); }, setStyle:function(){ with(this.elem.style){ position="absolute"; left="0px"; bottom="0px"; border="2px solid #000000"; backgroundColor="#000000"; opacity="1"; } }, difficultySelect:function(){ this.difficultySelect=[]; for(var i=0;i1 && bombY>1)this.cells[bombX-1][bombY-1].bombHint(true); if(bombX 1 && bombY 1)this.cells[bombX+1][bombY-1].bombHint(true); if(bombY>1)this.cells[bombX][bombY-1].bombHint(true); if(bombX>1)this.cells[bombX-1][bombY].bombHint(true); if(bombX 1 && cellY>1){ if(this.cells[cellX-1][cellY-1].open==false)this.cells[cellX-1][cellY-1].cellOpen(); }; if(cellX 1 && cellY 1){ if(this.cells[cellX+1][cellY-1].open==false)this.cells[cellX+1][cellY-1].cellOpen(); }; if(cellY>1){ if(this.cells[cellX][cellY-1].open==false)this.cells[cellX][cellY-1].cellOpen(); }; if(cellX>1){ if(this.cells[cellX-1][cellY].open==false)this.cells[cellX-1][cellY].cellOpen(); }; if(cellX 99){ with(e.timer.style){ textIndent="-60px"; letterSpacing="-120px"; fontSize="900px"; } } } }(this),1000); with(this.timer.style){ position="absolute"; left="0px"; right="0px"; top="0px"; lineHeight="0.8"; fontFamily="arial helvetica" fontSize="960px"; fontWeight="bold"; color="#000000"; margin="0px auto"; padding="0px"; zIndex="10"; } this.overRay(this.timer,0.5); }, bombCounter:function(i){ this.hasBombLength=i; this.bombCounter.id="bombCounter" this.bombCounter=document.createElement("p"); this.parent.insertBefore(this.bombCounter,this.elem); this.bombCounter.innerHTML=i; with(this.bombCounter.style){ color="#FFFFFF"; backgroundColor="#000000"; textAlign="center"; border="2px solid #a4a4a4"; margin="0px"; padding="12px"; fontSize="36px"; } }, checkBombLength:function(){ }, gameClear:function(){ clearInterval(this.timerId); alert("clear!"); }, gameOver:function(){ clearInterval(this.timerId); this.root.flash(); alert("bomb!!!"); }, End:function(){ if(this.timer)document.body.removeChild(this.timer); if(this.timerId)clearInterval(this.timerId); } }; //セル//--------------------------------------------------------------------------------// var mineCell=function(parent,x,y,cid){ this.cid=cid; this.neighborBomb=0; this.x=x; this.y=y; this.width=18+"px"; this.height=18+"px"; this.hasBomb=0; this.parent=parent; this.flag="P"; this.bomb="(B)"; this.open=false; this.init(); }; mineCell.prototype={ init:function(){ this.elem=document.createElement("li"); this.parent.elem.appendChild(this.elem); this.elem.onclick=function(e){ return function(){ e.leftClick(); }; }(this); this.elem.oncontextmenu=function(e){ return function(){ e.rightClick(); return false; } }(this); this.setStyle(); }, setStyle:function(){ with(this.elem.style){ border = "solid 1px #999999"; width = this.width; height = this.height; styleFloat = "left"; cssFloat = "left"; listStyle = "none"; fontSize = "10px"; textAlign = "center"; backgroundColor = "#0a0a0a"; } }, leftClick:function(){ if(this.parent.firstClick==true){ this.parent.firstClick=false; this.parent.callBombMaster(this.cid,this.x,this.y); this.parent.timerStart(this.parent); } this.cellOpen(); }, rightClick:function(){ if(this.parent.firstClick==false) if(!this.elem.innerHTML){ this.elem.innerHTML=this.flag; this.parent.bombCounter.innerHTML--; if(this.hasBomb==1){ this.parent.hasBombLength--; if(this.parent.hasBombLength==0)this.parent.gameClear(); } }else{ this.parent.bombCounter.innerHTML++; this.elem.innerHTML=""; if(this.hasBomb==1){ this.parent.hasBombLength++; } } }, setBomb:function(){ this.hasBomb=1; this.parent.checkBomb(this.x,this.y); }, bombHint:function(known){ if (known == true) this.neighborBomb++; }, cellOpen:function(){ this.End(); this.open=true; if(this.hasBomb==0)this.parent.area--; if(this.parent.area==this.parent.hasBombLength)this.parent.gameClear(); if(this.neighborBomb>0 && this.hasBomb==0)this.elem.innerHTML=this.neighborBomb; if(this.neighborBomb==0 && this.hasBomb==0)this.parent.checkAround(this.x,this.y); //爆弾を踏んでしまった時の処理 if (this.hasBomb == 1) { this.elem.innerHTML = this.bomb; this.parent.gameOver(); } with(this.elem.style){ backgroundColor="#FFFFFF"; fontSize="12px"; fontWeight="bold"; lineHeight="1.5"; color="#ff0000"; } if(this.neighborBomb>1) with(this.elem.style){ color="#0000ff"; } if(this.neighborBomb>2) with(this.elem.style){ color="#00dd00"; } }, End:function(){ this.elem.onclick=null; this.elem.oncontextmenu=null; } }; //爆弾管理//------------------------------------------------------------------------// var bombMaster=function(x,y,parent){ this.parent=parent; this.x=x; this.y=y; this.bombs=[]; this.bombsX=[]; this.bombsY=[]; this.bombsMatrix=[]; this.cellLength=this.x*this.y; this.bombsRate=0.1; this.bombLength=Math.round(this.cellLength*this.bombsRate); } bombMaster.prototype={ init:function(){ }, putBomb: function(cells,currentX,currentY,carrentCell){ this.cells=cells; for(var i=1,k=0;i<=this.x;i++){ for(var j=1;j<=this.y;j++){ if ((i != currentX) || (j != currentY)) { this.bombs[k] = i + "&" + j; k++; } } } this.bombs.shuffle(); for(var i=0;i limit) { clearInterval(timerId); }else{ i=i+0.04; } elem.style.opacity=i; elem.style.filter="alpha(opacity="+i*100+")"; },30); } //debug Object.prototype.print_r=function(){ var debug=""; for(var item in this){ debug+=item+"=>"+this[item]+"
"; } document.write(debug); } window.onload=function(){ if (!document.getElementById("mineSweeperStart")) { var game = new MineSweeper(); }else{ document.getElementById("mineSweeperStart").onclick=function(){ return function(){ var game = new MineSweeper(); } }(); } } })();
ほんとはもっと鬱陶しい感じのマインスイーパにしたかったんですが、間に合いませんでした。。
後コードは最初きれいに書くこと意識してたのですが、後半から無茶苦茶になってしまいました。
あと3回くらいマインスイーパつくったらキレイになりそうなのですが、これは引き続き自習課題ということで。
あと、多分にバグが含まれているかもしれません。