項目基本結構
目錄結構如下:
本節教程我會帶大家使用 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