項目基本結構
目錄結構如下：
本節教程我會帶大家使用 HTML 、CSS和 JS 來制作一個?2048網頁版小游戲
本節示例將會實現如下所示的效果：
HTML源碼
使用<header></header>添加頭部2048標題
<header>
<div class="container">
<h1><span>2</span><span>0</span><span>4</span><span>8</span></h1>
<p class="inspired">by <a rel="external nofollow" target="_blank">海擁?</a></p>
</div>
</header>效果：
添加一個 container 容器
<div class="container"> </div>
添加游戲的主體部分
<div class="directions">
<p id="haiyong" class="haiyong"><strong>如何玩：</strong> 使用鍵盤方向鍵鍵移動數字方塊。相鄰的兩個方塊數字相同，它們可合并成一個！</p>
</div>
<div class="scores">
<div class="score-container best-score">
歷史最佳:
<div class="score">
<div id="bestScore">0</div>
</div>
</div>
<div class="score-container">
分數:
<div class="score">
<div id="score">0</div>
<div class="add" id="add"></div>
</div>
</div>
</div>
<div class="game">
<div id="tile-container" class="tile-container"></div>
<div class="end" id="end">游戲結束<div class="monkey">?</div><button class="btn not-recommended__item js-restart-btn"
id="try-again">再試一次</button></div>
</div>效果：
重新啟動游戲
<div class="not-recommended">
<button class="btn not-recommended__item js-restart-btn" id="restart">重新啟動游戲</button>
<span class="not-recommended__annotation"></span>
</div>底部導航欄
<footer> <span class="author">Created by <a rel="external nofollow" >Haiyong</a></span> <span class="center">2048</span> <span class="opposite">更多游戲:<a rel="external nofollow" >摸魚</a></span> </footer>
效果：
CSS 源碼
header 部分
header {
color: #F8FFE5;
text-align: center;
}
header span {
display: inline-block;
box-sizing: border-box;
width: 4rem;
height: 4rem;
line-height: 4rem;
margin: 0 0.4rem;
background: #FFC43D;
}媒體查詢：
@media screen and (max-width:440px) {
header span {
width: 3rem;
height: 3rem;
line-height: 3rem;
}
}
@media screen and (max-width:375px) {
header span {
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
}
}container 容器
.container {
margin: 0 auto;
padding-bottom: 3.5rem;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
max-width: 550px;
text-align: center;
}
header .container {
padding: 0;
padding: 2rem 4rem;
max-width: 900px;
}
@media screen and (max-width:440px) {
header .container {
padding: 1rem 2rem;
}
}底部導航欄
footer {
background-color: #158ca5;
bottom: 0;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
color: white;
display: flex;
justify-content: space-around;
left: 0;
padding: 15px;
position: fixed;
right: 0;
}
footer a {
color: white;
}
footer .center {
justify-content: center;
}JS 源碼
js 代碼較多，這里提供部分
function handleKeypress(evt) {
var modifiers = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
var whichKey = event.which;
var prevGame = [].concat(game);
if (!modifiers) {
event.preventDefault();
switch (whichKey) {
case 37:
game = shiftGameLeft(game);
break;
case 38:
game = shiftGameUp(game);
break;
case 39:
game = shiftGameRight(game);
break;
case 40:
game = shiftGameDown(game);
break;
}
game = game.map(function (tile, index) {
if (tile) {
return _extends({}, tile, {
index: index
});
} else {
return null;
}
});
addRandomNumber();
updateDOM(prevGame, game);
if (gameOver()) {
setTimeout(function () {
endDiv.classList.add('active');
}, 800);
return;
}
}
}
function newGameStart() {
document.getElementById('tile-container').innerHTML = '';
endDiv.classList.remove('active');
score = 0;
scoreDiv.innerHTML = score;
initGame();
drawBackground();
var previousGame = [].concat(game);
addRandomNumber();
addRandomNumber();
updateDOM(previousGame, game);
}
newGameStart();原文地址：https://segmentfault.com/a/1190000042826084