单对象编程实现2048小游戏！

朴灿烈づ我的快乐病毒、 2022-10-14 15:45 205阅读 0赞

# 2048小Demo #

### 1、题目 ###

> 在百度搜索引擎搜索**2048**，我们可以在线玩**2048 Game - Play 2048 GameOnline**，同学都说很好玩，我就花了点时间简单的写了下，样式很简易！

### 2、思路 ###

> （1）、首先我们要对这个游戏有一个简单的了解，2048是按下上下左右将相同且相邻数字相同的数字相加，然后在随机位置随机生成一个新的数字，将每一列或者每一行的数字移动到最边缘，碰到相邻的相同数字就相加，没有碰到相同的数字就移动，每次移动后在页面中重新生成一个新的数字，当页面的数字都充满格子游戏就结束了；  
> （2）、其次在分析完逻辑后，我们写这个游戏需要分为四个阶段：**游戏状态**，**创建二维数组生成所需要的数字**，**渲染页面**，**设置页面的移动逻辑更新视图**；  
> （3）、分模块儿写每个过程的逻辑，**游戏状态**需要在写每个功能时设置游戏状态保证功能的不紊乱；  
> **游戏开始**：需要生成2个数字，随机位置的随机数字2或者4,生成2的概率要比4的概率大；  
> **游戏进行**：先移动，有相邻相同数字就相加，没有则移动，有空位置就要随机生成一个数字；  
> **游戏结束**：判断上下左右数字可以相加吗？能相加就能空出位置继续游戏，不能相加且没有空位置游戏就结束了；  
> （4）、**创建数组**：存放游戏数据，生成随机行和随机列确定随机数的位置，判断页面上是否还有空位置，若有则生成数字，若没有则不生成数字游戏也就结束了；
> 
> （5）、**渲染页面**:将所生成的数字渲染至页面中，更新视图，更新数据，更新样；  
> （6）、**移动逻辑**：  
> **左移**：抽出单独一行遍历数据，判断每个位置的是否有数字，若有数字相同相邻则相加，不同则继续交换位置；若没有则与其他有数字的位置交换位置，达到移动的目的，最左边不需要移动；  
> **右移**：抽出单独一行遍历数据，判断每个位置的是否有数字，若有数字相同相邻则相加，不同则继续交换位置；若没有则与其他有数字的位置交换位置，达到移动的目的，最右边不需要移动；  
> **上移**：抽出单独一列遍历数据，判断每个位置的是否有数字，若有数字相同相邻则相加，不同则继续交换位置；若没有则与其他有数字的位置交换位置，达到移动的目的，最上边不需要移动；  
> **下移**：抽出单独一列遍历数据，判断每个位置的是否有数字，若有数字相同相邻则相加，不同则继续交换位置；若没有则与其他有数字的位置交换位置，达到移动的目的，最下边不需要移动；

### 3、效果展示图 ###

![在这里插入图片描述][20210522151316636.gif_pic_center]

### 4、写法 ###

1.游戏开始（准备状态）  
![在这里插入图片描述][20210522152152843.png_pic_center]

> （1）、设置得分属性；  
> （2）、设置游戏状态；  
> （3）、设置游戏结束；  
> （4）、设置游戏运行；  
> （5）、设置数组存放游戏数据；

2.存储数据（数组）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]

> （1）、定义一个二维数组，初始化数据为空的值；  
> （2）、封装一个函数，随机生成行和列；  
> （3）、判断该位置是否有数据，若没有则添加一个随机数

3.游戏结束（状态）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 1]

> （1）、封装一个函数，用来判断游戏结束的状态；  
> （2）、判断页面是否有空数据，若有则游戏还没结束，反之则结束；  
> （3）、判断上下相邻数据是否可以相加，若可以则游戏还没结束，反之则结束；  
> （4）、判断左右数据是否可以相加，若可以则游戏没有结束，反之则结束；  
> （5）、若三者条件都满足则游戏结束，游戏状态变为结束状态；

