原生JavaScript實作連連看遊戲

首先看一下html的布局方式在index.html文件中：

 

[html]  

 

 

   

 

         

       

 

       

     

   

 

       

 

           

 

               

 

                   

 

                   

 

               

 

               

 

               

 

               

 

                    分  数  

               

 

               

 

                    0  

               

 

               

 

                    时  间  

               

 

               

 

                    0  

               

 

               

 

                     

                     

               

                 

           

 

       

 

        js">;  

         

    ; css資料夾下的index.css檔案如下：

 

[css] 

body {

  

     顏色：灰色；  

  

}

  

#whole {

  

  邊框：1px 雙#999999； 

🠎

    高度：505px；  

    位置：相對；  

  

}

  

#gamePanel {

      

    邊距：1 像素1 像素 1 像素1 像素； 

    背景: url(../img/background.gif) 重複；  

    地點：絕對；  

  

}

  

#    邊框：1px 實線#999999；  

    寬度：546px；  

    高度：434px；

    位置：相對；  

  

}

  

#pieces .piece {

 

#pieces .piece {

6px；  

    位置：相對；  

    遊標：指針；  

    浮動：向左；  

  

}

  

#pieces .track {

  

  寬度：3    位置：相對；  

    浮動：向左；  

  

}

  

#pieces .track2 {

  

  寬度：32px;  

    ；  

    背景：紅色；  

  

}

  

#gameLogo {

      

    上邊距：60px；  

    邊框：1px 實線寬度：187px；  

    高度：73px；  

    背景: url(../img /logo.gif);  

    位置：絕對；  

  

}

  

#scorePanel {

  

  

    左：607px；  

    上：200px；  

寬度：187px；  

    高度：30px；  

    位置：絕對；  

  

}

  

}

  邊框：1px 實線#999999；  

    左：607px；  

    上： 240px；  

    寬度：187px；  

    高度：30px;  

    位置：絕對；  

timePanel {

  

  邊框：1px 實線 #999999； 

    左：607px；

    上：300px；  

    寬度：187px;  

    高度：30px；  

  

#time {

  

  邊框：1px 實線#999999； 

左：607px；  

    上：340px；  

    寬度：187px；  

    高度：30px；

}

  

#button {

  

  邊框：1px 實線# 999999；  

    左：607px；  

    上：400px；  

    寬度：187px；  

    寬度：187px；

    height : 30px;  

    position : absolute;  

  

  

}

  

  

}

下面讓我們來看看最核心的js部分實作程式碼，js部分分成三個原始檔即game .js、map.js、piece.js每個原始檔案對應一個類別，其中本遊戲通

 

過game類別來操縱map和圖片piece物件：

 

game.

[javascript]  

// 遊戲控制類別 

