JS写怀旧小游戏系列（二）连连看

时间：2022-11-25 16:07:30
<SCRIPT LANGUAGE="JavaScript">
<!--
var RowMax = 42;//列数
var ColMax = 22;//行数
var PicMax = 26;//总图片数
var TimeMax = 60;//总时间
var OffSet = 32;//使用系统图标webdings（从asc2的32开始）
 
var st;//倒计时
var TmpStr = "";
var TmpObj = null;
var TmpTime = 0;
var TmpInt = 0;
 
var PicAry = new Array(PicMax);
 
var Matrix = new Array(RowMax);
for(i=0; i<RowMax; i++){
    Matrix[i] = new Array(ColMax);
}
 
var P = new Array(4);
for(i=0; i<4; i++){
    P[i] = new Object();
}
 
//初始化
function SetTab(){
    clearInterval(st);//清除倒计时
 
    //从input中取出设定值
    TmpInt = parseInt(document.getElementById("setrow").value);//列
    if(TmpInt>0 && TmpInt<41 && !(TmpInt%2)){RowMax = (TmpInt+2);}
    TmpInt = parseInt(document.getElementById("setcol").value);//行
    if(TmpInt>0 && TmpInt<21){ColMax = (TmpInt+2);}
    TmpInt = parseInt(document.getElementById("setpic").value);//图片数
    if(TmpInt>0 && TmpInt<27){PicMax = TmpInt;}
    TmpInt = parseInt(document.getElementById("settime").value);//时间
    if(TmpInt>0 && TmpInt<601){TimeMax = TmpInt;}
 
    TmpTime = TimeMax;
    OffSet = 40 + Math.floor( (120-PicMax) * Math.random() );//图标asc2值40~120（32~158）
 
    //图片数组，记录每种图片总数的奇偶
    for(PicNum=0; PicNum<=PicMax; PicNum++){PicAry[PicNum] = 0;}
    PicNum = 0;//总数为奇数的图片种类总数
    TmpInt = (RowMax-2) * (ColMax-2);//有效区域的图片总数
 
    //绘制表格
    TmpStr = "<table border=\"1\">";
    for(j=0; j<ColMax; j++){
        TmpStr += "<tr>";
        for(i=0; i<RowMax; i++){
            TmpStr += "<td onclick=\"CheckP(this,"+i+","+j+");\" width=\"32\" height=\"40\"><font face=\"webdings\" size=\"6\" "
 
            if(0==i || 0==j || (RowMax-1)==i || (ColMax-1)==j){
                Matrix[i][j] = 0;//边界填充空单元格，连线用。
                TmpStr += ">";
            }
            else{
                TmpInt--;
                Matrix[i][j] = 1 + Math.floor( PicMax * Math.random() );
                if(TmpInt<PicNum){//图片配对
                    for(k=1; k<=PicMax; k++){
                        if(PicAry[k]){
                            Matrix[i][j] = k;
                            break;
                        }
                    }
                }
 
                //更新该类图片的奇偶数数组，以及单张图片总数
                if(PicAry[Matrix[i][j]]){
                    PicAry[Matrix[i][j]] = 0;
                    PicNum--;
                }
                else{
                    PicAry[Matrix[i][j]] = 1;
                    PicNum++;
                }
 
                //填写颜色
                var tmp_color = Math.floor(0xFFFF00*Matrix[i][j]/PicMax).toString(16);
                TmpStr += "color=\"#";
                for(k=tmp_color.length; k<6; k++) TmpStr += "0";
                TmpStr += tmp_color;
                TmpStr += "\">";
 
                //添图片（webdings图标）
                TmpStr += String.fromCharCode(Matrix[i][j] + OffSet);//different pics
            }
 
            TmpStr += "</font></td>";
        }
        TmpStr += "</tr>";
    }
    TmpStr += "</table>";
    TmpInt = (RowMax-2) * (ColMax-2) / 2;//剩余数量，判断结束用。
    //TmpStr += "<BGSOUND volume=-1000 src=\"emc.mid\" LOOP=-1>"//背景音乐
 
    document.getElementById("container").innerHTML = TmpStr;//输出表格
    document.getElementById("timeleft").innerHTML = TmpTime;//显示剩余时间
    document.getElementById("timebar").style.width = 600;//时间条
    document.getElementById("timebar").style.backgroundColor = "green";
 
    st = setInterval("ShowTime()",1000);//开始倒计时
}
 
//X方向连线。（有起点，无终点）
function LineX(x, y, xt){
    for( i=x; i!=xt; (x<xt? i++: i--) ){
        if(Matrix[i][y]){
            return false;
        }
    }
    return true;
}
 
//Y方向连线。（有起点，无终点）
function LineY(x, y, yt){
    for( i=y; i!=yt; (y<yt? i++: i--) ){
        if(Matrix[x][i]){
            return false;
        }
    }    
    return true;
}
 