4、移动逻辑（以左移为例）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 2]

> （1）、单独拎出一行进行判断，若该行有需要移动的数据则将其移动到最左端位置，若没有数据则不移动直接跳出循环；  
> （2）、将有该行中有数据的与没有数据的依次交换位置直到最左端为止；  
> （3）、相邻数据若相同则相加，同时分数增加，若相邻位置数字不相同则继续交换直到最左端位置；  
> （4）、判断游戏状态，若都不能移动了或者没有空位置则表明游戏结束啦；  
> （5）、渲染数据在页面上，更新视图和数据；

### 5、参考代码 ###

**Css部分**：

*{ 
        margin: 0px;
        padding: 0px;
    }
    body{ 
        background-color: #FAF8EF;
    }
    .top{ 
        width: 100%;
        height: 100px;
        /* border: 1px solid red; */
        position: relative;
    }
    .top .top_center{ 
        width: 500px;
        height: 100%;
        /* border: 1px solid black; */
        position: absolute;
        left: 30%;
    }
    .top_center .shu{ 
        width: 180px;
        height: 50px;
        /* border:1px solid blue; */
        color: #776E65;
        font-size: 65px;
        text-align: center;
        line-height: 50px;
        float: left;
        margin-top: 23px;
    }
    .top_center .word1{ 
        width: 65px;
        height: 60px;
        background-color: #BBADA0;
        float: right;
        margin-top: 20px;
    }
    .word1 .word_one{ 
        width: 100%;
        height: 50%;
        /* background-color: blue; */
        text-align: center;
        line-height: 30px;
        color: white;
    }
    .word1 .word_two{ 
        /* background-color: yellow; */
        text-align: center;
        line-height: 30px;
        color: white;
        font-size: 20px;
    }
    .top_center .word2{ 
        width: 65px;
        height: 60px;
        background-color: #BBADA0;
        float: right;
        margin-top: 20px;
        margin-right: 10px;
    }
    .word2 .word_three{ 
        width: 100%;
        height: 50%;
        /* background-color: blue; */
        text-align: center;
        line-height: 30px;
        color: white;
    }
    .word2 .word_four{ 
        /* background-color: yellow; */
        text-align: center;
        line-height: 30px;
        color: white;
        font-size: 20px;
    }
    .mid{ 
        width: 100%;
        height: 100px;
        /* border: 1px solid blueviolet; */
        position: relative;
    }
    .mid .mid_center{ 
        width: 500px;
        height: 100%;
        /* border: 1px solid black; */
        position: absolute;
        left: 30%;
    }
    .mid_center .mid_center_left{ 
        width: 70%;
        height: 100%;
        /* background-color: brown; */
        float: left;
    }
    .mid_center_left .word_cu{ 
        width: 100%;
        height: 25px;
        /* border: 1px solid black; */
        color: #8F7A66;;
        font-size: 18px;
    }
    .mid_center_left .word_xi{ 
        width: 100%;
        height: 25px;
        /* border: 1px solid yellow; */
        margin-top:10px;
    }
    .mid_center .mid_center_right{ 
        width:30%;
        height: 100%;
        /* background-color: yellow; */
        float: right;
    }
    .mid_center_right .word_five{ 
        width: 100%;
        height: 60px;
        /* border: 1px solid black; */
        background-color: #8F7A66;
        text-align: center;
        line-height: 60px;
        font-size: 20px;
        color: white;
    }
    .bot{ 
        width: 100%;
        height: 500px;
        /* border: 1px solid red; */
    }
    .bot .bot_ul{ 
        width: 496px;
        height: 500px;
        background-color: #BBADA0;
        position: absolute;
        left: 30%;
    }
    .bot_ul li{ 
        list-style: none;
        width: 100px;
        height: 100px;
        background-color: #CDC1B4;
        float: left;
        text-align: center;
        line-height: 100px;
        font-size: 60px;
        margin-top: 20px;
        margin-left: 20px;
    }
    .n2{ background-color:#eee3da;color:#776e65}
    .n4{ background-color:#ede0c8;color:#776e65}
    .n8{ background-color:#f2b179}
    .n16{ background-color:#f59563}
    .n32{ background-color:#f67c5f}
    .n64{ background-color:#f65e3b}
    .n128{ background-color:#edcf72}
    .n256{ background-color:#edcc61}
    .n512{ background-color:#9c0}
    .n1024{ background-color:#33b5e5;font-size:40px}
    .n2048{ background-color:#09c;font-size:40px}
    .n4096{ background-color:#a6c;font-size:40px}
    .n8192{ background-color:#93c;font-size:40px}
    
    .gameover{ 
        display: none;
        position: absolute;
        top:0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        background-color: rgba(55, 55, 55, 0.5);
    }
    .gameover>p{ 
        width: 300px;
        height: 200px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -150px;
        text-align: center;
        line-height: 65px;
        border-radius: 10px;
        border: 1px solid;
    }
    .gameover>p>a{ 
        padding: 10px;
        color: #fff;
        background-color: #9f8d77;
        border-radius: 6px;
        text-decoration: none;
    }

**Html部分**：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        <link rel="stylesheet" href="../css/index.css">
        
        <script src="../js/index.js"></script>
    </head>
    <body>
        
        <div class="top">
            <div class="top_left"></div>
            <div class="top_center">
            <div class="shu">2048</div>
            <div class="word1">
                <div class="word_one">SCORE</div>
                <div class="word_two" id="score01">0</div>
                
            </div>
            <div class="word2">
                <div class="word_three">SCORE</div>
                <div class="word_four">0</div>
            </div>
            </div>
            <div class="top_right"></div>
        </div>
        
        <div class="mid">
            <div class="mid_center">
                <div class="mid_center_left">
                    <div class="word_cu">
                        Play 2048 Game Online
                    </div>
                    <div class="word_xi">
                        Join the numbers and get to the 2048 tile!
                    </div>
                </div>
                <div class="mid_center_right">
                    <div class="word_five">
                        New Game
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bot">
           <ul class="bot_ul">
               <li class="cell" id="c00"></li>
               <li class="cell" id="c01"></li>
               <li class="cell" id="c02"></li>
               <li class="cell" id="c03"></li>
    
               <li class="cell" id="c10"></li>
               <li class="cell" id="c11"></li>
               <li class="cell" id="c12"></li>
               <li class="cell" id="c13"></li>
    
               <li class="cell" id="c20"></li>
               <li class="cell" id="c21"></li>
               <li class="cell" id="c22"></li>
               <li class="cell" id="c23"></li>
    
               <li class="cell" id="c30"></li>
               <li class="cell" id="c31"></li>
               <li class="cell" id="c32"></li>
               <li class="cell" id="c33"></li>
           </ul>
        </div>
        <div class="gameover" id="gameover">
            <p>
                GAME OVER!<br/>
                SCORE:<span id="score02">0</span><br/>
                <a href="">TRY AGAIN</a>
            </p>
        </div>
    </body>
    </html>

**Js部分**：

### 6、总结 ###

2048实战小demo，可以将面向对象编程的过程又更近了一步，展示了我们的综合能力，既对页面dom元素的进行了操作，又实现了一些简单的逻辑，同时还综合了键盘事件，所以我们要多写写类似于这样的小demo来提升自己的能力。

[20210522151316636.gif_pic_center]: /images/20221014/44df7572e837415584239b0f03605f09.png
[20210522152152843.png_pic_center]: /images/20221014/31d08967d4044fb4b43468ba0bc36771.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/33c3d889f0724a93ba10486ec4cb023e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221014/a4a92cba7d8f45e5aedf0837971b10d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221014/632ddf7fe803486f8eedace51a6b2b7a.png