var Game = {  

  

    // 

    // 分數 

    score : 0,  

      

    //時間 

    time : 0,  

      

    // 圖片繪圖表 

  圖片清單 

    pieceList : [],  

      

    // 圖片清單中不包含圖片 

pieceImgList : [],  

      

    // 圖片隨機數列表 

    randomList : [     trackList : [],  

  

    // 遊戲是否開始 

    isGameBigin : false,  

      

    // 遊戲是否結束 

    isGameOver : false,    isGameReset : false,  

      

    // 圖片元素是否第一次點選 

    isFirstClick : true,  

      

    // 開始遊戲 

    start : function() {  

abled = true;  

        document.getElementById("reset").disabled = false;

      

        if (this.isGameReset) {  

          

            this.startTime();  

                 

        } else if (this.isGameBegin) {  

            return;  

              

             this.init();  

              

       

        }  

      

    },  

      

{ f

        document.getElementById("start").disabled = false;  

        document.getElementTyId("reset").disabled = true 

        this.clear();  

        this.initPieces();  

this.initImgPieces();  

        this.time = 0;  

        document.getElementById(" time.

        this.score = 0;  

        document.getElementById("score"). innerHTML = 0;  

          

        this.isGameReset = true;  

    },  

      

    // 初始化 

    init : function() {  .isGameBegin) {  

          

            return;  

          

       Map = new Map();  

          

        var _this = this;  

  

        this.startTime();  

        this.gamePanel = document.getElementById("pieces");  

  

       this.in  

   );  

  

        this.isGameBegin = true;  

  

  

      

    // 將隨機產生的150張圖片加入畫布 

    initPieces : function() {  

  this 

      

        this.initRandomList();  

         隨機清單排序 

        this.messRandomList();  

              

        

            var piece = new Piece(this);  

           

            .piepieceList. push(piece);  

              

            var x = (i%17)；

              

            this.pieceMap.put(x+","+y, piece )； 

              

            if (x == 0 || x == 16 || y == 0 || y == 11) {  

                  

                     piece.track.className = "track";  

                piece.dom.appendChild(piece.track);

                piece.isTracked = true;  

                  

                continue;  

              

            } else {  

              

                if (x == 1 || x == 15 || y == 1 || y == 10) {  

                  

                   piece..  

                }  

                  

                                  

                        

        }  

    // 初始化圖片 

    initImgPieces : function() {  

  

        for (var i = 0; i             this.pieceImgList[i].initImg() ;  

            this.pieceImgList[i].img.src = 「img/pieces/"+this.randomList[i]+".gif"  

 src);             

                                     this.pieceImgList[i].onClick();  

  

        }           

    // 初始化隨機表 

    initRandomList : function() {  

  

        // 取得隨機數列，雙重出現 

        for (var i = 0; i             var random = parseInt(Math.random()* 22*10000, 10);  

            var number = random%23;  

          this.randomList.push(number);  

          

        }     

      

    // 打亂隨機表 

    messRandomList : function() {  

 ; i ++) {  

          

            var random = parseInt( Math.random()*15*10000, 10);  

            var number = random%150;  

  🠎        temp = this.randomList[i];  

            this.randomList[i] = this .randomList[number];  

            this.randomList[number] = temp;  

            

    },  

      

    // 開始計時 

      var _this = this;  

      

        if (this.isGameOver) {  

                   

        } else {  

                    document.getElementById("time").innerHTML = this.time;  

            this.isGameBegin = true;  

             

        }  

      

    },  

  

    clear : function() {  

      

        for (var i = 0; i

          

        }  

   

        this.randomList = [];  

        this.pieceImgList = [];  

 

        this.isGameBegin = false;  

          

    }  

  

}    

    document.getElementById("start").disabled = false;  

    document.getElementById("reset").disabled = true;  

  

}  

  

🠎// 遊戲開始入口 / 遊戲開始入口 p  

    Game.start();  

  

}

  

// 遊戲重置入口 

function Reset() {  

   

 

 

自訂的js版映射結構map.js原始檔案如下：

 

[javascript]  

var Map = function(){  

      

  

Map.prototype = {  

  

    put : function(key, value) {  

      

        this.data[key] = value;   

:   }, function(key) {  

      

        return this.data[key];  

},  

      

    remove : function(key) {  

      

 

    },  

      

    isEmpty : function() {  

 .length == 0;  

    },  

      

    size : function() {  🠎

    size : f. ;  

    }  

  

}  

 

 

 

 

 

 類別piece.js來源檔案如下：

 

[javascript]  

var Piece = function(game) {  

        

    // 是否為邊緣元素 

    this.isEdge = false;  

  

    // 是否挨著邊緣元素 

  // 圖片dom元素 

    this.dom = null;  

      

    / / 圖片元素 

    this.img = null;  

      

    // 圖片元素來源 🠎  // 軌跡元素 

    this.track = null;  

      

    //是否可以作為軌跡 

    this.isTracked = false;  

          

  

    // 圖片橫向排列 

    this.x = 0;  

      

// 圖片縱向排列 

    this.y = 0;  

      

    // 圖片閃爍Id  

     // 圖片是否點選 

    this.onClicked = false;  

      

    // 閃爍次數 

    this.flashCount = 0;  

      

   

Piece.prototype = {  

  

    // 初始化 

    init : function( ) {  

  

        this.dom = document.createElement("div");  

         

        this.selected = document.createElement("img");    

    },  

      

    // 初始化圖片 

    initImg .img = document.createElement("img");  

          

        this.dom.appendChild(this.img);  

      

    },

  initTrack : function() {  

  

        if (this.flashId ! = null ) {  

              

            // 閃爍

this.stopFlash()     // 閃爍

this.stopFlash();            }         

          

     .

          

            return;  

        }  🠎 licked = false;  

          

        this.dom.removeChild(this.img)； ("div");

        this.track.className = "track";  

        this.dom.appendChild(this.track);  

位元組

位設定

/位元組。

seTimgsrc：function（src）{

 

      排列位置 

    setPosition : function(x, y) {  

      

        this .x = x;  

        this.y = y;  

      

      setSelected : function() {  

          

        if (this .flashCount ++ %flashCount ++ % 2 == 0) {  

              

            //如此.dom.rem g/selected.gif";  

            //this.dom.appendChild (this.selected);    

            this.img.src = "img/pieces/flash.gif";  

             

          //if (this.selected != null) {

        

            // this.dom.removeChild(this.selected);              

 

              

            this.img.src = this.src;  

🠎);

          

        }  

              

    // 判斷是否為邊緣元素 

    setEdge : function(isEdge) {  

       

    },  

      

    // 是否分支邊緣元素 

    setAtEdge : function(atEdge) {  

      

🠎

      

.

//開始開始開始

flash：function（） {

var _this = this;  

        this.flashId = setInterval(function() {_this.setSelected();}, 500);  

  

 

    stopFlash : function() {  

      

        clearInterval( this.flashId);  

          

        if (this.flashCount % 2 == 1) {  🠎      //if (this.selected != null) {  

              

        this   //

        this   // .selected);  

              

            //}      this.img.src = this.src;  

            //this.dom.appendChild(this.img);           }  

              

    } ,  

          

    // 物件選擇的內部函數 

    onClick : function() {  if (this.onClicked) {  

              

             

      

        var _this = this;  

          

        this.img.onclick = function() {  

     ent.getElementById("start").disabled) {  

              

            

            }  

          

if (_this.onClicked) {  

              

                        }  

  

            if (_this.checkPiece()) {  

              

            }  

   );  

            _this.onClicked = true;  

          

        };  

      

    },  

      

    // 檢查是否有被點擊的圖片 

    checkPiece : function() {  

          

        for (var i = 0; i               

            

           this) ) {  

                  

                if (this.game.pieceList[i].equalImage(this)) {  

                      

                    //alert("The same Image");  

                    this.searchTrack(this.game.pieceList[ i]);  

                  

                

                    this.game.pieceList[i].stopFlash();  

                    this.game.pieceList[i].onClicked = false;  

                         

                    return fal               }  

                  

    

            } else {  

                continue;  

                 

        }  

          

        return false     

    // 是否為同一個物件 

    equal : function(piece) {  

      

        return (this.x == piece.x && this.y == piece.y);  

      

 

    equalImage : function(piece) {  

        return this.src == piece.src;  

      

    },    searchTrack : function(piece) {  

          

        if (this.isNear(piece)) {  

                  

            this.linkTrack(piece   return;  

        }         

          

                  

            this.linkTrack(piece );  

              

            return;          

    },  

      

    // 是否為鄰近 

)

        var a = (Math.abs(piece.x - this.x) == 1) && (piece.y == this.y)  

            || (Math.abs(piece.y - this.y) == 1) && (piece.x ==this. x);  

      

        return a;  

    },  

🎠    each : function(piece) {  

        //alert("isStraightReach");  

        if (this.isNear(piece

        if (this.isNear(piece )) {  

              

            return true 

          

        var a = false;  

        var

        if (this.x = = piece.x) {  

            //alert("!!!!!!!!!!!");  

        pie  for (var i = .                 //alert("this.x == piece.x: " + piece.x + "  //alert("this.x == piece.x: " + piece.x + "," + i);

                if (this.game.pieceMap.get(piece.x + "," + i).isPass()) {

              a = true;  

                      

   .pieceMap.get(piece.x + "," + i));  

                                    } else {  

                  

                this.game.trackList = [];  

                     

                    返回一個;     

                        }  

                                  // 沿著x軸方向搜尋 

        if (this.y ==piece.y) {  

         !!!!! ！ ; i ++) {  

                //alert(" this.y ==piece.y: " + i + "," +piece.y);  

 (Fpie o)opie  o (Fatpie  片. ," +piece.y).isPass()) {

                      

                 this.game.trackList.push(this.game.pieceMap.get(i + "," +piece.y)) ;  

                      

              se {  

                  

                this.game.trackList = [ ];  

                      

              }  

              

            }   

  

        返回||乙；  

    },  

   1 : function(piece) {  

        //alert("isReach1");  

        varcorner_1 = this. game.pieceMap.get(this.x + "," +piece.y);  

        varcorner_2 = this.game.pieceMap.get(piece.x + "," + this.y);      

        var _this = this;  

  

          

        if ((_this.isStraight each(零件))  

           &&corner_1.isPass()) {  

            " + this.x + "," +piece.y);  

                this.game.trackList.push(corner_1);  

           

        }  

      

        if ((_this.isStraightReach(corner_2))  🠭) 鎠 鎠) (H) (H)) Hkihp.

           &&corner_2 .isPass()) {  

                //alert("corner_2: " + 件.x + “,” + this.y);  

.   

              

            回復true；

        }  

  

        返回false;  

  

    isReach : function(piece) {  

          

        var a = this.isStraightReach(pieStraight) ;

          

        var b = this.isReach1(piece);  

     

    },  

      

    // 拐點二次彎搜尋 

    isReach2 : function(piepiece) {  

向  // 沿著x軸正面搜尋 

        for (var i = this.x + 1; i      .get(i + "," + this.y).isPass()) {

                  

               this.game.trackList = []；  

                  

                休息；  

                  

            } else if (this.game.pieceMap.get(i + ", " + this.y).isReach(piece)  

                && this.game.pieceMap.get(i + "," + this. y).isPass()) {  

                this.game.trackList.push( this.game.pieceMap.get(i + "," + this.y));  

                      

                返回true；  

            }     

          

      }  

          

        // 沿x軸搜索 

        for (var i = this.x - 1; i >= i --) {

              

            if (!this .game.                     

                this.game.trackList = [];  

                  

                休息；  

                  

            } else if (this.game.pieceMap.get(i + "," + this.y).isReach(piece)  

                && this.game.pieceMap.get(i + "," + this. y).isPass()) {

              

                this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y));  

                      

            

          

        }

          

        // 沿著y軸搜尋  

        for (var i =  

            if (! .pieceMap.get(this.x + ", " + i).isPass()) {

                  

              this.game.tList.game.  

                  

                休息           } else if (this.game.pieceMap.get(this.x + "," + i ).isReach(piece)  

          x + "," + i).isPass()) {  

                  

           

   .  

                      

                        

      }  

  

        // 沿y 含

  

            如果(! this.game.pieceMap.get(this.x + "," + i).isPass()) {

        this.game.trackList = [];  

                  

              休息中； ).isReach(piece)  

               && this.game.pieceMap.get(this.x + "," + i) .isPass()) {

                  

             

                      

                      

         

          

     

    // 路徑連接  

    linkTrack : function(piece) {  

      

         

);  

       piece.initTrack();  

        this.changeScore();  

        this.showTrack(piece);  

              

    },

      

     

       這遊戲。  

        this.track.className = "track2";  

          

        for (var i = 0; i  );  

            this.game.trackList[i].track.className = "track2";  

          

        }  

          

   

        setTimeout(function() {_this.hideTrack()}, 500);  

      

    },

      

    // 隱藏足跡  

        for (var i = 0; i; this.game.trackList.length; i ++) {

              

            this.game.trackList[i].track.className = "track";  

              

        }

              

        this.track.className = "track";  

        this.isTracked = true;  

          

    },  

      

           

      this.game.score += 100;  

        document.getElementById("score").innerHTML = this.game.score;         

      

    },  

      

    min : a

         

            回傳一個；  

        

            返回b ;