- 💂 网站推荐:【神级源码资源网】【摸鱼小游戏】
- 🤟 风趣幽默的前端学习课程:👉28个案例趣学前端
- 💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】
- 💬 免费且实用的计算机相关知识题库:👉进来逛逛
给大家安利一个免费且实用的前端刷题(面经大全)网站,👉点击跳转到网站。
在线演示地址:https://code.haiyong.site/moyu/2048.html
源码也可在文末免费获取
✨ 前言
🕹️ 本文已收录于🎖️100个HTML小游戏专栏:100个HTML小游戏
🎮 目前已有100+小游戏,源码在持续更新中,前100位订阅免费,先到先得。
🐬 订阅专栏后可阅读100个HTML小游戏文章;还可私聊领取一百个小游戏源码。
✨ 项目基本结构
目录结构如下:
├── css
│ └── style.css
├── js
│ └── script.js
└── index.html
本节教程我会带大家使用 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" 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">Haiyong</a></span>
<span class="center">2048</span>
<span class="opposite">更多游戏:<a href="https://code.haiyong.site/moyu">摸鱼</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();
源码下载
1.CSDN资源下载:https://download.csdn.net/download/qq_44273429/86815522
2.从学长的资源网下载(价格更优惠):https://code.haiyong.site/372/
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。