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

上完这5小节课，轻松作出下图这个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文件，你也可以使用一个在线的（直接复制可用）

在【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.   
2.         

   2048

     
3.          href="javascript:newgame();" id="newgamebutton">New Game  
4.         

   score： id="score">0

     
5.   

 

给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.  id="grid-container">  
2.      class="grid-cell" id="grid-cell-0-0">

  

     class="grid-cell" id="grid-cell-0-1">

  

     class="grid-cell" id="grid-cell-0-2">

  

     class="grid-cell" id="grid-cell-0-3">

  

  

     class="grid-cell" id="grid-cell-1-0">

  

     class="grid-cell" id="grid-cell-1-1">