Native JavaScript implements Lianliankan game

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

 

[html]  

 

 

     

         

         

       

     

     

       

 

           

 

               

 

                   

 

                   

 

               

 

               

 

               

 

               

 

                    分  数  

               

 

               

 

                    0  

               

 

               

 

                    时  间  

               

 

               

 

                    0  

               

 

               

 

                     

                     

               

                 

           

 

       

 

         

         

         

     

 

 

css文件夹下的index.css文件如下：

 

[css] 

body {  

  

    font-size : 16px;  

    font-weight : bold;  

    color : grey;  

  

}  

  

#whole {  

  

    border : 1px double #999999;  

    border-width : 5px;  

    width : 800px;  

    height : 505px;  

    position : relative;  

  

}  

  

#gamePanel {  

      

    margin: 1px 1px 1px 1px;  

    width : 602px;  

    height : 502px;  

    background : url(../img/background.gif) repeat;  

    position : absolute;  

  

}  

  

#pieces {  

  

    margin-top : 35px;  

    border : 1px solid #999999;  

    width : 546px;  

    height : 434px;  

    position: relative;  

  

}  

  

#pieces .piece {  

  

    width : 32px;  

    height : 36px;  

    position : relative;  

    cursor : pointer;  

    float : left;  

  

}  

  

#pieces .track {  

  

    width : 32px;  

    height : 36px;  

    position : relative;  

    float : left;  

  

}  

  

#pieces .track2 {  

  

    width : 32px;  

    height : 36px;  

    position : relative;  

    float : left;  

    background : red;  

  

}  

  

#gameLogo {  

      

    margin-top : 60px;  

    border : 1px solid #999999;  

    left : 607px;  

    width : 187px;  

    height : 73px;  

    background : url(../img/logo.gif);  

    position: absolute;  

  

}  

  

#scorePanel {  

  

    border : 1px solid #999999;  

    left : 607px;  

    top : 200px;  

    width : 187px;  

    height : 30px;  

    position : absolute;  

  

}  

  

#score {  

  

    border : 1px solid #999999;  

    left : 607px;  

    top : 240px;  

    width : 187px;  

    height : 30px;  

    position : absolute;  

  

}  

  

#timePanel {  

  

    border : 1px solid #999999;  

    left : 607px;  

    top : 300px;  

    width : 187px;  

    height : 30px;  

    position : absolute;  

  

}  

  

#time {  

  

    border : 1px solid #999999;  

    left : 607px;  

    top : 340px;  

    width : 187px;  

    height : 30px;  

    position : absolute;  

  

}  

  

#button {  

  

    border : 1px solid #999999;  

    left : 607px;  

    top : 400px;  

    width : 187px;  

height : 30px;

position : absolute;

}

Let’s take a look at the core js part implementation code. The js part is divided into three source files: game Each source file of .js, map.js, and piece.js corresponds to a class. This game uses the game class to manipulate map and picture piece objects:

game.js code is as follows:

[javascript]

// Game control class

