JS ネイティブ 2048 ゲーム ソース コード共有 (インターネットの最新情報)

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=360px,user-scalable=no" />
    <title>2048 ミニゲーム</title>
    <スタイル>
        本文、h1、div、表、tr、td{
            マージン: 0px;
            パディング: 0px;
        }
        体{
            背景色: rgb(0,0,0);
        }
        h1{
            マージン: 36px 自動;
            テキスト配置: 中央;
            色: rgba(255,255,255,0.7);
            font-family: "楷体";
            フォントサイズ: 48px;
            テキストシャドウ: 1px 2px 3px rgb(134,134,134);
        }
        div{
            マージン: 12px 自動;
            行の高さ: 60px;
        }
        ＃箱{
            上マージン: -24px;
            幅: 240ピクセル;
            高さ: 60px;
            テキスト配置: 中央;
            フォントの太さ: 太字;
            色: rgb(255,255,255);
        }
        #ボックス入力{
            境界線: 3px実線rgb(255,255,255);
            境界線の半径: 4px;
            ボックスの影: 1px 2px 3px rgb(234,234,234);
        }
        #ボックス入力:フォーカス{
            アウトラインスタイル: なし;
        }
        テーブル{
            マージン: 24px 自動;
            境界線: 3px実線rgb(255,255,255);
            境界線の半径: 6px;
        }
        #ランダム,td{
            幅: 60ピクセル;
            高さ: 60px;
            境界線: 2px実線rgb(255,255,255);
            境界線の半径: 18px;
            テキスト配置: 中央;
            フォントの太さ: 太字;
            色: rgb(255,255,255);
        }
        td:ホバー{
            カーソル: ポインタ;
        }
    </スタイル>
</head>
<本文>
    <h1>2 0 4 8</h1>
<!-- スコアと新しいゲームボタンを表示-->
<div id="ボックス">
    スコア: <span id="span">0</span>
             
    <input id="but" type="button" value="新しいゲーム" />
