HTML5+css+js制作2048

已于 2024-04-21 19:24:57 修改
阅读量580 收藏 9
点赞数 23
分类专栏： 小游戏 文章标签： html5 css javascript js
于 2024-04-02 18:52:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/makalake/article/details/137281281
版权

    在2048游戏中，玩家需要在一个4x4的格子中通过↑↓←→滑动来移动方块。每次移动时，所有方块都会向滑动的方向移动，相同的数字方块在相遇时会合并成一个数字是它们总和的新方块。游戏的目标是在格子中拼出一个2048的方块。

    虽然游戏的规则简单，但要达到2048这个目标却非常具有挑战性。玩家需要精心策划每一步，以避免格子被填满且无法再进行合并。同时，游戏也考验玩家的预见能力和策略布局，因为每一步的移动都会影响到后续的发展。

    2048因其简单易学、挑战性高以及能够锻炼大脑思维能力的特点而深受欢迎。此外，游戏的衍生版本也非常多，包括各种不同尺寸的格子、不同的目标数字以及其他变种玩法，使得这个游戏具有很高的可玩性和再玩性。

首先我们需要控制键盘↑↓←→来移动，按w可以再生一个2或4（但是有可能会卡不见，但是可以运行）。
先看html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
<title>2048</title>

<link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/style.css">

</head>

<body>

<header>
	<div class="container">
		<h1><span>2</span><span>0</span><span>4</span><span>8</span></h1>
		<p class="inspired">by the原2048的灵感。</p>
	</div>
</header>

<div class="container">
	<div class="directions">
		<p><strong>如何玩：</strong> 使用你的箭头键移动瓷砖。当两个瓦片相互滑动时，它们合并成一个！</p>
	</div>
	<div class="scores">
		<div class="score-container best-score">
			最佳: 
			<div class="score">
				<div id="bestScore">0</div>
			</div>
		</div>
		<div class="score-container">
			分数: 
			<div class="score">
				<div id="score">0</div>
				<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>

</div>

<script src="js/index.js"></script>

</body>
</html>

把html代码重命名为 inex.html 。

随后再创建一个名叫js的文件夹，新建一个txt文档重命名叫 inex 然后在txt里写这个代码：

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var game = null;
var bestScore = 0;
var scoreDiv = document.getElementById('score');
var bestScoreDiv = document.getElementById('bestScore');
var addDiv = document.getElementById('add');
var endDiv = document.getElementById('end');
var size = 4;
var nextId = 1;
var score = 0;

function initGame() {
  game = Array(size * size).fill(null); // 4 x 4 grid, represented as an array
  initBestScore();
}

function initBestScore() {
  bestScore = localStorage.getItem('bestScore') || 0;
  bestScoreDiv.innerHTML = bestScore;
}

function updateDOM(before, after) {
  var newElements = getNewElementsDOM(before, after);
  var existingElements = getExistingElementsDOM(before, after);
  var mergedTiles = getMergedTiles(after);
  removeElements(mergedTiles);
  drawGame(newElements, true);
  drawGame(existingElements);
}

function removeElements(mergedTiles) {
  for (var _iterator = mergedTiles, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
    var _ref;

    if (_isArray) {
      if (_i >= _iterator.length) break;
      _ref = _iterator[_i++];
    } else {
      _i = _iterator.next();
      if (_i.done) break;
      _ref = _i.value;
    }

    var tile = _ref;

    var _loop = function _loop() {
      if (_isArray2) {
        if (_i2 >= _iterator2.length) return 'break';
        _ref2 = _iterator2[_i2++];
      } else {
        _i2 = _iterator2.next();
        if (_i2.done) return 'break';
        _ref2 = _i2.value;
      }

      var id = _ref2;

      var currentElm = document.getElementById(id);
      positionTile(tile, currentElm);
      currentElm.classList.add('tile--shrink');
      setTimeout(function () {
        currentElm.remove();
      }, 100);
    };

    for (var _iterator2 = tile.mergedIds, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
      var _ref2;

      var _ret = _loop();

      if (_ret === 'break') break;
    }
  }
}

function getMergedTiles(after) {
  return after.filter(function (tile) {
    return tile && tile.mergedIds;
  });
}