var Game = {

  // Game background

  gamePanel: null,

       

    //   Score

 Score : 0,

// Time

time: 0,

// Picture map

pieceMap: null,

// Picture list

pieceList: [],

                                                                   pieceimglist: [],

// Picture random number list

randomlist: [],

// trajectory list

tracklist: [],

// whether the game starts

isgamebigin: false,

                                                                                                                                                                              

// Whether the picture element is clicked for the first time

isFirstClick: true,

                                                                                                                                                                              GetElementById ( "). elementById("reset").disabled = false;

                                                                                                                                                                

                                                                                                          

                                                                                                                                                                                                                                                                                             

reset : function() {

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

this.initPieces();

this.initImgPieces();

this.time = 0;

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

this.score = 0;

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

             

          this.isGameReset = true;

// Initialization

init : function() {

if (this .isGameBegin) {

       

                                                                                                                                                         

    var _this = this;

       

          this.time = 0;

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

This.initPieces(); this.initImgPieces(); This.isGameBegin = true;

},

机 随 // Add the randomly generated 150 pictures into the canvas

Initpieces: Function () {

var _This = this;

this.initrandomList (); Random list sorting

this.messRandomList();

                                                                                         var piece = new Piece(this);               this.pieceList .push(piece);

           

        var x = (i%17);         var y = Math.floor(i/17);

This.pieceMap.put(x+","+y, piece);

                                                                          piece.setPosition(x, y);

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

                                                                                                         

              piece.dom.appendChild(piece.track) ;

                  piece.isTracked = true;                                                                                                                                  ) {

e piece.Setatedge (true);

}

this.pieceimglist.push (piece);

// Initialize pictures

initImgPieces : function() {

                                                                                                 This.pieceImgList[i].initImg ();

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

This.pieceImgList[i].setImgSrc(this.pieceImgList[i].img. src);

                                                                                                                                              function() {

                                                                                                                                                                                                   Int(Math.random() *22*10000, 10);

var number = random%23;

this.randomList.push(number);

this.randomList.push(number);                                                                                               

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

var number = random%150;

var temp;

temp = this.randomList [i];

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

this.randomList[number] = temp;

} }

},

                                                                                   var _this = this;

                                                                            } else {

                                                                                                                                   . innerHTML = this.time;

this.isGameBegin = true;

setTimeout(function() {_this.startTime();}, 1000);

}

                                                                                                                                              Clear

clear : function() {

for (var i = 0; i < this.pieceList.length; i ++) {

i] .dom);                                                                                                                                                       

this.pieceImgList = [];

this.isGameOver = true;

this.isGameBegin = false; ElementById("start").disabled = false;

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

}

// Game start entrance

function Start() {

Game.start();

}

// Game reset entry

function Reset() {

Game.reset();

}

Customized js version mapping structure map.js The source file is as follows:

[javascript]

var Map = function(){

this.data = [];

}

M ap.prototype = {

put : function(key, value) {

                                                                                                                                                      return this.data[key]; },

                                                                                           

isEmpty : function() {

return this.data .length == 0;

},

size: function() {

} return this.data.length;

}

pictures The source file of class piece.js is as follows:

[javascript]

var Piece = function(game) {

// Game object

this.game = game;

// Is it an edge? Element

this.isEdge = false;

// Whether it is next to the edge element

this.atEdge = false;

// Image dom element

this.dom = null;

/ / Image element

this.img = null;

// Image element source

this.src = null;

// Track element

this.track = null;

// Whether it can be used as a track

This.isTracked = false;

// Check mark element

this.selected = null;

// Pictures arranged horizontally This.x = 0;

// Pictures are arranged vertically

this.y = 0;

​ ​

​ // Picture flash Id

​ this.flashId = null;

​ ​

​ // Whether the picture is clicked

​this.onClicked = false;

// Number of flashes

this.flashCount = 0;

this.init();

}

Piece.prototype = {

// Initialization

init : function( ) {

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

this.dom.className = "piece"; createElement("img");

},

// Initialization image

initImg: function() {

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

     

        this.dom.appendChild(this.img);  

      

    },  

      

    // 满足算法后初始化track元素  

    initTrack : function() {  

  

        if (this.flashId != null) {  

              

            // 停止闪烁  

            this.stopFlash();  

              

        }         

          

        //alert("initTrack middle");  

        if (this.track != null) {  

          

            return;  

        }  

          

        this.onClicked = false;  

          

        this.dom.removeChild(this.img);  

      

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

        this.track.className = "track";  

        this.dom.appendChild(this.track);  

      

    },  

      

    // 位图片设置来源  

    setImgSrc : function(src) {  

  

        this.src = src;  

      

    },  

      

    // 为图片设置二维排列位置  

    setPosition : function(x, y) {  

      

        this.x = x;  

        this.y = y;  

      

    },  

      

    // 为图片设置选中元素  

    setSelected : function() {  

          

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

              

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

            //this.selected.src = "img/selected.gif";  

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

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

          

        } else {  

              

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

                          

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

              

            //}  

              

            this.img.src = this.src;  

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

          

        }  

                      

    },  

      

    // 设置是否为边缘元素  

    setEdge : function(isEdge) {  

      

        this.isEdge = isEdge;  

      

    },  

      

    // 设置是否挨着边缘元素  

    setAtEdge : function(atEdge) {  

      

        this.atEdge = atEdge;  

      

    },  

      

    // 开始闪烁  

    flash : function() {  

          

        var _this = this;  

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

},

// Stop flashing

stopFlash : function() {

clearInterval( this.flashId);

                                                                                                                                                                                if (this.flashCount % 2 == 1) {

                                                                                                                .selected);

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

对 // Object internal function

OnClick: Function () {

if (this.OnClicked) {

Return;

}}

var _This = this;

                                                                                                                                                                                                                                                                     . if (_this.onClicked) {

Return;

}}

(_this.checkpiece ()) {

Return;

}}

