JavaScript 作成 2048 ミニゲーム_JavaScript スキル

昨年、2048 は非常に人気がありましたが、私はこれまでプレイしたことがありませんでした。JS を使用して 2048 を作成すると、コードは 100 行を超えるだけだと言っていました。

今日試してみましたが、ロジックは複雑ではありません。主にデータ コンストラクター内のデータに対するさまざまな操作が含まれ、DOM を再レンダリングしてインターフェイスを更新します。全体のコストは複雑ではありません。 JS、CSS、HTML の数は 300 です。複数行

インターフェイスは、jQuery を使用して underscore.js のテンプレート メソッドを使用して生成されます。イベントのバインドは PC 側のみと互換性があり、keydown イベントのみがバインドされます。 🎜 >

コードを github ページに配置し、ここをクリックして例を表示します。 2048 インスタンスを開きます。

レンダリングは次のとおりです:

すべてのコードはデータとビューの 2 つのブロックに分割されます。

データはデータを構築するコンストラクターであり、データはプロトタイプのいくつかのメソッドを継承します。

View は Data のインスタンスに基づいてビューを生成し、イベントを直接コントローラーとして扱い、それらを View と結合します。

を分離する必要はありません。

データの構造は次のとおりです:

データ モデルを使用すると、ビューは単純です。主に、ボトムライン ライブラリのアンダースコアのテンプレート メソッドを使用して、データを含む HTML 文字列を生成し、インターフェイスを再描画します。

ビューのプロトタイプ メソッド:

    /**
     * @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: function // HTML 文字列を生成し、インターフェイスに配置します

init: function //コンストラクターの初期化メソッド

bindingEvents: function //イベントを str にバインドします。コントローラーであると考えてください

オリジナルの2048にはブロックの移動効果があるため、インターフェース内で主にブロックの移動を担当するサービス(ツールメソッド、このツールメソッドはViewに継承されます)を独自に用意しました。テンプレート生成プロセス中に、ノードの位置に応じて水平座標と垂直座標を動的に生成し、次の位置に配置する必要があります。

以下はすべてのコードです。参照されている JS は CDN を使用しています。直接開いて確認できます。

  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";
    }
    //这个应该算是服务;
  };

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。