//2个点被3条线连接
function LinkP(P1,P2){
 
    //P1在P2下方，交换P1、P2
    if(P1.y>P2.y){
        P3=P1;
        P1=P2;
        P2=P3;
    }
    //P1下方1点（y+1）先纵向再横向是否可连接。（因为起点P1不为空，所以检测其下方一点）
    if( LineY(P1.x, (P1.y+1), P2.y) && LineX(P1.x, P2.y, P2.x) ) return true;
    //P1先向左侧连接，再检测该点再纵向再横向是否可连接P2。
    for(j=(P1.x-1); j>=0; j--){
        if(Matrix[j][P1.y]) break;
        if( LineY(j, (P1.y+1), P2.y) && LineX(j, P2.y, P2.x) ) return true;
    }
    //P1先向右侧连接，再检测该点再纵向再横向是否可连接P2。
    for(j=(P1.x+1); j<RowMax; j++){
        if(Matrix[j][P1.y]) break;
        if( LineY(j, (P1.y+1), P2.y) && LineX(j, P2.y, P2.x) ) return true;
    }
 
    //P1在P2右侧，交换P1、P2
    if(P1.x>P2.x){
        P3=P1;
        P1=P2;
        P2=P3;
    }
    if( LineX((P1.x+1), P1.y, P2.x) && LineY(P2.x, P1.y, P2.y) ) return true;
    for(j=(P1.y-1); j>=0; j--){
        if(Matrix[P1.x][j]) break;
        if( LineX((P1.x+1), j, P2.x) && LineY(P2.x, j, P2.y) ) return true;
    }
    for(j=(P1.y+1); j<ColMax; j++){
        if(Matrix[P1.x][j]) break;
        if( LineX((P1.x+1), j, P2.x) && LineY(P2.x, j, P2.y) ) return true;
    }
    return false;
     
}
 
//单击检测该点
function CheckP(o,x,y){
 
    if(Matrix[x][y]){//非空
        if(null==TmpObj){//之前无选中图片
            TmpObj = o;//选中该图片
            TmpObj.borderColor = "0000FF";//改变边框颜色
            P[0].x = x;//保存该点
            P[0].y = y;
        }
        else if(o!=TmpObj){//非同一点
            TmpObj.borderColor = "FFFFFF";//恢复边框颜色
            P[1].x = x;//保存该点
            P[1].y = y;
            if(Matrix[P[0].x][P[0].y]==Matrix[P[1].x][P[1].y]){//同一类图片
                if(LinkP(P[0],P[1])){//可以连接
                    Matrix[P[0].x][P[0].y] = 0;//清零
                    Matrix[P[1].x][P[1].y] = 0;
                    TmpObj.innerHTML = "";//原图片显示为空
                    o.innerHTML = "";
                    TmpTime++;//奖励时间
 
                    TmpInt--;//剩余图片减1
                    if(!TmpInt){//剩余图片为0
                        clearInterval(st);//清除倒计时
                        document.getElementById("container").innerHTML = "";
                        document.getElementById("timeleft").innerHTML = "";
                        document.getElementById("timebar").style.backgroundColor = "white";
                        alert("完成！");
                    }
                }
            }
            TmpObj = null;//无选中图片
        }
    }
    else{
        if(TmpObj){TmpObj.borderColor = "FFFFFF";}//恢复边框颜色
        TmpObj = null;//无选中图片
    }
}
 
function ShowTime(){
    TmpTime--;//时间减1
    //更新时间显示
    document.getElementById("timeleft").innerHTML = TmpTime;
    document.getElementById("timebar").style.width = Math.floor(600*TmpTime/TimeMax);
    if( (TimeMax/TmpTime)>4 ){
        document.getElementById("timebar").style.backgroundColor = "red";
    }
    else if( (TimeMax/TmpTime)>2 ){
        document.getElementById("timebar").style.backgroundColor = "yellow";
    }
 
    if(!TmpTime){//剩余时间为0
        clearInterval(st);//清除倒计时
        document.getElementById("container").innerHTML = "";//清屏
        document.getElementById("timeleft").innerHTML = "";
        document.getElementById("timebar").style.backgroundColor = "white";
        alert("时间到！");
    }
}
//-->
</SCRIPT>
 
行数<INPUT id="setrow" type="text" value="16" size="2"> 
列数<INPUT id="setcol" type="text" value="9" size="2"> 
图片数<INPUT id="setpic" type="text" value="12" size="2"> 
时间<INPUT id="settime" type="text" value="60" size="3">秒 
<BUTTON onclick="SetTab();">重置</BUTTON> 
<DIV id="timeleft" style="float:left;"></DIV>
<DIV id="timebar" style="height:5;width:600;background-color:white;"></DIV>
<DIV id="container"></DIV>

标签：

相关文章