function getNewElementsDOM(before, after) {
  var beforeIds = before.filter(function (tile) {
    return tile;
  }).map(function (tile) {
    return tile.id;
  });
  var newElements = after.filter(function (tile) {
    return tile && beforeIds.indexOf(tile.id) === -1;
  });
  return newElements;
}

function getExistingElementsDOM(before, after) {
  var beforeIds = before.filter(function (tile) {
    return tile;
  }).map(function (tile) {
    return tile.id;
  });
  var existingElements = after.filter(function (tile) {
    return tile && beforeIds.indexOf(tile.id) !== -1;
  });
  return existingElements;
}

function drawBackground() {
  var tileContainer = document.getElementById('tile-container');
  tileContainer.innerHTML = '';
  for (var i = 0; i < game.length; i++) {
    var tile = game[i];
    var tileDiv = document.createElement('div');
    var x = i % size;
    var y = Math.floor(i / size);
    tileDiv.style.top = y * 100 + 'px';
    tileDiv.style.left = x * 100 + 'px';

    tileDiv.classList.add("background");
    tileContainer.appendChild(tileDiv);
  }
}

function positionTile(tile, elm) {
  var x = tile.index % size;
  var y = Math.floor(tile.index / size);
  elm.style.top = y * 100 + 'px';
  elm.style.left = x * 100 + 'px';
}

function drawGame(tiles, isNew) {
  var tileContainer = document.getElementById('tile-container');
  for (var i = 0; i < tiles.length; i++) {
    var tile = tiles[i];
    if (tile) {
      if (isNew) {
        (function () {
          var tileDiv = document.createElement('div');
          positionTile(tile, tileDiv);
          tileDiv.classList.add('tile', 'tile--' + tile.value);
          tileDiv.id = tile.id;
          setTimeout(function () {
            tileDiv.classList.add("tile--pop");
          }, tile.mergedIds ? 1 : 150);
          tileDiv.innerHTML = '<p>' + tile.value + '</p>';
          tileContainer.appendChild(tileDiv);
        })();
      } else {
        var currentElement = document.getElementById(tile.id);
        positionTile(tile, currentElement);
      }
    }
  }
}

function gameOver() {
  if (game.filter(function (number) {
    return number === null;
  }).length === 0) {
    var sameNeighbors = game.find(function (tile, i) {
      var isRightSame = game[i + 1] && (i + 1) % 4 !== 0 ? tile.value === game[i + 1].value : false;
      var isDownSame = game[i + 4] ? tile.value === game[i + 4].value : false;
      if (isRightSame || isDownSame) {
        return true;
      }
      return false;
    });
    return !sameNeighbors;
  }
}

function generateNewNumber() {
  // 0.9 probability of 2, 0.1 probability of 4
  var p = Math.random() * 100;
  return p <= 90 ? 2 : 4;
}

function addRandomNumber() {
  // Adds either a 2 or a 4 to an empty position in the game array
  var emptyCells = game.map(function (_, index) {
    return index;
  }).filter(function (index) {
    return game[index] === null;
  });
  if (emptyCells.length === 0) {
    return;
  }
  var newPos = emptyCells[Math.floor(Math.random() * emptyCells.length)];
  var newObj = {
    id: nextId++,
    index: newPos,
    value: generateNewNumber()
  };
  game.splice(newPos, 1, newObj);
}

function getIndexForPoint(x, y) {
  return y * size + x;
}

function reflectGrid(grid) {
  var reflectedGame = Array(size * size).fill(0);
  for (var row = 0; row < size; row++) {
    for (var col = 0; col < size; col++) {
      var index1 = getIndexForPoint(col, row);
      var index2 = getIndexForPoint(size - col - 1, row);
      reflectedGame[index1] = grid[index2];
    }
  }
  return reflectedGame;
}

function rotateLeft90Deg(grid) {
  var rotatedGame = Array(size * size).fill(0);
  for (var row = 0; row < size; row++) {
    for (var col = 0; col < size; col++) {
      var index1 = getIndexForPoint(col, row);
      var index2 = getIndexForPoint(size - 1 - row, col);
      rotatedGame[index1] = grid[index2];
    }
  }
  return rotatedGame;
}

