html+css+js适合前端小白的实战全解（超详细）——2048小游戏（一）

 

前几天看了慕课里的制作2048小游戏课程->>> 指路：https://www.imooc.com/learn/76

这个游戏适合我这种前端入门的小白作为第一个游戏项目，做完还挺有成就感、

虽然是跟着视频做，但是还是经常出错

做完以后收获挺大，但是还有一些不太理解。现在开始复盘，把每一步都认真归纳总结

希望能通过一步一步理解透彻里面的原理，分享出来也希望能帮到你

 

该游戏需要有HTML、CSS、JS和JQ基础

 边做边思考每一步的来由

 

2048小游戏（一）

开始做这个游戏之前请先弄懂整个游戏架构，弄懂游戏架构之前，一定要先玩几盘

2048在线小游戏指路：https://newdoku.com/zh/2048.php

玩法我就不多说了，自己体会

 

MVC分别表示：

M：Model 数据层，是存储游戏的数据的

V：View 视图层，是用户操作的页面

C：control 控制层，根据用户在视图层输入的指令，调取数据层的信息，进而产生响应操作

程序无论复杂与否，都能分成这三个层次。

 

游戏的UI界面：由HTML/CSS去控制

游戏的逻辑：由JS/JQ来控制

 

弄清之后我们正式开始我们的2048小游戏编程之旅~

 

1.1 创建引入css文件和js文件

做这个游戏，我们需要创建3个js文件，1个css文件，1个html文件

2048.html

2048.css

main2048.js

support2048.js

showanimation2048.js

 

还需要引入一个jQury文件，你也可以使用一个在线的

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="main2048.js"></script>
<script type="text/javascript" src="showanimation2048.js"></script>
<script type="text/javascript" src="support2048.js"></script>
<link rel="stylesheet" type="text/css" href="2048.css">

在【2048.html】一共需要引入5个文件

 

需要控制的经常会改变的数，我们把他们定义在js里，因为 js可以操作一切html和css元素

在【main2048.js】中，我们需要先定义一个数组Array，用来存储游戏盘上的16个格子，定义score来存储分数

1. var board = new Array();  
2. var score = 0;  

 

1.2 UI设计

先大致想好界面设计

这个界面分成两个部分，header和container

header里有标题h1，newgame按钮a，点击会跳到函数newgame(); 这个函数后面再定义

p标签存放成绩，因为数值会变，里面放置span标签控制score的变化

1. <header>  
2.         <h1>2048</h1>  
3.         <a href="javascript:newgame();" id="newgamebutton">New Game</a>  
4.         <p>score：<span id="score">0</span></p>  
5. </header>  

 

给header部分附上样式，先整体，后局部

1. body{  
2.     font-family: Arial;  }  
3.   
4. header{  
5.     display: block;  
6.     margin: 0 auto;  
7.     width: 500px;  
8.     text-align: center;  }  
9.   
10. header h1{  
11.     font-size: 60px;  
12.     font-weight: bold;  }  
13.   
14. header #newgamebutton{  
15.     display: block;  
16.     margin: 20px auto;  
17.     width: 100px;  
18.     padding: 10px;  
19.     background-color: #8f7a66;  
20.     color: #fff;  
21.     border-radius: 10px;  
22.     text-decoration: none;  }  
23.   
24. header #newgamebutton:hover{  
25.     background-color: #9f8b77;  }  
26.   
27. header p{  
28.     font-size: 25px;  
29.     margin: 20px auto;  }  

 

再来布局container部分，取名“grid-container”

棋盘上有16个格子，每个格子样式一样，可以用类别来控制样式，统一取名class="grid-cell"，但每个格子效果不一样，都要取一个id，便于给他们定位

于是采用 grid-cell-i-j 形式命名

 

1. <div id="grid-container">  
2.     <div class="grid-cell" id="grid-cell-0-0"></div>  
3.     <div class="grid-cell" id="grid-cell-0-1"></div>  
4.     <div class="grid-cell" id="grid-cell-0-2"></div>  
5.     <div class="grid-cell" id="grid-cell-0-3"></div>  
6.   
7.     <div class="grid-cell" id="grid-cell-1-0"></div>  
8.     <div class="grid-cell" id="grid-cell-1-1"></div>  
9.     <div class="grid-cell" id="grid-cell-1-2"></div>  
10.     <div class="grid-cell" id="grid-cell-1-3"></div>  
11.   
12.     <div class="grid-cell" id="grid-cell-2-0"></div>  
13.     <div class="grid-cell" id="grid-cell-2-1"></div>  
14.     <div class="grid-cell" id="grid-cell-2-2"></div>  
15.     <div class="grid-cell" id="grid-cell-233"></div>  
16.   
17.     <div class="grid-cell" id="grid-cell-3-0"></div>  
18.     <div class="grid-cell" id="grid-cell-3-1"></div>  
19.     <div class="grid-cell" id="grid-cell-3-2"></div>  
20.     <div class="grid-cell" id="grid-cell-3-3"></div>  
21. </div>  

 

1.3 构建页面元素

 

棋盘宽高都为500px，每个格子100px，留有20px的padding

 

先给棋盘和格子做UI样式
最后16个小格子的位置各不相同，采用定位，故棋盘grid-container需要相对定位relative

1. #grid-container{  
2.     width: 460px;  
3.     height: 460px;  
4.     padding: 20px;  
5.     margin: 50px auto;  
6.     background-color: #bbada0;  
7.     border-radius: 10px;  
8.     position: relative;  }  
9.   
10. .grid-cell{  
11.     width: 100px;  
12.     height: 100px;  
13.     border-radius: 6px;  
14.     background: #ccc0b3;  
15.     position: absolute;  }  

 

