[論理トレーニング]JavaScriptでミニゲームを作る——2048(初級版)

前言
この前、ネットでたくさんの有料や公開授業があると気づきました.jsで2048ゲームを作ることを教えてくれました.そして自分も手を動かして一つのゲームを作りたいです.このミニゲームをやるのは主に自分の論理能力を鍛えるためで、前の勉強のまとめとも言えます.
注:

実現方法は完全に自分で遊びながら考えたものです.

他の配色案はある2048ゲームのスクリーンショットで、psで吸収したのです.

コードの多くは、配列関連の方法を使用して代替することができます.ここでは、配列方法がどのような原理であるかを自分で理解するためです.

時間の関係で今回は詳しく説明しません.
ゲームロジック

ランダム位置からデジタル2または4

を生成する.

方向キーを押すと、隣の同じ数字が新たな数字に結合されます.

方向キーを押すと、数字は対応方向の一番端に移動します.(左、数字を全部左に移動します.)

は、矢印キーを押すたびに、マージが完了すると、数字のないランダムな位置に新しい数字2または4

を生成する.

現在のスコアは現在のすべての数字に等しいです.合計

数字があれば2048ゲーム終了です.

プロジェクト関連
このバージョンは原生ES 6で書いたもので、ゲームロジックの中の1,2,3,4だけを実現しました.第一版住所:https://github.com/yhtx1997/S...
その後はvueでもう一度書き直すつもりです.そして、完璧にして、長い間原生を使っています.
プロジェクトコード
二次元配列でデータの管理を行います.デフォルトはすべてゼロです.

let arr = [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
];

乱数の作成

let s = 0;
let create = () => {
    let x = Math.floor(Math.random() * 4);
    let y = Math.floor(Math.random() * 4);

    // console.log(s)
    if (s > 100) {
        s = 0;
        return;
    }
    if (arr[x][y] == 0) {
        if (Math.floor(Math.random() * 10) % 2 == 0) {
            arr[x][y] = 2;
        } else {
            arr[x][y] = 4;
        }
        s = 0;
        return;
    } else {
        s++;
        return create();
    }
}

ページを描画

let updateHtml = () => {
    //    
    let warp = document.getElementById('warp');
    let html = '';
    //       HTML 
    for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr[i].length; j++) {
            html += `
${arr[i][j]==0?'':arr[i][j]}
`;
        }
    }
    //        HTML      
    warp.innerHTML = html;
}

事件の傍受

window.onkeydown = (e) => {
    switch (e.keyCode) {
        case 37:
            // ←
            console.log('←');
            arr = new move(arr).moveLeft();
            create(); //      
            updateHtml(); //       
            break;
        case 38:
            // ↑
            console.log('↑');
            arr = new move(arr).moveUp();
            create(); //      
            updateHtml(); //       
            break;
        case 39:
            // →
            console.log('→');
            arr = new move(arr).moveRight();
            create(); //      
            updateHtml(); //       
            break;
        case 40:
            // ↓
            console.log('↓');
            arr = new move(arr).moveDown();
            create(); //      
            updateHtml(); //       
            break;
    }
}

具体的な処理関数
ゼロ以外の数字を先に抽出します.

export default function ClearZero (arr){//  
    let clearZero = [[],[],[],[]];
    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
            if (arr[i][j] != 0) {
                clearZero[i].push(arr[i][j])
            }
        }
    }
    return clearZero;
}

隣り合う等しい数字をグループ化して加算します.
グループ化

import Deduplication from './deduplication';//           

export default class Grouping{//          
    constructor(clearZero){
        this.clearZero = clearZero;
    }
    left(){
        let newarr = [[],[],[],[]];
        for (let j = 0; j < this.clearZero.length; j++) {
            let grouping = [];
            let i = 0;
            //         
            while (i < this.clearZero[j].length) {
                if (this.clearZero[j][i] == this.clearZero[j][i + 1]) {
                    grouping.push([this.clearZero[j][i], this.clearZero[j][i + 1]]);
                    i += 2;
                } else {
                    grouping.push(this.clearZero[j][i]);
                    i++;
                }
            }
            //   
            newarr[j] = Deduplication(grouping);
        }
        return newarr;
    }
    right(){
        let newarr = [[],[],[],[]];
        for (let i = 0; i < this.clearZero.length; i++) {
            let grouping = [];
            let j = this.clearZero[i].length - 1;
            //         
            while (j >= 0) {
                if (this.clearZero[i][j] == this.clearZero[i][j - 1]) {
                    grouping.unshift([this.clearZero[i][j], this.clearZero[i][j - 1]]);
                    j -= 2;
                } else {
                    grouping.unshift(this.clearZero[i][j]);
                    j--;
                }
            }
            //        
            newarr[i] = Deduplication(grouping);

        }
        return newarr;
    }


}

加算

export default function Deduplication (grouping){//           
    for (let i = 0; i < grouping.length; i++) {
        if (typeof grouping[i] == 'object') {
    
            grouping[i] = grouping[i][0] + grouping[i][1];
        }
    }
    return grouping;
}

ビットを占める0を追加します.

export default function AddZero (newarr,w){//  
    for (let i = 0; i < newarr.length; i++) {
        while (newarr[i].length != 4) {
            if(w == 'l'){
                newarr[i].push(0);
            }else if(w == 'r'){

                newarr[i].unshift(0);
            }
        }
    }
    return newarr;
}

上下の処理
Y軸の処理をX軸に変換する処理

export default function turn(arr) {//      
    let clearZero = [[],[],[],[]];
    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
            clearZero[i][j] = arr[j][i]
        }
    }
    return clearZero;
}

などの処理が完了したら上の関数を呼び出し、X軸の処理結果をY軸の表現に戻します.