function rotateRight90Deg(grid) {
  var rotatedGame = Array(size * size).fill(0);
  for (var row = 0; row < size; row++) {
    for (var col = 0; col < size; col++) {
      var index1 = getIndexForPoint(col, row);
      var index2 = getIndexForPoint(row, size - 1 - col);
      rotatedGame[index1] = grid[index2];
    }
  }
  return rotatedGame;
}

/*
For any cell whose neighbor to the right is empty, move that cell
to the right. For any cell whose neighbor to the right is equal
to the same value, combine the values together (e.g. 2+2 = 4)
*/
function shiftGameRight(gameGrid) {
  // reflect game grid
  var reflectedGame = reflectGrid(gameGrid);
  // shift left
  reflectedGame = shiftGameLeft(reflectedGame);
  // reflect back
  return reflectGrid(reflectedGame);
}

function shiftGameLeft(gameGrid) {
  var newGameState = [];
  var totalAdd = 0;
  // for rows
  for (var i = 0; i < size; i++) {
    // for columns
    var firstPos = 4 * i;
    var lastPos = size + 4 * i;
    var currentRow = gameGrid.slice(firstPos, lastPos);
    var filteredRow = currentRow.filter(function (row) {
      return row;
    });
    for (var _iterator3 = filteredRow, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
      var _ref3;

      if (_isArray3) {
        if (_i3 >= _iterator3.length) break;
        _ref3 = _iterator3[_i3++];
      } else {
        _i3 = _iterator3.next();
        if (_i3.done) break;
        _ref3 = _i3.value;
      }

      var row = _ref3;

      delete row.mergedIds;
    }

    for (var j = 0; j < filteredRow.length - 1; j++) {
      if (filteredRow[j].value === filteredRow[j + 1].value) {
        var sum = filteredRow[j].value * 2;
        filteredRow[j] = {
          id: nextId++,
          mergedIds: [filteredRow[j].id, filteredRow[j + 1].id],
          value: sum
        };
        filteredRow.splice(j + 1, 1);
        score += sum;
        totalAdd += sum;
      }
    }
    while (filteredRow.length < size) {
      filteredRow.push(null);
    };
    newGameState = [].concat(newGameState, filteredRow);
  }

  if (totalAdd > 0) {
    scoreDiv.innerHTML = score;
    addDiv.innerHTML = '+' + totalAdd;
    addDiv.classList.add('active');
    setTimeout(function () {
      addDiv.classList.remove("active");
    }, 800);
    if (score > bestScore) {
      localStorage.setItem('bestScore', score);
      initBestScore();
    }
  }
  return newGameState;
}

function shiftGameUp(gameGrid) {
  var rotatedGame = rotateLeft90Deg(gameGrid);
  rotatedGame = shiftGameLeft(rotatedGame);
  return rotateRight90Deg(rotatedGame);
}

function shiftGameDown(gameGrid) {
  var rotatedGame = rotateRight90Deg(gameGrid);
  rotatedGame = shiftGameLeft(rotatedGame);
  return rotateLeft90Deg(rotatedGame);
}

var buttons = document.querySelectorAll(".js-restart-btn");
var length = buttons.length;
for (var i = 0; i < length; i++) {
  if (document.addEventListener) {
    buttons[i].addEventListener("click", function () {
      newGameStart();
    });
  } else {
    buttons[i].attachEvent("onclick", function () {
      newGameStart();
    });
  };
};

document.addEventListener("keydown", handleKeypress);
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function handleTouchStart(evt) {
  xDown = evt.touches[0].clientX;
  yDown = evt.touches[0].clientY;
};

function handleTouchMove(evt) {
  var prevGame = [].concat(game);
  if (!xDown || !yDown) {
    return;
  }
  var xUp = evt.touches[0].clientX;
  var yUp = evt.touches[0].clientY;

  var xDiff = xDown - xUp;
  var yDiff = yDown - yUp;

  if (Math.abs(xDiff) > Math.abs(yDiff)) {
    if (xDiff > 0) {
      game = shiftGameLeft(game);
    } else {
      game = shiftGameRight(game);
    }
  } else {
    if (yDiff > 0) {
      game = shiftGameUp(game);
    } else {
      game = shiftGameDown(game);
    }
  }
  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;
  }
  xDown = null;
  yDown = null;
};

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();

