欢迎光临
我的个人博客网站

2048小游戏(JavaScript版) (2) 构建游戏界面


1. 构建游戏界面

1.1 项目结构

2048小游戏(JavaScript版) (2) 构建游戏界面

index.html:游戏界面文件

index.css:游戏样式文件

main.js:游戏主逻辑文件

support.js:游戏基本逻辑文件

showanimation.js:游戏动画逻辑文件

大家先把文件按照这个结构创建好,名字自己命名也可以,但是index.html里面也要跟着修改。

1.2 构建页面

首先在index.html引入样式文件和逻辑文件:

<link rel="stylesheet" type="text/css" href="css/index.css"> <script type="text/javascript" src="js/support.js"></script> <script type="text/javascript" src="js/showanimation.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/rem.js"></script>

游戏界面使用左中右布局,左边是游戏玩法说明区域,中间是游戏区域,游戏区域又使用上中下布局,上面是游戏标题和分数,中间是游戏窗口,下面是重新开始按钮,右边则是历史记录区域。

这里样式我们采用rem布局,来确保在如何pc端浏览器都能正常显示。

所以我们rem.js文件需要添加内容:

(function (doc, win) {     var docEl = doc.documentElement;     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',         recalc = function () {             var clientWidth = docEl.clientWidth;             if (!clientWidth) return;             docEl.style.fontSize = (clientWidth / 77) + 'px';         };      if (!doc.addEventListener) return;     win.addEventListener(resizeEvt, recalc, false);     doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

1.2.1 游戏玩法说明区域

让我们开始最简单的部分,直接上代码。

index.html:

<div class="readme">     <span>玩法说明:</span>     <p>         键盘上下左右控制移动,相同格子会累积加起来重叠为新的格子,         当所有格子均占有并且不能移动游戏结束。点击重新开始游戏将会重置。     </p> </div>

index.css:

@CHARSET "UTF-8"; *{     padding: 0;     margin: 0; }   .readme{     position:absolute;     left: 5%;     top:9rem /* 100/25 */;     width: 12rem /* 300/25 */;  } .readme span{   font-size: 1.28rem /* 32/25 */;   text-align:center;   color: red;   font-weight: 800;   display: block;   margin-bottom: .8rem /* 20/25 */; } .readme p{   display: block;   font-size: 1.2rem /* 30/25 */;   text-indent: .8rem /* 20/25 */;   color: #000000; }

运行index.html:

2048小游戏(JavaScript版) (2) 构建游戏界面

游戏玩法说明区域就完成了。

1.2.2 游戏区域

然后我们开始做游戏区域部分,先做上面的游戏标题和分数。

index.html:

<header>     <h1>2048</h1>     <div class="text">分数:<span id="score">0</span></div> </header>

index.css:

header{   display:block;   margin:0 auto;   width:  25rem /* 400/16 */;   text-align:center; }   header h1{   font-family:Arial, Helvetica, sans-serif;   font-size:3.2rem /* 80/25 */;   font-weight:bold;   margin-top: .4rem /* 10/25 */;   margin-bottom: .4rem /* 10/25 */; }  header .text{   font-family:Arial, Helvetica, sans-serif;   font-size: .8rem /* 20/25 */; } header .text #score {   color: red; }

保存刷新网页:

2048小游戏(JavaScript版) (2) 构建游戏界面

这样游戏区域上部分就处于布局中上位置了。

然后就是中间的游戏窗口,是个4×4的格子,所以我们用div包裹div来实现就行了。

index.html:

<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>

index.css:

#grid-container{   width:18.4rem /* 460/25 */;   height:18.4rem /* 460/25 */;   padding:.8rem /* 20/25 */;   margin:1.6rem /* 40/25 */ auto;   background:#bbada0;   border-radius:.4rem /* 10/25 */;   position:relative; }   .grid-cell{   width:4rem /* 100/25 */;   height:4rem /* 100/25 */;   border-radius:.24rem /* 6/25 */;   background:#ccc0b3;   position:absolute; }

保存刷新网页:

2048小游戏(JavaScript版) (2) 构建游戏界面

???为什么只显示了一个呢,按道理应该是十六个都显示啊。为什么会是这样的呢,因为所有的div格子全部叠在一起了,下一章我会用js将棋盘初始化,那时候才能看到十六个格子。

接下来就是下面的重新开始按钮了,我这边不打算使用button来写,而用a标签来直接实现,利用a标签的href来完成js方法的调用。

index.html:

<a href="javascript:newgame();" id="newgamebutton">重新开始</a>

index.css:

#newgamebutton{   margin: 0 auto;   display: block;   width:6rem /* 150/25 */;   padding:.8rem /* 20/25 */;   text-align: center;   font-size: .8rem /* 20/25 */;   background:#8f7a66;   font-family:Arial, Helvetica, sans-serif;   color:white;   border-radius:.6rem /* 15/25 */;   text-decoration:none;   cursor: pointer; } #newgamebutton:hover{   background:#9f8b77; }

保存刷新网页:

2048小游戏(JavaScript版) (2) 构建游戏界面

重新开始按钮就做好了, newgame()方法留到后面再编写。

终于到了最后一个部分了,那就是历史记录区域了,这个功能可以将每次的记录保存到浏览器,只保留前八名,只要不清除网站数据,记录就不会消失。

2048小游戏(JavaScript版) (2) 构建游戏界面

index.html:

<div class="history">     <div class="title">历史记录(前八)</div>     <div class="score-list"></div> </div>

index.css:

.history{   width: 21rem;   height: 20rem;   position: absolute;   top: 9rem;   right: 3rem; }  .history .title{   font-size: 1.28rem;   text-align: center;   font-weight: 800;   margin-bottom: .8rem /* 20/25 */;   color: red; }

先完成最基本的样式,后面有需要再添加。

2048小游戏(JavaScript版) (2) 构建游戏界面

这样我们的游戏界面就构建好了! 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 2048小游戏(JavaScript版) (2) 构建游戏界面
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