Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Natives JavaScript implementiert das Lianliankan-Spiel

Natives JavaScript implementiert das Lianliankan-Spiel

高洛峰
Freigeben： 2016-11-28 13:32:03
Original
1228 Leute haben es durchsucht

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

 

[html]  

 

 

     

         

        连连看  

       

   

 

     

       

 

           

 

               

 

                   

 

                   

 

               

 

               

 

               

 

                    分  数  

               

 

               

 

                    0  

               

 

               

 

                    时  间  

               

 

               

 

                    0  

               

 

               

 

                     

                     

               

                 

           

 

       

 

         

         

         

     

 

 

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

 

[css] 

body {  

  

   Schriftgröße: 16px;  

   Schriftstärke: fett;  

   Farbe: grau;  

  

}  

  

#whole {  

  

    border : 1px double #999999;  

   Rahmenbreite: 5 Pixel;  

   Breite: 800px;  

   Höhe: 505px;  

   Position: relativ;  

  

}  

  

#gamePanel {  

      

    Rand: 1px 1px 1px 1px;  

   Breite: 602px;  

   Höhe: 502px;  

   Hintergrund: url(../img/background.gif) wiederholen;  

   Position: absolut;  

  

}  

  

#pieces {  

  

    margin-top : 35px;  

   Rahmen: 1 Pixel durchgehend #999999;  

   Breite: 546px;  

   Höhe: 434px;  

   Position: relativ;  

  

}  

  

#pieces .piece {  

  

    width : 32px;  

   Höhe: 36px;  

   Position: relativ;  

   cursor: Zeiger;  

    float : left;  

  

}  

  

#pieces .track {  

  

    width : 32px;  

   Höhe: 36px;  

   Position: relativ;  

    float : left;  

  

}  

  

#pieces .track2 {  

  

    width : 32px;  

   Höhe: 36px;  

   Position: relativ;  

    float : left;  

   Hintergrund: rot;  

  

}  

  

#gameLogo {  

      

    margin-top : 60px;  

   Rahmen: 1 Pixel durchgehend #999999;  

    links: 607px;  

   Breite: 187px;  

   Höhe: 73px;  

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

   Position: absolut;  

  

}  

  

#scorePanel {  

  

    border : 1px solid #999999;  

    links: 607px;  

   oben: 200px;  

   Breite: 187px;  

   Höhe: 30px;  

   Position: absolut;  

  

}  

  

#score {  

  

    border : 1px solid #999999;  

    links: 607px;  

   oben: 240px;  

   Breite: 187px;  

   Höhe: 30px;  

   Position: absolut;  

  

}  

  

#timePanel {  

  

    border : 1px solid #999999;  

    links: 607px;  

   oben: 300px;  

   Breite: 187px;  

   Höhe: 30px;  

   Position: absolut;  

  

}  

  

#time {  

  

    border : 1px solid #999999;  

    links: 607px;  

   oben: 340px;  

   Breite: 187px;  

   Höhe: 30px;  

   Position: absolut;  

  

}  

  

#button {  

  

    border : 1px solid #999999;  

    links: 607px;  

   oben: 400px;  

   Breite: 187px;  

Höhe: 30px;

Position: absolut;

>

Werfen wir einen Blick auf den Implementierungscode des Kern-JS-Teils . Der js-Teil ist in drei Quelldateien unterteilt, nämlich game.js, map.js und Piece.js. Jede Quelldatei entspricht einer Klasse, in der dieses Spiel

verwendet um Karten- und Bildstückobjekte über die Spielklasse zu manipulieren:

Der game.js-Code lautet wie folgt:

[javascript]

// Spielsteuerungsklasse