2.1 游戏逻辑

具体每个小格子的位置，需要用js来控制

在【main2048.js】中设计当整个程序加载完毕后，运行的主函数

对于整个游戏来说，主函数只做一件事情，就是开始一个新游戏。

开始一个新游戏，需要

1. 初始化棋盘

2. 在随机两个格子里生成2或4

之前a标签开始新游戏定义的函数就是newgame()

newgame()里，我们先定义一个初始化棋盘的内函数init()

 

2.11  init函数

我们用init()来初始化棋盘格

1. function init() {   
2.    for(var i = 0; i < 4; i++)  
3.        for(var j = 0; j < 4; j++)  
4.          {
5.            var gridCell = $("#grid-cell-"+i+"-"+j);     //因为前面我们定义了grid-cell-i-j
6.            gridCell.css('top', getPosTop(i,j));  
7.            gridCell.css('left', getPosLeft(i,j));  
8.          }
9.   }  

 

2.12 定义getPosTop(i,j)和getPosLeft(i,j)函数

这个函数是为了获得每个小格子的top值和left值

使用两个getPosTop和getPosLeft，传入i和j计算出小格子的top和left值。

因为最上面的一个格子，top=20px ( padding=20px )

第二个格子，top：20+20+100 = 20 +120

第三个：20+2*(20+100)  

所以 top = 20 + i*120 ，与j无关

同理，left = 20 + j*120，与i无关

定义getPosTop(i,j)和getPosLeft(I,j)，放在【support2048.js】里​​

 

1. function getPosTop(i,j){  
2.     return 20 + 120*i;  }  
3.  
4. function getPosLeft(i,j){  
5.     return 20 + 120*j;  }  

 

此时，运行一下html，可以出现这个界面

 

像我第一次照着视频边敲边学的时候，对着敲的代码也能敲错

敲错了十分奔溃，不知道自己哪里出错了，金刚眼都难发现

此时附上这一小节的完整的代码，节约一些无助找自己答案哪里出错的时间

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2048</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="main2048.js"></script>
    <script type="text/javascript" src="showanimation2048.js"></script>
    <script type="text/javascript" src="support2048.js"></script>
    <link rel="stylesheet" type="text/css" href="2048.css">
</head>
<body>
    <header>
        <h1>2048</h1>
        <a href="javascript:newgame();" id="newgamebutton">New Game</a>
        <p>score：<span id="score">0</span></p>
    </header>

    <div id="grid-container">
        <div class="grid-cell" id="grid-cell-0-0"></div>
        <div class="grid-cell" id="grid-cell-0-1"></div>
        <div class="grid-cell" id="grid-cell-0-2"></div>
        <div class="grid-cell" id="grid-cell-0-3"></div>

        <div class="grid-cell" id="grid-cell-1-0"></div>
        <div class="grid-cell" id="grid-cell-1-1"></div>
        <div class="grid-cell" id="grid-cell-1-2"></div>
        <div class="grid-cell" id="grid-cell-1-3"></div>

        <div class="grid-cell" id="grid-cell-2-0"></div>
        <div class="grid-cell" id="grid-cell-2-1"></div>
        <div class="grid-cell" id="grid-cell-2-2"></div>
        <div class="grid-cell" id="grid-cell-2-3"></div>

        <div class="grid-cell" id="grid-cell-3-0"></div>
        <div class="grid-cell" id="grid-cell-3-1"></div>
        <div class="grid-cell" id="grid-cell-3-2"></div>
        <div class="grid-cell" id="grid-cell-3-3"></div>
    </div>
</body>
</html>

 

css：

body{
    font-family: Arial;
}

header{
    display: block;
    margin: 0 auto;
    width: 500px;
    text-align: center;
}

header h1{
    font-size: 60px;
    font-weight: bold;
}

header #newgamebutton{
    display: block;
    margin: 20px auto;

    width: 100px;
    padding: 10px 10px;
    background-color: #8f7a66;
    color: #fff;

    border-radius: 10px;
    text-decoration: none;
}

header #newgamebutton:hover{
    background-color: #9f8b77;
}

header p{
    font-size: 25px;
    margin: 20px auto;
}


#grid-container{
    width: 460px;
    height: 460px;
    padding: 20px;

    margin: 50px auto;
    background-color: #bbada0;

    border-radius: 10px;
    position: relative;
    left: 0;
    top:0;
}

.grid-cell{
    width: 100px;
    height: 100px;
    border-radius: 6px;
    background: #ccc0b3;

    position: absolute;
}

 

main2048.js

var board = new Array();
var score = 0;

$(document).ready(function() { 
    newgame();
 });

function newgame() { 

    // 1.初始化棋盘
    init();

    // 2.随机两个格子生成数字

  }

function init() { 
    for(var i = 0; i < 4; i++)
        for(var j = 0; j < 4; j++)
        {
            var gridCell = $("#grid-cell-"+i+"-"+j);
            gridCell.css('top', getPosTop(i,j));
            gridCell.css('left', getPosLeft(i,j));
        }
   }

 

support2048.js

function getPosTop(i,j){
    return 20 + i*120;
}
function getPosLeft(i,j){
    return 20 + j*120;
}

 

这一小节先到这里，本人也是小白一枚，有一些解释不清楚的地方，欢迎大家指正，谢谢~~

本文地址：https://blog.csdn.net/weixin_41306215/article/details/107594489