响应式2048小游戏(支持手机端)-阿里云开发者社区

响应式2048小游戏(支持手机端)

2021-11-23 204

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 响应式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

响应式2048小游戏(支持手机端)

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

响应式2048小游戏(支持手机端)

热门文章

最新文章

相关课程

相关电子书

相关实验场景