html+css+javascript实现⼩游戏2048（详解，附源代码）html+css+javascript实现⼩游戏2048（详解，附源代码）
1.上下左右的移动原理相同，这⾥只详细说明向上移动的⽅法
2.这⾥的上下左右由wasd四个键控制
3…⼩⽅块空的意思就是没数字，空⽩
html部分
先创建好2048的⼀个静态布局
zuiwaibian：⼀个⼤的框框，整体的游戏界⾯。
caidan：⽤于显⽰当前得分的区域。
a1，a2，a3，a4：是第⼀⾏的⼩⽅块。
b1，b2，b3，b4：是第⼆⾏的⼩⽅块。
c1，c2，c3，c4：是第三⾏的⼩⽅块。
d1，d2，d3，d4：是第四⾏的⼩⽅块。
<div id="zuiwaibian">
<div id="caidan">0</div><!--显⽰分数的部分-->
<div id="youxi"><!--游戏区域-->
<!--16个⼩⽅块-->
<div id="a1"class="model"></div>
<div id="a2"class="model"></div>
<div id="a3"class="model"></div>
<div id="a4"class="model"></div>
<div id="b1"class="model"></div>
<div id="b2"class="model"></div>
<div id="b3"class="model"></div>
<div id="b4"class="model"></div>
<div id="c1"class="model"></div>
<div id="c2"class="model"></div>
<div id="c3"class="model"></div>
<div id="c4"class="model"></div>
<div id="d1"class="model"></div>
<div id="d2"class="model"></div>
<div id="d3"class="model"></div>
<div id="d4"class="model"></div>
</div>
</div>
css部分
为html部分相应标签设置对应css样式。
zuiwaibian
html里的float是什么意思#zuiwaibian{/*最外边div设置*/
width:400px;
height:600px;
background-color:#fce6ce;
}
caidan
#caidan{/*上边显⽰分数区域*/ width:100%;
height:150px;
margin-top:6px; background-color:#a68c71; /* 设置字体样式 */
font-size:50px;
text-align:center;
line-height:150px;
color:#fff;
}
youxi
#youxi{/*下边游戏界⾯设置*/ width:400px;
height:400px; background:#c0af9d; margin-top:10px;
}
⼩⽅块样式
.model{
float:left;
margin-left:8px;
margin-top:8px;
width:90px;
height:90px; background-color:#cdc1b3; border-radius:5px;
}
设置成功后如下
全局变量
记录得分的变量score
//记录得分
var score=0;
存储16个id的⼆维数组（便于遍历）
//记录上
var a=[['a1','a2','a3','a4'],['b1','b2','b3','b4'],['c1','c2','c3','c4'],['d1','d2','d3','d4']];
⽤于记录在⼀次移动过程中每个⼩⽅块相加的次数
var xx=[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
作⽤说明：假设有如下
防⽌按下w（上）直接⽣成8
后⾯会做介绍
⼩⽅块处理函数
1.qingkong(kuai_object)
该函数⽤于清空⼩⽅块中的数字，以及颜⾊。
参数
kuai_object：⼩⽅块对象
/*清空⼩⽅块的内容*/
function qingkong(kuai_object){
kuai_object.style.backgroundColor="#cdc1b3";//空⽩时的颜⾊  kuai_object.innerHTML="";//清空数字
}
该函数⽤于给⼩⽅块上⾊，以及添加数字
参数
kuai_object：⼩⽅块对象
num：所要填的数字
（这⾥数字最⼤⾄4096）
function create_num_color(kuai_object,num){
//var kaui_object;/*存放盒⼦对象*/
switch(num){
case2://ok
//kaui_ElementById(kuai);
kuai_object.style.backgroundColor="#efe5db";
kuai_object.innerHTML="2";
kuai_lor="#7a6d65";
kuai_object.style.fontSize="65px";
/
/kaui_object.style.fontFamily='STHupo';//字体
kuai_Align="center";
kuai_object.style.lineHeight="98px";
break;
case4:
//kaui_ElementById(kuai);
kuai_object.style.backgroundColor="#eddcbe";
kuai_object.innerHTML="4";
kuai_Align="center";
kuai_object.style.lineHeight="98px";
break;
case8://ok
//kaui_ElementById(kuai);  kuai_object.style.backgroundColor="#f3b079";  kuai_object.innerHTML="8";
kuai_lor="#ffffff";
kuai_object.style.fontSize="65px";
kuai_Align="center";
kuai_object.style.lineHeight="98px";
break;
case16://ok
//kaui_ElementById(kuai);  kuai_object.style.backgroundColor="#f7925c";  kuai_object.innerHTML="16";
kuai_lor="#ffffff";
kuai_object.style.fontSize="60px";
kuai_Align="center";
kuai_object.style.lineHeight="98px";
break;
case32://ok
//kaui_ElementById(kuai);  kuai_object.style.backgroundColor="#f57656";  kuai_object.innerHTML="32";
kuai_lor="#ffffff";
kuai_object.style.fontSize="60px";
kuai_Align="center";
kuai_object.style.lineHeight="98px";
break;
case64://ok
//kaui_ElementById(kuai);  kuai_object.style.backgroundColor="#f4522c";  kuai_object.innerHTML="64";
kuai_lor="#ffffff";
kuai_object.style.fontSize="60px";
kuai_Align="center";
kuai_object.style.lineHeight="98px";
break;
case128://ok
//kaui_ElementById(kuai);  kuai_object.style.backgroundColor="#edce71";  kuai_object.innerHTML="128";
kuai_lor="#7a6d65";
kuai_object.style.fontSize="45px";
kuai_Align="center";
kuai_object.style.lineHeight="98px";
break;
case256://ok
//kaui_ElementById(kuai);  kuai_object.style.backgroundColor="#e6d151";  kuai_object.innerHTML="256";
kuai_lor="#ffffff";
kuai_object.style.fontSize="45px";
kuai_Align="center";
kuai_object.style.lineHeight="98px";
break;
case512://ok
//kaui_ElementById(kuai);  kuai_object.style.backgroundColor="#1200ff";  kuai_object.innerHTML="512";
kuai_lor="#7a6d65";
kuai_object.style.fontSize="45px";

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。