JS原生2048小遊戲原始碼分享(全網最新)

阿新 • • 發佈：2021-05-06

最近在學習演算法方面的知識，看到了一個由演算法主導的小遊戲，這裡給大家分享下程式碼：

效果：

程式碼：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=360px,user-scalable=no" />
    <title>2048小遊戲</title>
    <style>
        body,h1,div,table,tr,td{
            margin: 0px;
            padding: 0px;
        }
        body{
    
程式設計客棧         background-color: rgb(0,0);
        }
        h1{
            margin: 36px auto;
            text-align: center;
            color: rgba(255,255,0.7);
            font-family: "楷體";
            font-size: 48px;
            text-shadow: 1px 2px 3px rgb(134,134,134);
        }
        div{
            margin: 12px auto;
            line-height: 60px;
        }
        #box{
            margin-top: -24px;
            width: 240px;
            height: 60px;
            text-align: center;
            font-weight: bold;
            color: rgb(255,255);
        }
        #box input{
            border: 3px solid rgb(255,255);
            border-radius: 4px;
            box-shadow: 1px 2px 3px rgb(234,234,234);
        }
        #box input:focus{
            outline-style: none;
        }
        table{
            margin: 24px auto;
            border: 3px solid rgb(255,255);
            border-radius: 6px;
        }
        #random,td{
            width: 60px;
            height: 60px;
            border: 2px solid rgb(255,255);
            border-radius: 18px;
       
程式設計客棧      text-align: center;
            font-weight: bold;
            color: rgb(255,255);
        }
        td:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>2 0 4 8</h1>
<!-- 顯示得分及新遊戲按鈕 -->
<div id="box">
    得分: <span id="span">0</span>
             
    <input id="but" type="button" value="新遊戲" />
