响应式2048小游戏(支持手机端)
项目演示地址：https://wanghao221.github.io/game/2048-Responsive.html(GitHub可能加载较慢,请耐心等待)
先看一下手机端运行效果，拖黑色地方会移动窗口，但拖白色没事。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wanghao | 2048 Responsive</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://use.fontawesome.com/a3bbfa8680.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="mobilewrap">
<div id="container">
<div class="score">
<p> <span class="title">Score</span><span class="scorefield">0</span></p>
</div>
<div class="newgame">
<div class="button"><span>New Game</span></div>
</div>
<div class="grid">
<div class="row">
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
</div>
<div class="row">
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
</div>
<div class="row">
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
</div>
<div class="row">
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
</div>
<script src="js/script.js"></script>
</div>
<div class="tiles"></div>
<div class="over"><span>Game Over</span></div>
<div class="won"><span class="winner">You win!</span><span class="bestscore">BEST SCORE: </span><span class="numbest">
</span></div>
</div><a href="https://blog.csdn.net/qq_44273429/" target='_blank'><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
</body>
</html>
CSS代码：
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
@import url("https://fonts.googleapis.com/css?family=Montserrat");
html, body {
margin: 0;
background: #111;
min-height: 100%;
font-family: "Montserrat", sans-serif;
}
#mobilewrap {
position: absolute;
width: 100%;
height: 100%;
}
#mobilewrap a {
position: absolute;
bottom: 5vh;
right: 5vh;
}
#mobilewrap a .fa-twitter {
font-size: 5vh;
color: #FF5722;
}
#container {
position: absolute;
width: 50vh;
height: 50vh;
background: #B0BEC5;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 0 0 5px 5px;
}
#container .score {
position: absolute;
display: table;
top: -9vh;
width: 22vh;
height: 10vh;
background: #B0BEC5;
border-radius: 5px 0 0 0;
text-align: center;
padding-top: 0.5vh;
box-sizing: border-box;
}
#container .score p {
display: table-cell;
font-size: 3.5vh;
}
#container .score p .title {
display: block;
color: #455A64;
}
#container .score p .scorefield {
color: white;
letter-spacing: 1px;
font-weight: 600;
}
#container .newgame {
position: absolute;
top: -9vh;
right: 0;
width: 29vh;
height: 10vh;
background: #B0BEC5;
border-radius: 0 5px 0 0;
}
#container .newgame .button {
position: absolute;
display: table;
width: 24vh;
height: 7vh;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #CFD8DC;
border-radius: 4px;
text-align: center;
cursor: pointer;
transition: box-shadow 0.3s;
}
#container .newgame .button:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
transition: box-shadow 0.3s;
}
#container .newgame .button:active {
box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.19), inset 0 6px 6px rgba(0, 0, 0, 0.23);
transition: all 0.3s;
}
#container .newgame .button span {
display: table-cell;
color: #455A64;
font-size: 3vh;
vertical-align: middle;
}
#container .over {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
display: table;
text-align: center;
border-radius: 4px;
visibility: hidden;
opacity: 0;
transition: opacity 0.5s;
}
#container .over span {
display: table-cell;
color: #455A64;
font-size: 5vh;
vertical-align: middle;
}
#container .won {
position: absolute;
top: 0;
left: 50vh;
width: 70vh;
height: 100%;
padding-top: 10vh;
opacity: 0;
border-radius: 4px;
padding-left: 4vh;
visibility: hidden;
transition: padding-top 0.3s, opacity 0.4s;
}
#container .won .winner {
display: block;
color: rgba(255, 255, 255, 0.25);
font-size: 13vh;
}
#container .won .bestscore {
color: rgba(255, 255, 255, 0.25);
font-size: 4vh;
}
#container .won .numbest {
color: #FF5722;
font-size: 4.3vh;
}
#container .grid {
width: 100%;
height: 100%;
padding-top: 1vh;
}
#container .grid .row {
position: relative;
width: 100%;
height: 10vh;
padding-left: 1vh;
}
#container .grid .row .base {
position: relative;
float: left;
width: 10vh;
height: 10vh;
background: #CFD8DC;
border-radius: 5px;
margin: 1vh;
text-align: center;
}
#container .tiles {
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 2vh;
box-sizing: border-box;
}
#container .tiles .tile {
position: absolute;
width: 10vh;
height: 10vh;
border-radius: 5px;
overflow: hidden;
transition: box-shadow 0.3s;
}
#container .tiles .tile:hover {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: box-shadow 0.3s;
}
#container .tiles .tile .tile_content {
display: table;
text-align: center;
width: 100%;
height: 100%;
transform-origin: center center;
-webkit-animation: pop-up 0.3s ease-in forwards;
animation: pop-up 0.3s ease-in forwards;
padding: 1px;
}
#container .tiles .tile .tile_content span {
display: table-cell;
font-size: 3.5vh;
vertical-align: middle;
font-family: "Roboto", sans-serif;
}
.tile-2 {
background: rgba(255, 255, 255, 0.9);
}
.tile-4 {
background: #B3E5FC;
}
.tile-8 {
background: #81D4FA;
}
.tile-16 {
background: #4FC3F7;
color: white;
}
.tile-32 {
background: #29B6F6;
color: white;
}
.tile-64 {
background: #03A9F4;
color: white;
}
.tile-128 {
background: #E6EE9C;
}
.tile-256 {
background: #DCE775;
box-shadow: 0 0 10px 1px #DCE775;
}
.tile-512 {
background: #D4E157;
box-shadow: 0 0 15px 1px #D4E157;
}
.tile-1024 {
background: #FFEB3B;
}
.tile-2048 {
background: #FFC107;
box-shadow: 0 0 10px 1px #FFC107;
}
.tile-4096 {
background: #FF9800;
box-shadow: 0 0 15px 1px #FF9800;
color: white;
}
.tile-8192 {
background: #7B1FA2;
box-shadow: 0 0 10px 1px #7B1FA2;
color: white;
}
@-webkit-keyframes pop-up {
0% {
transform: scale(0.4);
}
50% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
@keyframes pop-up {
0% {
transform: scale(0.4);
}
50% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
还有JS代码过于长我就不放进来了
完整代码已上传
CSDN资源下载：https://download.csdn.net/download/qq_44273429/14969790
或者关注作者公众号啦啦啦好想biu点什么回复2048响应式免费获取
后面我还会持续更新类似免费好玩的H5小游戏、Java小游戏、好玩、实用的项目和软件等等
相关内容
- AJAX基础知识与简单的操作示例
- 2021年谷歌SEO战略权威指南
- GitHub上广受欢迎的下载神器:youtube-dl
- youtube-dl安装和实用方法
- 基于Hexo和GitHub搭建自己的博客
- java五子棋小游戏含免费源码
- 免费且好用的GIF录制软件LICEcap
最后，不要忘了❤或支持一下哦