var Game = {

// Spielhintergrund

gamePanel: null,

🎜>

Zeit: 0,

// Bildkarte

PieceMap: null,

// Bilderliste

PieceList : [],

// Die Bilderliste enthält keine Bilder

PieceImgList : [],

// Bild-Zufallszahlenliste

randomList: [],

// Titelliste

trackList: [] ,

// Ob das Spiel startet

isGameBigin: false,

: false,

// Ob das Spiel zurückgesetzt wird

isGameReset: false,

// Ob das Bildelement zum ersten Mal angeklickt wird

isFirstClick : true,

// Spiel starten

start : function() {

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

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

if (this. isGameReset) {

                                                                                          

zurück;

                                                                           

} else {

                                                                                                                                       >

},

reset : function() {

} ,

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

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

this.initPieces(); 🎜 >

this.initImgPieces();

this.time = 0;

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

this.score = 0;

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

this.isGameBegin = true;

},

// Initialisierung

init: function() {

if (this.isGameBegin) {

                                                                      🎜>

 

var _this. = this;

this.time = 0;

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

this.initPieces();

this.isGameBegin = true; 🎜>

},

 

// 150 zufällig generierte Bilder zur Leinwand hinzufügen

initPieces : function() {

var _this = this; = Math.floor(i/17);

this.pieceM ap.put(x+", "+y, Piece); " 🎜 >                                                           piece.track = document .createElement ("div"); .isTracked = true; 🎜>> ||. x == 15 ||. y == 10) {                     >                                                                                                                                                                                                                                                                  🎜>

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

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

this.pieceImgList[i].setImgSrc(this.pieceImgList [i].img.src);                                                             > }                                                                                  initRandomList : function() {

/ / Holen Sie sich eine Zufallszahlenfolge, die paarweise erscheint

für (var i = 0; i < 75; i ++) {

var random = PARSEINT ( math.random ()*22*10000, 10);

var number = random%23;

this.randomList.push(number); ,

// Zufallstabelle verschlüsseln

messRandomList : function() {

length;

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

var temp;

temp = this.randomList[i]; >

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

this.randomList[number] = temp;

},

// Startzeit

startTime: function() {

                               if (this.isGameOver) {

                                                         Dieses Mal ++; document.getElementById("time").innerHTML = this.time;

this.isGameBegin = true; startTime();}, 1000); >

klar : function() {

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

this.gamePanel.removeChild(this.pieceList[i].dom);

}

This .pieceList = [];

this.randomList = [];

this.pieceImgList = [];

this.isGameOver = true

}

}

🎜> window.onload = function() {

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

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

}

// Spielstarteingang

Funktion Start() {

Game.start();

}

// Eintrag zum Zurücksetzen des Spiels

function Reset() {

Game.reset();

}

Die angepasste js-Versionszuordnungsstruktur map.js-Quelldatei lautet wie folgt:

[javascript ]

var Map = function(){

this.data = []

}

Map.prototype = {

put: function(key, value) {

this.data[ key] = value;

},

get: function(key) {

];                                                 .length == 0; Bilder Die Quelldatei der Klasse Piece.js lautet wie folgt:

[javascript]

var Piece = function(game) {

// Spielobjekt

this.game = game;

// Ob es sich um ein Kantenelement handelt

this. isEdge = false;

// Ob es sich neben dem Kantenelement befindet

this.atEdge = false

// Bild-Dom-Element

this .dom = null;

// Bildelement

this.img = null;

// Bildelementquelle

this.src = null;

// Trackelement

this.track = null; 🎜>

// Kann es als Track verwendet werden?

this.isTracked = false;

🎜>

                                                             > this.y = 0

// Bild-Flash-ID

this.flashId = null;

// Ob auf das Bild geklickt wird

this.onClicked = false;

// Anzahl der Blitze

this.flashCount = 0;

this .init();

}

Piece.prototype = {

// Initialisierung

init : function() {

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

this .dom.className = " Stück";                                                         }, <🎜. >

                                                                                                            ;

                                            

this.dom.appendChild(this.img);

},

// Initialisieren Sie das Track-Element, nachdem Sie den Algorithmus erfüllt haben

initTrack : function() {

if (this.flashId != null) {

                                             

this.stopFlash( );

} }

//alert("initTrack middle");

if (this.track != null) {

                                                                  🎜> This.onClicked = false;

                                                                                                                                                                                           This.dom.removeChild(this.img); >

this.track.className = "track";

this .dom.appendChild(this.track);

},

},

// Bitbild-Einstellungsquelle

setImgSrc: function(src) {

this.src = src;

},

// Setze die zweidimensionale Anordnungsposition für das Bild

setPosition: function(x, y) {

this.x = x

this.y = y;

},

//Setzt das ausgewählte Element für das Bild

setSelected : function() {

                                                                      🎜>

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

} else {

                                                                                                        this.dom.removeChild(this.selected);                                                                                                      ​ ​ ​ //this.dom.appendChild(this. img); 🎜>

                                                                                                           🎜>

// Set ob es sich neben dem Kantenelement befindet

setAtEdge: function(atEdge) {

this.atEdge =

},

// Beginne zu blinken

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.dom.removeChild(this.selected);  

              

            //}  

              

            this.img.src = this.src;  

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

          

        }  

            

    },  

          

    //对象被选择的内部函数  

    onClick : function() {  

          

        if (this.onClicked) {  

              

            return;  

          

        }  

      

        var _this = this;  

          

        this.img.onclick = function() {  

          

            if (!document.getElementById("start").disabled) {  

              

                zurück;  

              

                       

                zurück;  

            

            }  

  

            if (_this.checkPiece()) {  

  

               zurück;  

              

            }  

              

            _this.flash();  

            _this.onClicked = true;  

          

        };  

      

    },  

      

    // 检查是否有被点击的图片  

    checkPiece : Funktion () {  

          

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

              

            if (this.game. pieceList[i].onClicked && !this.game.pieceList[i].equal(this)) {  

                  

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

                      

                    //alert("The same Image");  

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

                  

                } else {  

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

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

                    this.onClicked = false;  

                      

                    return false;  

                  

                }  

                  

                return true;  

              

            } else {  

              

                Weiter;  

              

            }  

          

        }  

          

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

              

            zurück;  

        }         

          

        if (this.isReach(piece) || this.isReach2(piece)) {  

                  

            dies .linkTrack(piece);  

              

            zurück;  

        }         

                 

   isNear: Funktion(Stück) {  

      

        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;  

    },  

      

    // 直线  

    isStraightReach : function(piece) {  

        //alert("isStraightReach") ;  

        if (this.isNear(piece)) {  

              

            return true;  

          

        }  

          

        var a = false;  

        var b = false;  

  

        // 沿y轴方向搜索  

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

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

            for (var i = this.min(this.y, Piece.y) + 1; i < 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));  

                      

                    weiter;  

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

                      

                    weiter;  

                } else {  

                    this.game.trackList = [];  

                      

                    return b;  

                }  

              

          }  

               }  

  

        gib ein || zurück B;  

},