写好后再把已知隐藏文件扩展名的√去掉，已经去了的就不用了，你会发现有.txt，重命名把“.”后面的txt改成js回车再点击确定就可以了。

我们先退出来后建一个重命名为 css 的文件夹，点击后创建2个txt文件，第一个命名 reset.min，第二个命名 style 先看第一个 reset.min 代码：

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

然后看 style 的代码：

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Arvo");
* {
  box-sizing: border-box;
}

a {
  color: #1B9AAA;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
a:hover {
  color: #14727e;
}
a:focus, a:active {
  color: #0d4a52;
}

body,
html {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: "Arvo", Helvetica, sans-serif;
  font-family: 12px;
  color: #555;
  background: #F8FFE5;
}

strong {
  font-weight: bold;
}

p {
  line-height: 1.6;
}

.inspired {
  margin-top: 1em;
  font-size: 0.9rem;
  color: #9a9a95;
}

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;
}
header span:nth-of-type(2) {
  background: #EF476F;
}
header span:nth-of-type(3) {
  background: #1B9AAA;
}
header span:nth-of-type(4) {
  background: #06D6A0;
}

h1 {
  font-size: 2.2rem;
}

.directions {
  padding: 2rem;
  border-top: 1px solid #9a9a95;
  border-bottom: 1px solid #9a9a95;
}

.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;
}

.scores {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.score-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1.8rem;
  font-size: 1.2rem;
  line-height: 1;
  color: #555;
}
.score-container.best-score {
  color: #9a9a95;
}

.score {
  margin-left: 1rem;
  position: relative;
  font-weight: bold;
  font-size: 1.5rem;
  vertical-align: middle;
  text-align: right;
}

.game {
  position: relative;
  margin: 0 auto;
  background: #9a9a95;
  padding: 7px;
  display: inline-block;
  border-radius: 3px;
  box-sizing: border-box;
}

.tile-container {
  border-radius: 6px;
  position: relative;
  width: 400px;
  height: 400px;
}

.tile, .background {
  display: block;
  color: #F8FFE5;
  position: absolute;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  text-align: center;
}

.background {
  z-index: 1;
  text-align: center;
  border: 7px solid #9a9a95;
  background-color: #F8FFE5;
}

