1. 構建游戲界面

1.1 專案結構

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：

游戲玩法說明區域就完成了，

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

保存重繪網頁：

這樣游戲區域上部分就處于布局中上位置了，

然后就是中間的游戲視窗，是個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;
}

保存重繪網頁：

？？？為什么只顯示了一個呢，按道理應該是十六個都顯示啊，為什么會是這樣的呢，因為所有的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;
}

保存重繪網頁：

重新開始按鈕就做好了， newgame()方法留到后面再撰寫，

終于到了最后一個部分了，那就是歷史記錄區域了，這個功能可以將每次的記錄保存到瀏覽器，只保留前八名，只要不清除網站資料，記錄就不會消失，

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

先完成最基本的樣式，后面有需要再添加，

這樣我們的游戲界面就構建好了！ 

標籤：其他

上一篇：教你玩轉CSS 下拉選單

下一篇：2048小游戲(JavaScript版) (1) 游戲介紹