使用JS--->2048游戏项目（一）

2048游戏项目第一天

实现效果：

第一天完成项目内容和样式的制作
项目界面结构分析：

对应html和css样式如下

<!--HTML内容--><p>Score:<span id="score"></span></p>        <div id="back">        <!--背景-->            <!--第一行-->            <div class="grid"></div>            <div class="grid"></div>            <div class="grid"></div>            <div class="grid"></div>            <!--第二行-->            <div class="grid"></div>            <div class="grid"></div>            <div class="grid"></div>            <div class="grid"></div>            <!--第三行-->            <div class="grid"></div>            <div class="grid"></div>            <div class="grid"></div>            <div class="grid"></div>            <!--第四行-->            <div class="grid"></div>            <div class="grid"></div>            <div class="grid"></div>            <div class="grid"></div>        <!--前景-->            <!--第一行-->            <div id="c00" class="cell n2">2</div>            <div id="c01" class="cell n4">4</div>            <div id="c02" class="cell n8">8</div>            <div id="c03" class="cell n16">16</div>            <!--第二行-->            <div id="c10" class="cell n32">32</div>            <div id="c11" class="cell n64">64</div>            <div id="c12" class="cell n128">128</div>            <div id="c13" class="cell n256">256</div>            <!--第三行-->            <div id="c20" class="cell n512">512</div>            <div id="c21" class="cell n1024">1024</div>            <div id="c22" class="cell n2048">2048</div>            <div id="c23" class="cell n4096">4096</div>            <!--第四行-->            <div id="c30" class="cell n8192">8192</div>            <div id="c31" class="cell"></div>            <div id="c32" class="cell"></div>            <div id="c33" class="cell"></div>        </div>

/*CSS样式*/p{    width: 480px;    margin: 0 auto;    font-family: Arial;    font-weight: bold;    font-size: 40px;    padding-top: 15px;    /*设置分数样式*/}#back{    width:487px;    height:487px;    margin: 0 auto;/*居中*/    border: 1px solid #bbada0;    background-color: #bbada0;    border-radius: 10px;/*设置圆角*/    position: relative;}.grid,.cell{    width: 100px;    height: 100px;    border-radius: 6px;}.grid{    width: 98px;    height: 98px;    float: left;    border: 1px solid #ccc0b3;    background-color: #ccc0b3;    margin: 16px 0 0 16px;}.cell{    text-align: center;    line-height: 100px;    color: #776e65;    font-size: 60px;    position: absolute;}/*设置每一行前景单元格垂直位置*/#c00,#c01,#c02,#c03{top:17px;}#c10,#c11,#c12,#c13{top:133px;}#c20,#c21,#c22,#c23{top:249px;}#c30,#c31,#c32,#c33{top:365px;}/*设置每一列前景单元格水平位置*/#c00,#c10,#c20,#c30{left:17px;}#c01,#c11,#c21,#c31{left:133px;}#c02,#c12,#c22,#c32{left:249px;}#c03,#c13,#c23,#c33{left:365px;}/*设置每个数字的样式*/.n2{background-color: #eee3da;}.n4{background-color: #ede0c8;}.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;}.n2048{background-color: #09c;}.n4096{background-color: #a6c;}.n8192{background-color: #93c;}.n2,.n4,.n8,.n16,.n32,.n64,.n128,.n256,.n512,.n1024,.n2048,.n4096,.n8192{color: #fff;}.n1024,.n2048,.n4096,.n8192{font-size: 40px;}

完成效果如下：

转载：http://blog.csdn.net/qq_25343557/article/details/72704504