.tile {
  opacity: 0;
  z-index: 2;
  background: #FFC43D;
  color: #F8FFE5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.8rem;
  align-items: center;
  -webkit-transition: 110ms ease-in-out;
  transition: 110ms ease-in-out;
  border-radius: 3px;
  border: 7px solid #9a9a95;
  box-sizing: border-box;
}
.tile--4 {
  background: #EF476F;
  color: #F8FFE5;
}
.tile--8 {
  background: #1B9AAA;
  color: #F8FFE5;
}
.tile--16 {
  background: #06D6A0;
  color: #F8FFE5;
}
.tile--32 {
  background: #f37694;
  color: #F8FFE5;
}
.tile--64 {
  background: #22c2d6;
  color: #F8FFE5;
}
.tile--128 {
  background: #17f8be;
  color: #F8FFE5;
}
.tile--256 {
  background: #ffd470;
  color: #F8FFE5;
}
.tile--512 {
  background: #eb184a;
  color: #F8FFE5;
}
.tile--1024 {
  background: #14727e;
  color: #F8FFE5;
}
.tile--2048 {
  background: #05a47b;
  color: #F8FFE5;
}
.tile--pop {
  -webkit-animation: pop 0.3s ease-in-out;
          animation: pop 0.3s ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.tile--shrink {
  -webkit-animation: shrink 0.5s ease-in-out;
          animation: shrink 0.5s ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.add {
  position: absolute;
  opacity: 0;
  left: 120%;
  top: 0;
  font-size: 1rem;
  color: #1B9AAA;
}
.add.active {
  -webkit-animation: add 0.8s ease-in-out;
          animation: add 0.8s ease-in-out;
}

@-webkit-keyframes add {
  0% {
    opacity: 1;
    top: 0;
  }
  100% {
    opacity: 0;
    top: -100%;
  }
}

@keyframes add {
  0% {
    opacity: 1;
    top: 0;
  }
  100% {
    opacity: 0;
    top: -100%;
  }
}
@-webkit-keyframes pop {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0;
  }
  90% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes pop {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0;
  }
  90% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes shrink {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0.9;
  }
}
@keyframes shrink {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0.9;
  }
}
.end {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgba(85, 85, 85, 0.9);
  color: white;
  font-size: 2rem;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.end btn {
  margin-top: 1rem;
}
.end.active {
  opacity: 1;
  z-index: 1000;
}

.monkey {
  font-size: 3rem;
  margin: 1rem 0;
}

.btn {
  font-family: inherit;
  font-size: 1rem;
  border: none;
  background: #1B9AAA;
  letter-spacing: 1px;
  color: white;
  font-weight: 300;
  padding: 0.9em 1.5em;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn:hover {
  background-color: #14727e;
}
.btn:active {
  background-color: #0d4a52;
}
.btn:focus {
  box-shadow: 0 0 10px #0d4a52 inset;
  outline: none;
}

.not-recommended {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 3rem;
}
.not-recommended * + * {
  margin-left: 10px;
}
.not-recommended__item + .not-recommended__annotation:before {
  font-size: 30px;
  content: "😐";
}
.not-recommended__item:hover + .not-recommended__annotation:before {
  content: "😟";
}
.not-recommended__item:focus + .not-recommended__annotation:before {
  content: "😄";
}
.not-recommended__item:active + .not-recommended__annotation:before {
  content: "😨";
}

都编辑完后都把.txt改成.css，退出来后就点击html代码看看成品。

Inowes
关注
专栏目录
html5前端小游戏-2048益智游戏
11-12
html益智游戏
《html+css+javascript 网页制作案例教程》源代码
04-02
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
Html+CSS+JavaScript实现2048
weixin_64609561的博客
04-28 263
(全是对大佬代码的注释。自己加了一个重开游戏的热键Q，就一行代码)希望可以帮到各位深陷苦恼的朋友们。，来源B站大佬的代码，b站视频。
如何理解HTML、CSS、javascript
最新发布
qq_65665724的博客
08-03 1213
1、什么是HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。2、CSS(层叠样式表 Cascading Style Sheets),用来定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值})3、JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
html，css和js
weixin_44985964的博客
11-30 5808
访问某个变量。没有被定义创建函数/函数声明/函数定义function 函数名（形参列表）{函数体return 返回值；}
HTML+CSS+JS详解
热门推荐
IDE
02-13 1万+
Web概述 Web三要素：浏览器，服务器，HTTP协议 **HTML工作原理：**HTML是部署在服务器上的文本文件，根据HTTP协议浏览器发出请求给服务器，服务器做出响应给浏览器返回一个HTML，浏览器解释执行HTML，从而显示内容 什么是HTML？ HTML是超文本标记语言（Hyper Text Markup Language）,一种纯文本类型的语言，用来设计网页的标记语言，用该语言编写的文件以.html或者.htm为后缀，由浏览器解释执行，在HTML的页面上可以嵌套脚本语言编写程序段，如JavaScr
前端 html css js
0bug0warning的博客
09-27 938
html css js 对我这几天的学习进行一下总结，首先要控制好布局，理解盒子模型的概念。所谓盒子模型就是把整个页面看成一个盒子，首先最重要的就是页面布局，你要自己考虑好怎么把整个页面进行划分。设计好了就要用div来进行布局。 我先来说说html各种标签的作用 &lt; div &gt;通常来说指一个块，在这个块里可以控制他的样式宽度、高度、背景、字体等(通过css样式表来实现) 设置div有以...
html,css,js基本知识
stead_dy的博客
11-17 274
prependTo() a.prependTo(b)，将a插入到b的开头，成为b的第一个元素。appendTo() a.appendTo(b)，将a插到b的末尾，成为b的最后一个元素。replaceWith() a.replaceWith(b)，用b替换a。insertAfter() a.insertAfter(b)，得到ba。replaceAll() a.replaceAll(b)，用a替换b。
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 杭帮美食五个页面（附完整答案和学生用要求及素材）
03-29
在本项目中，"HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 杭帮美食五个页面" 提供了一个实践性的学习机会，让学生深入理解并应用前端开发技术，特别是针对网页设计与制作。这个项目以“杭帮美食”为主题，...
HTML5+CSS3+JavaScript网页制作从入门到精通054245【实例示例源程序】
06-06
这个压缩包文件“HTML5+CSS3+JavaScript网页制作从入门到精通054245【实例示例源程序】”显然包含了丰富的学习资源，旨在帮助初学者快速掌握这三门技术，并通过实例进行实践。 HTML5（HyperText Markup Language 5...
html+css+js实例
12-18
用html+css+js做的一个简单小网页，可以作为初学者的参考资料。
HTML5+CSS+JS室内设计精品网页模板 大学生期末大作业 Web前端网页制作
04-30
HTML5+CSS+JS精品网页模板，响应式网页，可以根据不同的设备屏幕大小自动调整页面布局； 设置导航条、轮翻效果，鼠标滑动效果，自动弹窗，点击事件、链接等功能； 适用于大学生期末大作业或公司网页制作。 支持如...
html-css-js基本理解
Kattlin_gsc的博客
09-07 471
网页设计思路是把网页分成三个层次，即：结构层(HTML)、表示层(CSS)、行为层(Javascript)。 一、HTML、CSS、JavaScript简介 1、什么是HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。 2、CSS(层叠样式表 Cascading Style Sheets),样式定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值}) 3、JavaScript是一种脚
HTML+CSS+JS 详细知识（新手向）
Scyth1的博客
07-09 7944
HTML 超文本标记语言标记语言：通过标签的不同来代表不同的意思mac地址是物化在电脑网盘硬件上的地址IP里其实包含着mac的一部分超文本：有文字之外的一些类似连接、按钮等的东西JavaScript让html有交互能力绝对路径< img src="地址" alt="描述 ">加不加span都没什么变化 的作用是形成独立空间style 通用属性形成独立空间 让元素换行在一行的末尾添加两个或多个空格，然后按回车键,即可创建一个换行 ( )。超链接 文字描述部分可以跳转到其他html文件target属性用于设置打
html+css+js基础
05-25 560
var obj={} //空对象var obj={属性名：值方法名:function(形参){}方法名:(形参)=>{}1.访问对象的属性|方法 对象名.属性名|对象名.方法名(实参)2.修改对象的属性 对象名.属性名=新值3.新增对象属性 对象名.新增属性名=值4.新增对象方法 对象名.方法名=function(形参){//操作语句。
html5 js css
whyqcwy的专栏
05-31 473
html5,js,css 知识学习
html js css学习顺序,html+css+js学习心得纯干货分享
weixin_32641973的博客
06-04 361
part 1：HTMLhtml本身是一个很简单的语言，学习完众多标签以后，就可以开始简单的网页编写了，配合dreamweaver软件，使用起来更是事半功倍。这众多的标签大体上可分为三种：块状元素、内联元素和内联块状元素。这三种元素有其各自的特性，针对这些特性他们的应用场合也不同，如何熟练的使用这些元素是我们需要在今后的学习和工作中需要勤加练习的。我们要做到当看见一张设计稿的时候，心里就要勾勒出它的...
HTML+CSS+JS基础
qq_34633111的博客
09-30 2600
前端的核心技术为HTML、CSS、JavaScript。这三个是前端最基础也是很容易入门的语言。HTML是网页的骨架，CSS是网页的妆容，JS是网页的灵魂，三者相辅相成才能成功地弄出一个简单的网页。这也是学习后续复杂的前端的基础。 HTML是一个用来描述网页的一种语言，他通过标记标签来描述网页（比如&lt;html&gt;&lt;b&gt;&lt;p&gt;&lt;li&gt;等）每个标签都对应...
HTML5+CSS3+JavaScript前端开发教学计划
"HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)授课计划.docx" 本课程详细规划了教授HTML、CSS和JavaScript进行网页制作的教育过程，旨在培养学生的应用软件前端设计、开发和维护技能。通过“任务管理系统”的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值