東海大野狼的部落格: 九月 2007

底下是整個用 javascript 寫出來的一個採地雷的遊戲！
運用了一些 DOM 來控制一些東西。
下一個是想用 javascript 物件來寫俄羅斯方塊。

<html>
<head>
<title>Bombs</title>
<script>
var MaxBombs=0;
var X=0;
var Y=0;
var BombsArray = new Array();
var oBombsBody;
var traceLevel=0;
var nonOpenColor = 'C0C0C0';
var OpenColor = '707070';
var OpenColorFireFox = 'rgb(112, 112, 112) none repeat scroll 0% 0%';

function NewGame() {
    
    ClearBombs(oBombsBody);

    // 亂數取出炸彈位置,存入陣列
    var oXY;
    while(BombsArray.length<MaxBombs) {
        while(!oXY) {
            oXY='';
            oXY=GetXY();
            
            // check exists
            for(var i=0;i<BombsArray.length;i++) {
                if ( oXY==BombsArray[i] ) {
                    oXY='';
                    break;
                }
            }
        }
        BombsArray.push(oXY);
        
        var oaXY = oXY.split('#');
        var tdObj=document.getElementById('x'+oaXY[0]+'y'+oaXY[1]);
        // tdObj.innerHTML='X';
        tdObj.className='bomb';
        tdObj.tag='X';
        tdObj.style.color='red';
        oXY='';
    }

    // 開始填入其它格子內的數字，包含 零
    for( var i=1;i<=Y;i++) {
        for( var j=1;j<=X;j++) {
            var tdObj=document.getElementById('x'+j+'y'+i);
            tdObj.style.background='#'+nonOpenColor;
            tdObj.innerHTML=' ';
            if ( tdObj.tag != 'X' ) {
                // 不是炸彈的話，那要開始計算其週圍有幾個炸彈
                var oBombs = CalBombs(j,i);
                tdObj.tag=oBombs;
                tdObj.className='bombs'+oBombs;
                tdObj.style.color=(oBombs==0)?'#'+OpenColor:'black';
            }
        }
    }
    alert("Enjoy Game!!");
}

// 計算周圍的炸彈數
function CalBombs(oX,oY){
    // 傳入一個座標點，為九宮格的中心，逐一掃描周圍八格之狀態
    var oBombs=0, newX, newY, otd;
    newX = oX-1
    if ( newX > 0 ) {
        newY=oY;
        if (CheckBomb(newX,newY,'X')) oBombs++;

        newY=oY-1;
        if ( newY > 0 ){ if (CheckBomb(newX,newY,'X')) oBombs++;}

        newY=oY+1;
        if ( newY <=Y){ if (CheckBomb(newX,newY,'X')) oBombs++;}
    }

    newX = oX+1;
    if ( newX <= X) {
        newY=oY;
        if (CheckBomb(newX,newY,'X')) oBombs++;

        newY=oY-1;
        if ( newY > 0 ){ if (CheckBomb(newX,newY,'X')) oBombs++;}

        newY=oY+1;
        if ( newY <=Y){ if (CheckBomb(newX,newY,'X')) oBombs++;}
    }
    
    newX = oX
    newY=oY-1;
    if ( newY > 0 ){ if (CheckBomb(newX,newY,'X')) oBombs++;}

    newY=oY+1;
    if ( newY <=Y) { if (CheckBomb(newX,newY,'X')) oBombs++;}
    
    return oBombs;
}

function CheckBomb(oX,oY,oTag) {
    var otd=document.getElementById('x'+oX+'y'+oY);
    if ( otd.tag == oTag ) {
        return true;
    } else {
        return false;
    }
}

function DrawTable(){
    // 先清掉原來的
    while (oBombsBody.rows.length > 0) {
        oBombsBody.deleteRow(0);
    }
    
    for( var i=1;i<=Y;i++) {
        tr = oBombsBody.insertRow(oBombsBody.rows.length);
        for( var j=1;j<=X;j++) {
            td = tr.insertCell(tr.cells.length);
            td.id=('x'+j+'y'+i);
            td.innerHTML = ' ';

            if ( td.addEventListener ) {
                // td.addEventListener("click", OpenBomb, false);
                // td.addEventListener("dblclick", SetBomb, false);
                td.addEventListener("mousedown", SetBomb, false);
            } else {
                // td.setAttribute("onclick", OpenBomb);
                // td.setAttribute("ondblclick", SetBomb);
                td.setAttribute("onmousedown", SetBomb);
            }
        }        
    }    
}