</div>
<!-- 乱数を表示 -->
<div id="ランダム"></div>
<!-- ゲームのメインレイアウト -->
<表の境界線="3px">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</テーブル>
</本文>
<script type="text/javascript">
    var span = document.getElementById("span");
    var but = document.getElementById("but");
    タグ名によって要素を取得します。
    //スコアを定義する var score = 0;
    //乱数を定義 var random = document.getElementById("random");
    var showNums = [2,4,8,16,32,64,128,256,512,1024];
    var showNum = 0;
    //背景色の配列を定義する var colors = ["rgb(255, 169, 182)","rgb(108, 251, 104)","rgb(255, 150, 46)","rgb(255, 121, 46)","rgb(255, 217, 46)",
                "rgb(46, 200, 255)","rgb(46, 113, 255)","rgb(240, 46, 255)","rgb(46, 255, 175)","rgb(153, 134, 255)"];
    // プログラムを初期化し、乱数を生成します /* 開始 */
    関数init(){
        var max = maxNum();
        var 数値 = 0;
        (var i=4;i > 0;i++){
            最大値 < Math.pow(2,i+1) の場合
                num = parseInt(Math.random()*i);
                壊す;
            }そうでなければ(最大値<2048){
                続く;
            }それ以外{
                num = parseInt(Math.random()*showNums.length);
                壊す;
            }
        }
        random.innerHTML = showNums[num];
        色(ランダム);
        showNum = showNums[数値];
    }
    初期化();
    /* 終わり */
     
    //チェス盤の最大値を取得します /* 開始 */
    関数maxNum(){
        var 最大値 = 0;
        for(var i=0;i<td.length;i++){
            if(td[i].innerHTML == ""){
                最大 = 最大;
            }それ以外{
                （parseInt（td[i].innerHTML）>最大）の場合{
                    td[i].innerHTML を解析します。
                }それ以外{
                    最大 = 最大;
                }
            }
        }
        最大値を返します。
    }
    /* 終わり */
     
    // 数字に応じて背景色を表示します /* 開始 */
    関数 color(obj){
        for(var i=0;i < colors.length;i++){
            if(obj.innerHTML == Math.pow(2,i+1)){
                obj.style = "背景色: "+colors[i]+";";
                壊す;
            }
        }
    }
    /* 終わり */
     
    //マージアルゴリズム/* 開始 */
    function offsetTop(obj,index){//マージif(index > 3){
            if(td[(index-4)].innerHTML == obj.innerHTML){
                td[(index-4)].innerHTML = "";
                td[(index-4)].style = "背景色: rgba(0, 0, 0, 0);";
                true を返します。
            }
        }
        false を返します。
    }
    function offsetBottom(obj,index){//マージif(index < 12){
            if(td[(index+4)].innerHTML == obj.innerHTML){
                td[(インデックス+4)].innerHTML = "";
                td[(index+4)].style = "背景色: rgba(0, 0, 0, 0);";
                true を返します。
            }
        }
        false を返します。
    }
    function offsetLeft(obj,index){//Merge leftif(index!=0 && index!=4 && index!=8 && index!=12){
            if(td[(index-1)].innerHTML == obj.innerHTML){
                td[(インデックス-1)].innerHTML = "";
                td[(index-1)].style = "背景色: rgba(0, 0, 0, 0);";
                    true を返します。
            }
        }
        false を返します。
    }
    function offsetRight(obj,index){//Merge rightif(index!=3 && index!=7 && index!=11 && index!=15){
            if(td[(index+1)].innerHTML == obj.innerHTML){
                td[(インデックス+1)].innerHTML = "";
                td[(index+1)].style = "背景色: rgba(0, 0, 0, 0);";
                true を返します。
            }
        }
        false を返します。
    }
    /* 終わり */
     
    //セルが結合されているかどうかを判断/* 開始 */
    関数 merge(obj,index){
        if(offsetTop(obj,index)){
            オフセットボトムの場合(obj,index)
                （オフセット左（オブジェクト、インデックス））の場合{
                    if(offsetRight(obj,index)){
                        obj.innerHTML = parseInt(obj.innerHTML)*2; // 上、下、左、右を結合します。スコア += 16;
                        マージ(obj,インデックス);
                    }それ以外{
                        obj.innerHTML = parseInt(obj.innerHTML)*2; // 上、下、左のみを結合する score += 8;
                        マージ(obj,インデックス);
                    }
                }そうでない場合、(オフセット右(obj,インデックス)){
                    obj.innerHTML = parseInt(obj.innerHTML)*2; // 上、下、右のみを結合する score += 8;
                    マージ(obj,インデックス);
                }それ以外{
                    obj.innerHTML = parseInt(obj.innerHTML)*2; // 上位スコアと下位スコアのみを結合 += 4;
                    マージ(obj,インデックス);
                }
            }それ以外の場合は(offsetLeft(obj,index)){
                if(offsetRight(obj,index)){
                    obj.innerHTML = parseInt(obj.innerHTML)*2; // 上、左、右のみを結合する score += 8;
                    マージ(obj,インデックス);
                }それ以外{
                    obj.innerHTML = parseInt(obj.innerHTML)*2; // 上と左のみを結合します。スコア += 4;
                    マージ(obj,インデックス);
                }
            }そうでない場合、(オフセット右(obj,インデックス)){
                obj.innerHTML = parseInt(obj.innerHTML)*2; // 上と右のみを結合します。スコア += 4;
                マージ(obj,インデックス);
            }それ以外{
                obj.innerHTML = parseInt(obj.innerHTML)*2; //スコア += 2 のみをマージします。
                マージ(obj,インデックス);
            }
        }それ以外の場合は(offsetBottom(obj,index)){
            （オフセット左（オブジェクト、インデックス））の場合{
                if(offsetRight(obj,index)){
                    obj.innerHTML = parseInt(obj.innerHTML)*2; // 下、左、右のみを結合します。スコア += 8;
                    マージ(obj,インデックス);
                }それ以外{
                    obj.innerHTML = parseInt(obj.innerHTML)*2; // 下と左のみを結合します。スコア += 4;
                    マージ(obj,インデックス);
                }
            }そうでない場合、(オフセット右(obj,インデックス)){
                obj.innerHTML = parseInt(obj.innerHTML)*2; // 下と右のみを結合します。スコア += 4;
                マージ(obj,インデックス);
            }それ以外{
                obj.innerHTML = parseInt(obj.innerHTML)*2; // スコア += 2 のみをマージします。
                マージ(obj,インデックス);
            }
        }それ以外の場合は(offsetLeft(obj,index)){
            if(offsetRight(obj,index)){
                obj.innerHTML = parseInt(obj.innerHTML)*2; // 左と右のみを結合する score += 4;
                マージ(obj,インデックス);
            }それ以外{
                obj.innerHTML = parseInt(obj.innerHTML)*2; // 左のみをマージします。スコア += 2;
                マージ(obj,インデックス);
            }
        }そうでない場合、(オフセット右(obj,インデックス)){
            obj.innerHTML = parseInt(obj.innerHTML)*2; // 右側のスコアのみをマージします += 2;
            マージ(obj,インデックス);
        }
    }
    /* 終わり */
     
    //主要
    /* 始める */
    関数gameOver(){
        for(var i=0;i<td.length;i++){
            if(td[i].innerHTML == ""){
                壊す;
            }
            もし(i == 15){
                alert("残念ながらゲームは終了しました...");
            }
        }
    }
    /* 終わり */
     
    //主要
    /* 始める */
    （関数（）{
        for(var i=0;i<td.length;i++){
            var 選択 = td[i];
            選択してください。
            choose.onclick = 関数(){
                if(this.innerHTML == ""){
                    this.innerHTML = showNum;
                    マージ(this、this.index);
                    if(this.innerHTML >= 2048){
                        this.innerHTML = "";
                        this.style = "背景色: rgba(0, 0, 0, 0);";
                    }
                    色(これ);
                    初期化();
                }
                スコアを更新します。
                ゲームオーバー（）;
            }
        }
    })();
    /* 終わり */
     
    //スコアを更新 /* 開始 */
    関数 updateScore(){
        スコアが500以上の場合
            span.style = "色: rgb(255,0,0)";
        }それ以外の場合(スコア> 100){
            span.style = "色: rgb(255,0,255)";
        }それ以外の場合(スコア > 50){
            span.style = "色: rgb(255,255,0)";
        }それ以外の場合(スコア> 20){
            span.style = "色: rgb(0,0,255)";
        }それ以外の場合(スコア > 10){
            span.style = "色: rgb(0,255,0)";
        }
        span.innerHTML = スコア;
    }
    /* 終わり */
     
    //新しいゲーム/*開始*/
    しかし、onclick = 関数(){
        場所を再読み込みします。
    }
    /* 終わり */
     
</スクリプト>
</html>