JavaScript--2048游戏(一)
来源:互联网 发布:做淘宝客服需要交钱吗 编辑:程序博客网 时间:2024/06/05 06:46
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;}
完成效果如下:
阅读全文
4 0
- JavaScript--2048游戏(一)
- JavaScript--2048游戏二()
- javascript 解 一笔画游戏
- 使用JavaScript和Canvas开发游戏(一)
- ExtJS(一)JavaScript基础--网页打字游戏
- 最火HTML5 JavaScript游戏引擎:国外篇(一)
- 2048游戏开发(一)
- javascript版 2048游戏
- 用AngularJS写2048游戏(一)
- Andorid游戏2048开发(一)
- MFC实现2048游戏(一)
- 用HTML5做2048游戏(一)
- 使用JS--->2048游戏项目(一)
- 游戏基础(一)
- 游戏论(一)
- 石子游戏(一)
- 游戏优化(一)
- Javascript游戏开发(一) -- 让你的静态人物动起来
- c++ 时间类型详解(time_t和tm)
- B轮融资获数千万美元,柏睿数据到底牛在哪?
- ANDROID获取WEBVIEW中网页的TITLE(标题)信息
- java集合(2):ArrayList源码分析
- 一周乱弹(1,spring 获取 servletContext 方式 2,Calendar常用操作及与date,string的转换)
- JavaScript--2048游戏(一)
- 2014第五届蓝桥杯国赛决赛c/c++本科B组试题总结及解题答案
- In Danger(二分+打表+找规律(约瑟夫环))
- 441. Arranging Coins
- rpm包管理详解(1)
- 三角网格(Triangle Mesh)
- Faster R-CNN 的Caffe实现
- BZOJ2797: [Poi2012]Squarks
- 软件开发需求分析规范