</div>
<!-- 顯示隨機數 -->
<div id="random"></div>
<!-- 遊戲主要佈局 -->
<table border="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>
</table>
</body>
<script type="text/ 
javascript">
    var span = document.getElementById("span");
    var but = document.getElementById("but");
    var td = document.getElementsByTagName("td");
    //定義得分
    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)",121,217,"rgb(46,200,255)",113,"rgb(240,46,175)","rgb(153,255)"];
    //初始化程式,生成隨機數
    /* start */
    function init(){
        var max = maxNum();
        var num = 0;
        for(var i=4;i > 0;i++){
            if(max < Math.pow(2,i+1)){
                num = parseInt(Math.random()*i);
                break;
            }else if(max < 2048){
                continue;
            }else{
                num = parseInt(Math.random()*showNums.length);
                break;
            }
        }
        random.innerHTML = showNums[num];
        color(random);
        showNum = showNums[num];
    }
    init();
    /* end */
     
    //獲取棋盤中的最大值
    /* start */
    function maxNum(){
        var max = 0;
        for(var i=0;i<td.length;i++){
            if(td[i].innerHTML == ""){
                max = max;
            }else{
                if(parseInt(td[i].innerHTML) > max){
                    max = parseInt(td[i].innerHTML);
                }else{
                    max = max;
                }
            }
        }
        return max;
    }
    /* end */
     
    //根據數字顯示背景顏色
    /* start */
    function color(obj){
        for(var i=0;i < colors.length;i++){
            if(obj.innerHTML == Math.pow(2,i+1)){
                obj.style = "background-color: "+colors[i]+";";
                break;
            }
        }
    }
    /* end */
     
    //合併演算法
    /* start */
    function offsetTop(obj,index){//合併上
        if(index > 3){
            if(td[(index-4)].innerHTML == obj.innerHTML){
                td[(index-4)].innerHTML = "";
                td[(index-4)].style = "background-color: rgba(0,0);";
                return true;
            }
        }
        return false;
    }
    function offsetBottom(obj,index){//合併下
        if(index < 12){
            if(td[(index+4)].innerHTML == obj.innerHTML){
                td[(index+4)].innerHTML = "";
                td[(index+4)].style = "background-color: rgba(0,0);";
                return true;
            }
        }
        return false;
    }
    function offsetLeft(obj,index){//合併左
        if(index!=0 && index!=4 && index!=8 && index!=12){
            if(td[(index-1)].innerHTML == obj.innerHTML){
                td[(index-1)].innerHTML = "";
                td[(index-1)].style = "background-color: rgba(0,0);";
                    return true;
            }
        }
        return false;
    }
    function offsetRight(obj,index){//合併右
        if(index!=3 && index!=7 && index!=11 && index!=15){
            if(td[(index+1)].innerHTML == obj.innerHTML){
                td[(index+1)].innerHTML = "";
                td[(index+1)].style = "background-color: rgba(0,0);";
                return true;
            }
        }
        return false;
    }
    /* end */
     
    //判斷單元格是否合併
    /* start */
    function merge(obj,index){
        if(offsetTop(obj,index)){
            if(offsetBottom(obj,index)){
                if(offsetLeft(obj,index)){
                    if(offsetRight(obj,index)){
                        obj.innerHTML = parseInt(obj.innerHTML)*2;//合併上、下、左、右
                        score += 16;
                        merge(obj,index);
                    }else{
                        obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併上、下、左
                        score += 8;
                        merge(obj,index);
                    }
                }else if(offsetRight(obj,index)){
                    obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併上、下、右
                    score += 8;
                    merge(obj,index);
                }else{
                    obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併上、下
                    score += 4;
                    merge(obj,index);
                }
            }else if(offsetLeft(obj,index)){
                if(offsetRight(obj,index)){
                    obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併上、左、右
                    score += 8;
                    merge(obj,index);
                }else{
                    obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併上、左
                    score += 4;
                    merge(obj,index);
                }
            }else if(offsetRight(obj,index)){
                obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併上、右
                score += 4;
                merge(obj,index);
            }else{
                obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併上
                score += 2;
                merge(obj,index);
            }
        }else if(offsetBottom(obj,index)){
            if(offsetLeft(obj,index)){
                    obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併下、左、右
                    score += 8;
                    merge(obj,index);
                }else{
                    obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併下、左
                    score += 4;
                    merge(obj,index)){
                obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併下、右
                score += 4;
    www.cppcns.com            merge(obj,index);
            }else{
                obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併下
         http://www.cppcns.com       score += 2;
                merge(obj,index);
            }
        }else if(offsetLeft(obj,index)){
            if(offsetRight(obj,index)){
                obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併左、右
                score += 4;
                merge(obj,index);
            }else{
                obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併左
                score += 2;
                merge(obj,index);
            }
        }else if(offsetRight(obj,index)){
            obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合併右
            score += 2;
            merge(obj,index);
        }
    }
    /* end */
     
    //main
    /* start */
    function gameOver(){
        for(var i=0;i<td.length;i++){
            if(td[i].innerHTML == ""){
                break;
            }
            if(i == 15){
                alert("很遺憾！本局遊戲結束。。。");
            }
        }
    }
    /* end */
     
    //main
    /* start */
    (function(){
        for(var i=0;i<td.length;i++){
            var choose = td[i];
            choose.index = i;
            choose.onclick = function(){
                if(this.innerHTML == ""){
                    this.innerHTML = showNum;
       bhSOfHOI             merge(this,this.index);
                    if(this.innerHTML >= 2048){
                        this.innerHTML = "";
                        this.style = "background-color: rgba(0,0);";
                    }
                    color(this);
                    init();
                }
                updateScore();
                gameOver();
            }
        }
    })();
    /* end */
     
    //更新得分
    /* start */
    function updateScore(){
        if(score > 500){
            span.style = "color: rgb(255,0)";
        }else if(score > 100){
            span.style = "color: rgb(255,255)";
        }else if(score > 50){
            span.style = "color: rgb(255,0)";
        }else if(score > 20){
            span.style = "color: rgb(0,255)";
        }else if(score > 10){
            span.style = "color: rgb(0,0)";
        }
        span.innerHTML = score;
    }
    /* end */
     
    //新遊戲
    /* start */
    but.onclick = function(){
        location.reload();
    }
    /* end */
     
</script>
</html>

到此這篇關於js原生2048小遊戲原始碼分享的文章就介紹到這了,更多相關js 2048小遊戲內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

JS原生2048小遊戲原始碼分享(全網最新)

最近在學習演算法方面的知識，看到了一個由演算法主導的小遊戲，這裡給大家分享下程式碼：

原生js實現2048小遊戲

2048小遊戲，供大家參考，具體內容如下首先2048小遊戲離不開16個格子，我們通過html和css建立好對應的標籤和樣式，然後開始js邏輯

C++基於EasyX圖形庫實現2048小遊戲

C++ 和 EasyX 圖形庫，實現2048小遊戲，供大家參考，具體內容如下 MainGame2048.cpp /** Name: Game2048CoreClass*/

200行java程式碼實現2048小遊戲

本文例項為大家分享了java實現2048小遊戲的具體程式碼，供大家參考，具體內容如下

c#擼的控制檯版2048小遊戲

1.分析最近心血來潮，突然想寫一個2048小遊戲。於是搜尋了一個線上2048玩玩，熟悉熟悉規則。

xss小遊戲原始碼分析

配置下載地址:https://files.cnblogs.com/files/Lmg66/xssgame-master.zip 使用:下載解壓，放到www目錄下(phpstudy)，http服務下都行，我使用的是phpstudy

C語言2048小遊戲課設

專案說明本系統基於C語言開發，適用於剛入門的C語言新手專案課設，開發軟體採用VC++6.0開發，VS，DEV C++等均可執行。