_this.flash ( );

            _this.onClicked = true;

// Check if there is a clicked picture

checkPiece: function() {

         

                         i = 0; i < this.game.pieceList.length; i ++) {

                                                                                                                                                                                              )) {

                                                                                                  //alert("The same Image"); [i]);

                                                                                             pieceList[i].stopFlash();

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

                                                                           

                                                                                                                                                                                                                                                                                                                                                                      

                                                                               .

                                                                                                                                                                             ,                                                                                                        

                                                                                                               

                                                                                                                                                         );

                                                                                                                                                                                                               - this.x) == 1) && (piece.y == this.y)

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

                                                                                                                                                          //alert("isStraightReach");

if (this.isNear(piece )) {

                                                                                      a = false;

var b = false;

                                                                                                                                                                                                                       ​= pieces. < this.max(this.y, piece.y); i ++) {

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

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

                  

                    a = true;  

                      

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

                      

                    continue;  

                } else {  

                  

                    a = false;  

                    this.game.trackList = [];  

                      

                    return a;     

                }  

              

            }  

                          

        }  

          

        // 沿x轴方向搜索  

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

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

            for (var i = this.min(this.x, piece.x) + 1; i < this.max(this.x, piece.x); i ++) {  

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

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

                      

                    b = true;  

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

                      

                    continue;  

                } else {  

                  

                    b = false  

                    this.game.trackList = [];  

                      

                    return b;  

                }  

              

            }  

              

        }  

  

        return a || b;  

    },  

  

      

    // 拐一次弯搜索  

    isReach1 : function(piece) {  

        //alert("isReach1");  

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

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

                          

        var _this = this;  

  

          

        if ((_this.isStraightReach(corner_1))  

            && (corner_1.isStraightReach(piece))  

            && corner_1.isPass()) {  

              

                //alert("corner_1: " + this.x + "," + piece.y);  

                this.game.trackList.push(corner_1);  

              

                return true;  

        }  

      

        if ((_this.isStraightReach(corner_2))  

            && (corner_2.isStraightReach(piece))  

            && corner_2.isPass()) {  

                //alert("corner_2: " + piece.x + "," + this.y);  

                this.game.trackList.push(corner_2);  

              

            return true;  

        }  

  

        return false;  

    },  

      

    // 直接或拐一次弯搜索  

    isReach : function(piece) {  

          

        var a = this.isStraightReach(piece);  

          

        var b = this.isReach1(piece);  

                  

        return a || b;  

    },  

      

    // 拐两次弯搜索  

    isReach2 : function(piece) {  

              

        // 沿x轴正向搜索  

        for (var i = this.x + 1; i < 17; i ++) {  

              

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

                  

                this.game.trackList = [];  

                  

                break;  

                  

            } 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));  

                      

                return true;  

            }     

          

        }  

          

        // 沿x轴搜索  

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

              

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

              

                this.game.trackList = [];  

                  

                break;  

                  

            } 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));  

                      

                return true;  

            }  

          

        }  

          

        // 沿y轴搜索  

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

              

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

                  

                this.game.trackList = [];  

                  

                break;  

                  

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

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

                  

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

                      

                return true;  

            }  

          

        }  

  

        // 沿y轴正向搜索  

        for (var i = this.y + 1; i < 12; i ++) {  

  

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

                  

                this.game.trackList = [];  

                  

                break;  

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

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

                  

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

                      

                return true;  

            }  

          

        }  

          

        return false;  

    },  

      

    // 路径连接  

    linkTrack : function(piece) {  

      

        this.initTrack();  

        piece.initTrack();  

        this.changeScore();  

        this.showTrack(piece);  

              

    },  

      

    // 显示足迹  

    showTrack : function(piece) {  

      

        this.game.trackList.push(piece);  

        this.track.className = "track2";  

          

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

            //alert(i);  

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

          

        }  

          

        var _this = this;  

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

      

    },  

      

    // 隐匿足迹  

    hideTrack : function() {  

      

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

              

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

              

        }  

              

        this.game.trackList = [];  

        this.track.className = "track";  

        this.isTracked = true;  

          

    },  

      

    // 分数增加  

    changeScore : function() {  

              

        this.game.score += 100;  

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

      

    },  

      

    min : function(a, b) {  

      

        if (a < b) {  

          

            return a;  

          

        } else {  

          

            return b;