技術トピック

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(bombX1 && bombY1)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(bombX1 && cellY>1){
if(this.cells[cellX-1][cellY-1].open==false)this.cells[cellX-1][cellY-1].cellOpen();
};
if(cellX1 && cellY1){
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(cellX99){
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回くらいマインスイーパつくったらキレイになりそうなのですが、これは引き続き自習課題ということで。
あと、多分にバグが含まれているかもしれません。

今日のDA

2008年11月12日: 海外ネタ ペルー編


カテゴリ:
  投稿者:

【チャネル事業部 ホリ】
こんばんは、ホリです。
今日は長らく封印しておりました、海外ネタを書きます。
テレビ番組では色んな世界の景色や風景を
紹介していますが、一度はその中で行ってみたいな〜って思ったことありませんか?
私も思っていた一人なんですが、その中でも小さい頃から
行ってみたいと夢見てたのが、ペルーの「マチュピチュ
20081112-kazuma no omoide 011.jpg
インカ帝国最期の遺跡といわれていますが、標高2,280mの山の上にある、”空中都市”とも言われている通り、
非常に神秘的で壮大な場所でした。
まるでラピュタのような・・・
日本から行こうと思うと、約2日くらいかかると思うので
今から思うと結構しんどいです。
しかし、行く価値はあります。
電気もガスもない500年以上も前に10m近い大きな石を真っ直ぐ切れるなんて・・・
水路も完備されていて、すぐ横に段々畑もあって、その作りの美しさには本当に感動します。
なかなか行くことが難しい場所ではありますが、私が行ったときには名古屋から来たと言っていた
60歳以上の日本人団体客もいたくらいなんで、是非皆さんにも機会があれば行って頂きたい場所のひとつです。
20081112-CUZCO-PERU 010.jpg
マチュピチュに行くまでの電車からの風景
20081112-CUZCO-PERU 035.jpg
そびえ立つ段々畑
20081112-CUZCO-PERU 063.jpg
整備されている水路
20081112-CUZCO-PERU 048.jpg
リャマに襲われている私。
マチュピチュではリャマが放牧されています。
くれぐれも注意しましょう☆

この記事に関連する情報

テレビを快適に見るのに大切なテレビ台。テレビ台にもこだわりたい方におすすめするのが「こもれび家具」です。家具の名産地、福岡県大川市で木が持つ本来の魅力を堪能できる上質な無垢家具を製造しています。 家具好きの方も納得する出来栄えです。是非一度ご覧下さい!
こもれび家具
今日のDA

2008年11月10日: 愛読書


カテゴリ:
  投稿者:

【チャネル事業部 タニエ】
秋になると、用事はないけれどなんとなくお出かけしたくなる・・・
知らない街に、ひとりでGO♪ が大好きなタニエ。
路地裏で素敵なお店に出合ったりすると
とってもHAPPYな気持ちになります。
前職の流れもあって、お菓子への思い入れは人一倍です。
お菓子ひとつのために、東京だって九州だって行きますよ〜。
そんな私の必需品は、情報誌いろいろ。
null
スイーツ・ランチ・パン屋・雑貨屋 etc 
各種取り揃えております。
本を片手に、お散歩はいかがですか。
【おまけ】
ブログ当番がまわってきたと知った主人。
たくさんのガンダムを引っ張り出して、お手入れをはじめました。
なにか勘違いしてる。。。
あまり無視するのもなんだから、機会があればまた載せてあげたいな。
その節は、よろしくお願いいたします。

この記事に関連する情報

雑貨が好きな方なら家具にもこだわってみてはいかがでしょうか。そこでおすすめするのが「こもれび家具」です。家具の名産地、福岡県大川市で木が持つ本来の魅力を堪能できる上質な無垢家具を製造しています。 家具好きの方も納得する出来栄えです。是非一度ご覧下さい!
こもれび家具
お出かけ

2008年11月08日: 2×2=5


カテゴリ:
  投稿者:

【フロンティア事業部 スギモト】 
先日、家族でグリコピア神戸に出かけました。
そこではお菓子工場の見学や、お菓子に関する展示物がたくさんあったり、3Dシアターや、グリコの懐かしのCM
が見れたりしました。
↓↓
20081108-guriko11.jpg
↓↓
20081108-gurico8.jpg
1931年(昭和6年)製の「発声映写装置つき自動販売機」というものもありました。お金を入れると一定時間
映画が見れるんです。もちろんお菓子もでてきます。
この機械のすごいところは、もうひとつお菓子を買うと
映画の続きが見られるという物です。当時は行列ができるほど人気だったそうです。
ご当地ものも色々
↓↓
20081108-Image102.jpg
20081108-Image103.jpg
グリコ創業者 江崎 利一 氏の教えも掲げてありました。
「2×2=5(二二ンが五)の工夫をせよ」
これは「2×2=4」ではなく、「2×2=5」にも「6」にもなる
ように努力と工夫を重ね、人のまねをせず、一生懸命
がんばろうという意味だそうです。この考えは当社のデジアラスピリットにある「試行錯誤」と同じであり、
あらためてその意味を再確認するよい機会になりました。
見学はすべて無料なのに、1時間ほどの見学コースの帰りには、子供だけではなく、親にもお菓子のお土産も頂けました。
まさに、「一粒で二度おいしい」でした。

今日のDA

2008年11月06日: 資格取得の秋。。


カテゴリ:
  投稿者:

【チャネル事業部 オオツジ】
来たる11月15日の試験に向けて、
エクステリアプランナー資格の試験勉強中のオオツジです。
デジアラでは今年から、更なるスキルアップのために
資格取得を目指す社員の講座受講や受験に関する費用を
負担してくれる応援制度が出来ました。
デジアラ忘年会にて、「今年はスキルアップの年」と
診断された私にとっては、これはまたとない機会と思いまして、
さっそく手を挙げさせて頂いた次第です。
通信講座にて学習を進めていたのですが、、
計画的に勉強するというのはなかなか難しいですね・・・
試験日が迫ってきて、かなり焦ってきております。。
残り1週間ちょっとしかないですが、
最後の追い込みかけて頑張りたいと思います!
しかし、そんな思いで私が勉強に勤しんでいる頃、
隣の部屋で奥さんはこちらの勉強をしていました。。
正直早く観たい・・・