// 拐 一 次 搜索 搜索

isReach1: Funktion (Stück) {

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

                  

        gib ein || zurück B;  

    },  

      

    // 拐两次弯搜索  

    isReach2 : function(piece) {  

              

        // 沿x轴正向搜索  

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

            

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

                

                this.game.trackList = [];  

                  

                Pause;  

                  

            } 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 = [];  

                  

                Pause;  

                  

            } 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 轴 搜索

für (var i = this.y -1; i & gt; = 0; i -) {

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

                  

                this.game.trackList = [];  

                  

                Pause;  

                  

            } 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轴正向搜索. 

        für (var i = this.y + 1; i < ++) {  

  

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

                  

                this.game.trackList = [];  

                  

                Pause;  

            } 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 + "," + ich));  

                      

                return true;  

            }  

          

        }  

          

        return false;  

    },  

      

    // 路径连接  

    linkTrack : function(piece) {  

      

       das .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;  


Verwandte Etiketten：
javascript
Quelle：php.cn
Vorheriger Artikel：Verwenden Sie JavaScript, um die Auflösung (DPI) von Canvas-Bildern zu ändern Nächster Artikel：Fallstricke von for..in-Schleifen in JavaScript
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...
Aus 2024-04-06 19:25:49
0
1
505
Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...
Aus 2024-04-06 18:16:26
0
1
403
JavaScript-Hover-Ereignisse für herstellerspezifische Pseudoelemente 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
Aus 2024-04-06 15:35:24
0
1
274
Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...
Aus 2024-04-06 14:54:03
0
2
421
Passen Sie das Erscheinungsbild von Bootstrap-Akkordeon-Headern mithilfe der CollapseDisplay-Klasse an Ich möchte den Kartentitel eines Panels mit der Klasse Collapseshow formatieren. In diesem...
Aus 2024-04-06 12:53:11
0
1
376
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage