Project presentation address: wanghao221. Making. IO/game / 2048 – R… (GitHub may be slow to load, please be patient)

First take a look at the operation effect of the mobile terminal, dragging the black area will move the window, but dragging white is ok.

HTML code:

<! 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><spanclass="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>
Copy the code

The CSS code:

@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); }}Copy the code

And the JS code is too long and I’m not going to put it in and the whole code has been uploaded

Resources download:

Focus on the author’s public number [la la la want biu point what] reply [2048 response type] free access \

I will continue to update similar free fun H5 games, Java games, fun, practical projects and software, and so on

The related content

  • Simple snow effects with HTML
  • Brave rabbit crazy running games
  • GitHub’s favorite download artifact :youtube-dl
  • YouTube – DL installation and practical methods
  • Build your own blog based on Hexo and GitHub
  • Java backgammon game contains free source code
  • Free and easy to use GIF recording software LICEcap

And finally, don’t forget ❤ or 📑