Python 100行程式碼實現2048小遊戲

首先我們來看看我們效果圖：這是最簡版後期可以去優化，後端自己寫一個視覺化頁面，或者配上一個前端，可以使我們的程式變得更絢麗。

C語言初級程式設計實踐：2048小遊戲

大部分同學學習C語言程式設計以後不知道能通過什麼樣的專案才可以鍛鍊自己的思維功力，2048相信大家都應該熟悉，不管是手機上還是網頁版的相信大家都玩過,這個簡單的控制檯版本的遊戲是我曾經在偉易達上班時一個嵌入

html5小遊戲原始碼_原始碼首發，Love Balls遊戲線上/原始碼下載

技術標籤：html5小遊戲原始碼簡介遊戲中，籃球與粉球是一對非常相愛的小情侶，不過他們現在走失了，我們需要通過畫線的方式幫助他們重新相遇，現在就讓我們一起來試試吧！

魔塔之拯救白娘子~我的第一個VB6+DX8做的小遊戲原始碼~6地圖編輯器-初始化

技術標籤：我的程式vb62d遊戲3d渲染dx遊戲引擎魔塔之拯救白娘子完整工程下載地址：從今天開始我將寫一下《魔塔之拯救白娘子》的遊戲地圖編輯器，俗話說，事半功倍。把地圖編輯器搞好，基本一個遊戲就寫好了三

魔塔之拯救白娘子~我的第一個VB6+DX8做的小遊戲原始碼~17開始遊戲-移動方向處理

技術標籤：我的程式vb6魔塔2d遊戲3d渲染DX8 魔塔之拯救白娘子完整工程下載地址：《魔塔之拯救白娘子》流程控制分析3：男主角移動及方向處理：

魔塔之拯救白娘子~我的第一個VB6+DX8做的小遊戲原始碼~14開始遊戲-流程處理

技術標籤：我的程式vb6魔塔2d遊戲DX83d渲染魔塔之拯救白娘子完整工程下載地址：二、遊戲開始後的流程控制：當初始化完成後，timerDraw.Enabled = True 開始進行流程控制。下邊的程式碼就是控制內容。初始化→

幸運拼團系統會員系統小程式原始碼分享

幸運拼團模式會員系統邏輯簡介幸運拼團系統會員系統開發技術微信交流：155-2817-5269，歡迎探討，以下內容是分享的幸運拼團系統的模式邏輯流程和部分核心程式碼，為了讓大家便於理解，系統核心程式碼已為分享給大家

2021-01-23、24學習記錄 || 2048小遊戲的實現程式碼

技術標籤：2021寒假記錄java 由於離散老師放假了還不放過我們，本來昨天就應該完成的事拖到了今天現在，經過今天數個小時的學習和實踐，2048小遊戲成功製作完成，明天就可以把這個給妹妹玩。太累了，今天先把程

語言隨機數不變_用c語言做最簡易的2048小遊戲

技術標籤：語言隨機數不變 1.最基本的要求掌握if-else語句，迴圈，二維陣列，函式。

魔塔之拯救白娘子~我的第一個VB6+DX8做的小遊戲原始碼~22開始遊戲-穿越樓層

技術標籤：我的程式vb62d遊戲3d渲染dx8魔塔魔塔之拯救白娘子完整工程下載地址：魔塔之拯救白娘子》流程分析6：穿越樓層我稱之為跳樓，下邊是子視窗設計介面：下邊為原始碼：

魔塔之拯救白娘子~我的第一個VB6+DX8做的小遊戲原始碼~21開始遊戲-商店NPC

技術標籤：我的程式vb62d遊戲3d渲染魔塔dx8 魔塔之拯救白娘子完整工程下載地址：《魔塔之拯救白娘子》流程分析6：-商店NPC 設計介面：子視窗程式碼：

魔塔之拯救白娘子~我的第一個VB6+DX8做的小遊戲原始碼~20開始遊戲-對話處理

技術標籤：我的程式vb62d遊戲3d渲染魔塔DX8 魔塔之拯救白娘子完整工程下載地址：《魔塔之拯救白娘子》流程分析6：對話處理遊戲的對話處理比較簡單，僅僅是根據遊戲流程提供簡單的對話系統，沒有涉及複雜的東西

魔塔之拯救白娘子~我的第一個VB6+DX8做的小遊戲原始碼~19開始遊戲-戰鬥處理

技術標籤：我的程式vb6魔塔2d遊戲3d渲染DX8 魔塔之拯救白娘子完整工程下載地址：《魔塔之拯救白娘子》流程分析5：戰鬥處理這個遊戲的戰鬥系統比較簡單，就是對比雙方的資料，打的過就顯示打鬥過程，打不過就提

JS原生2048小遊戲原始碼分享(全網最新)

相關推薦