HTML小游戏2—— 2048网页版(附完整源码)
海拥 -💂 网站推荐:【神级源码资源网】【摸鱼小游戏】🤟 风趣幽默的前端学习课程:👉28个案例趣学前端💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且实用的计算机相关知识题库:👉进来逛逛
给大家安利一个免费且实用的前端刷题(面经大全)网站,👉点击跳转到网站。
在线演示地址:https://code.haiyong.site/moyu/2048.html
源码也可在文末免费获取
🎮 目前已有100+小游戏,源码在持续更新中,前100位订阅免费,先到先得。
🐬 订阅专栏后可阅读100个HTML小游戏文章;还可私聊领取一百个小游戏源码。
✨ 项目基本结构
目录结构如下:
├── css
│ └── style.css
├── js
│ └── script.js
└── index.html
本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个 2048网页版小游戏
本节示例将会实现如下所示的效果:
HTML源码使用<header></header>
添加头部2048标题
<header>
<div >
<h1><span>2</span><span>0</span><span>4</span><span>8</span></h1>
<p >by <a href="https://blog.csdn.net/qq_44273429" target="_blank">海拥✘</a></p>
</div>
</header>
效果:
添加一个 container 容器
<div >
</div>
添加游戏的主体部分
<div >
<p id="haiyong" ><strong>如何玩:</strong> 使用键盘方向键键移动数字方块。相邻的两个方块数字相同,它们可合并成一个!</p>
</div>
<div >
<div >
历史最佳:
<div >
<div id="bestScore">0</div>
</div>
</div>
<div >
分数:
<div >
<div id="score">0</div>
<div id="add"></div>
</div>
</div>
</div>
<div >
<div id="tile-container" ></div>
<div id="end">游戏结束<div >🙈</div><button
id="try-again">再试一次</button></div>
</div>
效果:
重新启动游戏
<div >
<button id="restart">重新启动游戏</button>
<span ></span>
</div>
底部导航栏
<footer>
<span >Created by <a href="https://haiyong.site/about">Haiyong</a></span>
<span >2048</span>
<span >更多游戏:<a href="https://code.haiyong.site/moyu">摸鱼</a></span>
</footer>
效果:
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/
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。