Javascript-Schreiben 2048 Minispiel_Javascript-Kenntnisse

Letztes Jahr war 2048 sehr beliebt. Mein Kollege sagte, dass es nur mehr als 100 Zeilen Code erfordert

Ich habe es heute ausprobiert und die Logik ist nicht kompliziert. Sie umfasst hauptsächlich verschiedene Vorgänge an den Daten im Datenkonstruktor und aktualisiert dann die Schnittstelle durch erneutes Rendern des DOM. Die Gesamtkosten sind nicht kompliziert von JS, CSS und HTML ist 300. Mehrere Zeilen;

Die Schnittstelle wird mithilfe der Vorlagenmethode von underscore.js unter Verwendung von jQuery generiert, hauptsächlich für die DOM-Auswahl und -Operation sowie für Animationseffekte. Die Bindung von Ereignissen ist nur mit der PC-Seite kompatibel, und nur das Keydown-Ereignis ist gebunden 🎜 >

Platzieren Sie den Code auf der Github-Seite und klicken Sie hier, um das Beispiel anzuzeigen: Öffnen Sie die 2048-Instanz

Die Darstellung ist wie folgt:

Alle Codes sind in zwei Blöcke unterteilt: Daten und Ansicht Data ist ein Konstruktor, der die Daten erstellt, und die Daten erben einige Methoden vom Prototyp

View generiert Ansichten basierend auf Dateninstanzen und bindet Ereignisse direkt als Controller und fügt sie zusammen. Es besteht keine Notwendigkeit, sie zu trennen

Die Struktur der Daten ist wie folgt:

Mit dem Datenmodell ist die Ansicht einfach. Es verwendet hauptsächlich die Vorlagenmethode des Unterstrichs der Endzeilenbibliothek, um HTML-Zeichenfolgen mit den Daten zu generieren, und zeichnet dann die Schnittstelle neu:

Prototyp-Methode von View:

    /**
     * @desc 构造函数初始化
     * */
    init : function
    /**
     * @desc 生成了默认的数据地图
     * @param void
     * */
    generateData : function
    /**
     * @desc 随机一个block填充到数据里面
     * @return void
     * */
    generationBlock : function
    /**
     * @desc 获取随机数 2 或者是 4
     * @return 2 || 4;
     * */
    getRandom : function
    /**
     * @desc 获取data里面数据内容为空的位置
     * @return {x:number, y:number}
     * */
    getPosition : function
    /**
     * @desc 把数据里第y排， 第x列的设置， 默认为0， 也可以传值;
     * @param x, y
     * */
    set : function
    /**
     * @desc 在二维数组的区间中水平方向是否全部为0
     * @desc i明确了二维数组的位置， k为开始位置， j为结束为止
     * */
    no_block_horizontal : function
    no_block_vertica : function
    /**
     * @desc 往数据往左边移动，这个很重要
     * */
    moveLeft : function
    moveRight : function
    moveUp : function
    moveDown : function

​​​​ renderHTML: Funktion //HTML-String generieren und in die Schnittstelle einfügen

init: Funktion //Konstruktor-Initialisierungsmethode

           bindEvents: Funktion // Ereignisse an str binden, denken Sie einfach, es ist ein Controller

Da das Original 2048 den Bewegungseffekt von Blöcken hat, haben wir unabhängig einen Dienst eingerichtet (Tool-Methode, diese Tool-Methode wird von View geerbt), der hauptsächlich für die Bewegung von Blöcken in der getPost-Schnittstelle verantwortlich ist Wird von der Basisbibliothek verwendet. Während des Vorlagengenerierungsprozesses müssen horizontale und vertikale Koordinaten entsprechend der Position des Knotens dynamisch generiert und dann positioniert werden:

Das Folgende ist der gesamte Code, auf den verwiesen wird. JS verwendet CDN, Sie können ihn direkt öffnen und einen Blick darauf werfen:

  var util = {
    animateShowBlock : function() {
      setTimeout(function() {
        this.renderHTML();
      }.bind(this),200);
    },
    animateMoveBlock : function(prop) {
      $("#num"+prop.form.y+""+prop.form.x).animate({top:40*prop.to.y,left:40*prop.to.x},200);
    },
    //底线库的模板中引用了这个方法;
    getPost : function(num) {
      return num*40 + "px";
    }
    //这个应该算是服务;
  };

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.