HTML小游戏2—— 2048网页版（附完整源码）

• 网站推荐:【神级源码资源网】【摸鱼小游戏】
• 风趣幽默的前端学习课程：28个案例趣学前端
• 想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】
• 免费且实用的计算机相关知识题库：进来逛逛

给大家安利一个免费且实用的前端刷题（面经大全）网站，点击跳转到网站。

在线演示地址：https://code.haiyong.site/moyu/2048.html
源码也可在文末免费获取

视频演示：

HTML小游戏2—— 2048网页版

✨ 项目基本结构

目录结构如下：

├── css
│   └── style.css
├── js
│   └── script.js
└── index.html

本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个 2048网页版小游戏

本节示例将会实现如下所示的效果：

HTML源码

使用

添加头部2048标题

<header>
	<div class="container">
		<h1><span>2span><span>0span><span>4span><span>8span>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">0div>
			div>
		div>
		<div class="score-container">
			分数:
			<div class="score">
				<div id="score">0div>
				<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">Haiyonga>span>		
  <span class="center">2048span>		
  <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/