利用JavaScript实现网页版2048小游戏
作者：海拥
这篇文章主要介绍了如何利用HTML+CSS+JS编写一个网页版的2048小游戏,代码简单易懂对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
项目基本结构
目录结构如下：
本节教程我会带大家使用 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 href="https://blog.csdn.net/qq_44273429" 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 href="https://haiyong.site/about" rel="external nofollow" >Haiyong</a></span> <span class="center">2048</span> <span class="opposite">更多游戏:<a href="https://code.haiyong.site/moyu" 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();到此这篇关于利用JavaScript实现网页版2048小游戏的文章就介绍到这了,更多相关JavaScript 2048游戏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！