function SetBomb(oEvent) {
    if ( !oEvent ) { 
        oEvent=window.event;
    }
    //var oTdObj = window.event.srcElement.id;
    //var oMouseButton=window.event.button;
    // alert(oEvent);
    var oTdObj, oLeftButton, oRightButton=2;
    if ( oEvent.srcElement ) {
        oTdObj = oEvent.srcElement;
        oLeftButton=1;
    } else {
        oTdObj = oEvent.target;
        oLeftButton=0;
    }
    // alert(oTdObj.id);
    // document.test.str.value = oTdObj.style.background;
    if ( oTdObj.style.background == '#'+OpenColor || oTdObj.style.background == OpenColorFireFox) {
        return ;
    }
    var oMouseButton = oEvent.button;    
    if ( oMouseButton == oLeftButton ) {
        OpenBomb(oTdObj);
    } else if( oMouseButton == oRightButton) {
        MarkBomb(oTdObj);
    }
    
}

function OpenBomb(oObj){
    if ( oObj.tag == 'X' ) {
        OpenAll();
        alert('Game Over');
    } else {
        var oaXY= oObj.id.split('y');
        oaXY[0]=oaXY[0].replace(/x/,'');
        // alert('x='+oaXY[0]);alert('Y='+oaXY[1])
        ShowBomb(oaXY[0],oaXY[1]);
        if ( oObj.tag==0) {
            // 檢查週圍是否也是 零
            CheckBomb0(oaXY[0],oaXY[1]);
        }
    }
}

function MarkBomb(oObj) {
    
    // 右鍵點一次是 mark 點第二次是 unmark
    if ( oObj.innerHTML == 'O' ) {
        oObj.innerHTML = ' ';
        oObj.style.color= "black";
    } else {
        oObj.innerHTML = 'O';
        oObj.style.color= "green";
    }
    ShowBombsTip();
}

function CheckBomb0(oX,oY) {
    // 檢查週圍是否也是 零，用遞迴方式
    oX=oX-1+1;
    oY=oY-1+1;
    
    var newX, newY, otd;
    traceLevel++;
    // alert('Trace Level='+traceLevel);
    ShowBomb(oX,oY);
    newX = oX-1
    if ( newX > 0 ) {
        newY=oY; CheckBombStatus(newX,newY);

        newY=oY-1;
        if ( newY > 0 ) CheckBombStatus(newX,newY);

        newY=oY+1;
        if ( newY <=Y) CheckBombStatus(newX,newY);
    }

    newX = oX+1;
    if ( newX <= X) {
        newY=oY; CheckBombStatus(newX,newY);

        newY=oY-1;
        if ( newY > 0 ) CheckBombStatus(newX,newY);

        newY=oY+1;
        if ( newY <=Y) CheckBombStatus(newX,newY);
    }
    
    newX = oX
    newY=oY-1;
    if ( newY > 0 ) CheckBombStatus(newX,newY);

    newY=oY+1;
    if ( newY <=Y) CheckBombStatus(newX,newY);
}

function CheckBombStatus(oX,oY) {
    if (!IsOpenBomb(oX,oY) && CheckBomb(oX,oY,'0')) {
        // 如果週圍是零且未開啟，則讓它繼續做下去！這就是遞迴。
        CheckBomb0(oX,oY);
        traceLevel--
    } else if (!IsOpenBomb(oX,oY) ) {
        // 如果週圍是未開啟，又不是 零，那一定是數字，那就把它打開。
        ShowBomb(oX,oY);
    }
}

function IsOpenBomb(oX,oY) {
    var otd=document.getElementById('x'+oX+'y'+oY);
    // alert('x='+oX+';y='+oY);
    // alert('value='+otd.innerHTML+';tag='+otd.tag);
    if ( otd.innerHTML == ' ' ) {
        return false;
    } else {
        return true;
    }
}

function OpenAll() {
    for( var i=1;i<=Y;i++) {
        for( var j=1;j<=X;j++) {
            ShowBomb(j,i);
        }
    }
}

function ShowBomb(oX,oY) {
    var tdObj=document.getElementById('x'+oX+'y'+oY);
    tdObj.innerHTML=tdObj.tag;
    tdObj.style.background ='#'+OpenColor;
}

function GetXY(){
    var oX,oY,oXY;
    var d=new Date();
    var oms=d.getMilliseconds();
    oX=parseInt(Math.random(d.getMilliseconds())*(X-1)+1);
    oY=parseInt(Math.random(d.getMilliseconds())*(Y-1)+1);
    oXY=oX+'#'+oY;
    return oXY;
}

function ClearBombs() {
    while(BombsArray.length>0) {
        BombsArray.pop();
    }

    for( var i=1;i<=Y;i++) {
        for( var j=1;j<=X;j++) {
            var tdObj=document.getElementById('x'+j+'y'+i);
            tdObj.style.background='#'+nonOpenColor;
            tdObj.innerHTML=' ';
            tdObj.tag='';
            tdObj.style.color='black';
        }
    }
    ShowBombsTip();
}

function ShowLevelTip(oObj) {
    if ( !oObj.type) {
        return;
    }
    // alert(oObj.value);
    var oaStr = oObj.value.split('*');
    X = oaStr[1];Y = oaStr[0];MaxBombs = oaStr[2];
    var oStr = oaStr[0]+ ' x '+ oaStr[1]+ ' 格子，共有 '+ oaStr[2]+ ' 炸彈';
    var oTip = document.getElementById("LevelTip");
    oTip.innerHTML=oStr;
    oTip.style.visibility="visible";
    DrawTable();
    NewGame();

    
}

function ShowBombsTip() {
    var oBombsTip = document.getElementById("BombsTip");
    var oBombs=0;
    for( var i=1;i<=Y;i++) {
        for( var j=1;j<=X;j++) {
            var tdObj=document.getElementById('x'+j+'y'+i);
            if ( tdObj.innerHTML=='O' ) oBombs++;
        }
    }
    var oStr = '已經找到 '+oBombs+' 個炸彈了！';
    oBombsTip.innerHTML=oStr;
    oBombsTip.style.visibility="visible";
    var errBombs=0;
    if ( oBombs == MaxBombs ) {
        for( var i=1;i<=Y;i++){
            for( var j=1;j<=X;j++) {
                var tdObj=document.getElementById('x'+j+'y'+i);
                if ( tdObj.innerHTML=='O' && tdObj.tag != 'X'){
                    errBombs++;
                    tdObj.style.background='#FFFF66';
                } else {
                    tdObj.innerHTML=tdObj.tag;
                    tdObj.style.background ='#'+OpenColor;            
                }
            }
        }
        if ( errBombs > 0) {
            alert("You are failure!!!");  
        }
        
    }
}

function init(){
    oBombsBody = document.getElementById('BombsBody');    
    ShowLevelTip(document.getElementById('RadioLevel1'));
    ShowBombsTip();
}
</script>
<style>
#LevelTip {
    visibility: hidden;
    background-color: FFFF66;
    padding: 5px;
    width: 250px;
    text-align: center;
}

#BombsTip {
    visibility: hidden;
    background-color: CCFFCC;
    padding: 5px;
    width: 250px;
    text-align: center;
}

tbody {
    border: 2px solid green;
    background-color: white;
}

td {
  width: 20px;
  height: 20px;
  background-color: C0C0C0;
  text-align: center;
  padding: 1px;
  font-weight: bolder;
}

.bomb {
  color: red;
  font-weight: bolder;
}

.bombs0 {
  color: 707070;
  font-weight: bolder;
}

</style>
</head>
<body onLoad="init()" onContextmenu="return false">
<span id="SpanLevel1"></span>
<input type="radio" name="GameType" value="9*9*10" id="RadioLevel1" checked onClick="ShowLevelTip(this)">
<label for="RadioLevel1" >初級</label>
<span id="SpanLevel2"></span>
<input type="radio" name="GameType" value="16*16*40" id="RadioLevel2" onClick="ShowLevelTip(this)">
<label for="RadioLevel2" >中級</label>
<span id="SpanLevel3"></span>
<input type="radio" name="GameType" value="16*30*99" id="RadioLevel3" onClick="ShowLevelTip(this)">
<label for="RadioLevel3" >高級</label>
<a href="javascript:NewGame();">New Game</a> <a href="javascript:OpenAll();">Give Up</a> <p/>
<table >
  <caption id="BombsCaption">大家來玩踩地雷</caption>
  <tbody id="BombsBody">
  </tbody>
</table>
<div id="LevelTip" >
</div>
<div id="BombsTip" >
</div>
<!--
<form name="test">
<input type="text" name='str'>
</form>
-->
</body>
</html>
東海大野狼的部落格

星期四, 九月 13, 2007

用 javascript 寫出來的踩地雷遊戲

Javascript 十進位轉16進位 16進位轉十進位

東海大野狼

網誌存檔

關於我自己

My Friend
