devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML2048小游戏（最新版）

作者：代码探险家 | 2024-07-18 12:43:05

赞

踩

HTML2048小游戏（最新版）

比上一篇文章的2048更好一点。 控制方法：WASD键（小写）或页面上四个按钮

效果图如下：                 源代码在图片后面   

源代码

 ·HTML·

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>2048 Game</title>
  7.     <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10.     <div id="game-container">
  11.         <div id="game-board"></div>
  12.         <div id="controls">
  13.             <button id="up">W</button>
  14.             <button id="left">A</button>
  15.             <button id="down">S</button>
  16.             <button id="right">D</button>
  17.         </div>
  18.     </div>
  19.     <script src="script.js"></script>
  20. </body>
  21. </html>

 ·CSS·

  1. * {
  2.     box-sizing: border-box;
  3.     margin: 0;
  4.     padding: 0;
  5.     font-family: 'Arial', sans-serif;
  6. }
  7.  
  8. body {
  9.     display: flex;
  10.     justify-content: center;
  11.     align-items: center;
  12.     height: 100vh;
  13.     background-color: #faf8ef;
  14. }
  15.  
  16. #game-container {
  17.     display: flex;
  18.     flex-direction: column;
  19.     align-items: center;
  20. }
  21.  
  22. #game-board {
  23.     display: grid;
  24.     grid-template-columns: repeat(4, 1fr);
  25.     grid-template-rows: repeat(4, 1fr);
  26.     gap: 10px;
  27.     background-color: #bbada0;
  28.     padding: 10px;
  29.     border-radius: 10px;
  30.     margin-bottom: 20px;
  31. }
  32.  
  33. .tile {
  34.     width: 80px;
  35.     height: 80px;
  36.     background-color: #cdc1b4;
  37.     display: flex;
  38.     justify-content: center;
  39.     align-items: center;
  40.     font-size: 24px;
  41.     border-radius: 10px;
  42.     transition: all 0.2s ease-in-out;
  43. }
  44.  
  45. #controls {
  46.     display: flex;
  47.     gap: 10px;
  48. }
  49.  
  50. button {
  51.     width: 60px;
  52.     height: 60px;
  53.     font-size: 20px;
  54.     border-radius: 10px;
  55.     background-color: #8f7a66;
  56.     color: white;
  57.     border: none;
  58.     cursor: pointer;
  59. }
  60.  
  61. button:hover {
  62.     background-color: #9f8b76;
  63. }

  ·JavaScript·

  1. document.addEventListener('DOMContentLoaded', () => {
  2.     const boardSize = 4;
  3.     let board = [];
  4.     let score = 0;
  5.  
  6.     const gameBoard = document.getElementById('game-board');
  7.     const buttons = {
  8.         up: document.getElementById('up'),
  9.         down: document.getElementById('down'),
  10.         left: document.getElementById('left'),
  11.         right: document.getElementById('right')
  12.     };
  13.  
  14.     function initBoard() {
  15.         for (let i = 0; i < boardSize * boardSize; i++) {
  16.             const tile = document.createElement('div');
  17.             tile.classList.add('tile');
  18.             gameBoard.appendChild(tile);
  19.         }
  20.         board = Array.from(document.querySelectorAll('.tile'));
  21.         generateTile();
  22.         generateTile();
  23.         updateBoard();
  24.     }
  25.  
  26.     function generateTile() {
  27.         let emptyTiles = board.filter(tile => !tile.textContent);
  28.         if (emptyTiles.length > 0) {
  29.             let randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
  30.             randomTile.textContent = Math.random() < 0.9 ? '2' : '4';
  31.         }
  32.     }
  33.  
  34.     function updateBoard() {
  35.         board.forEach(tile => {
  36.             const value = tile.textContent;
  37.             tile.style.backgroundColor = getTileColor(value);
  38.         });
  39.     }
  40.  
  41.     function getTileColor(value) {
  42.         switch (value) {
  43.             case '2': return '#eee4da';
  44.             case '4': return '#ede0c8';
  45.             case '8': return '#f2b179';
  46.             case '16': return '#f59563';
  47.             case '32': return '#f67c5f';
  48.             case '64': return '#f65e3b';
  49.             case '128': return '#edcf72';
  50.             case '256': return '#edcc61';
  51.             case '512': return '#edc850';
  52.             case '1024': return '#edc53f';
  53.             case '2048': return '#edc22e';
  54.             default: return '#cdc1b4';
  55.         }
  56.     }
  57.  
  58.     function move(direction) {
  59.         switch (direction) {
  60.             case 'up': moveUp(); break;
  61.             case 'down': moveDown(); break;
  62.             case 'left': moveLeft(); break;
  63.             case 'right': moveRight(); break;
  64.         }
  65.         generateTile();
  66.         updateBoard();
  67.     }
  68.  
  69.     function moveUp() {
  70.         for (let i = 0; i < boardSize; i++) {
  71.             let column = [];
  72.             for (let j = 0; j < boardSize; j++) {
  73.                 column.push(board[i + j * boardSize].textContent);
  74.             }
  75.             let newColumn = slideTiles(column);
  76.             for (let j = 0; j < boardSize; j++) {
  77.                 board[i + j * boardSize].textContent = newColumn[j];
  78.             }
  79.         }
  80.     }
  81.  
  82.     function moveDown() {
  83.         for (let i = 0; i < boardSize; i++) {
  84.             let column = [];
  85.             for (let j = 0; j < boardSize; j++) {
  86.                 column.push(board[i + j * boardSize].textContent);
  87.             }
  88.             let newColumn = slideTiles(column.reverse()).reverse();
  89.             for (let j = 0; j < boardSize; j++) {
  90.                 board[i + j * boardSize].textContent = newColumn[j];
  91.             }
  92.         }
  93.     }
  94.  
  95.     function moveLeft() {
  96.         for (let i = 0; i < boardSize; i++) {
  97.             let row = [];
  98.             for (let j = 0; j < boardSize; j++) {
  99.                 row.push(board[i * boardSize + j].textContent);
  100.             }
  101.             let newRow = slideTiles(row);
  102.             for (let j = 0; j < boardSize; j++) {
  103.                 board[i * boardSize + j].textContent = newRow[j];
  104.             }
  105.         }
  106.     }
  107.  
  108.     function moveRight() {
  109.         for (let i = 0; i < boardSize; i++) {
  110.             let row = [];
  111.             for (let j = 0; j < boardSize; j++) {
  112.                 row.push(board[i * boardSize + j].textContent);
  113.             }
  114.             let newRow = slideTiles(row.reverse()).reverse();
  115.             for (let j = 0; j < boardSize; j++) {
  116.                 board[i * boardSize + j].textContent = newRow[j];
  117.             }
  118.         }
  119.     }
  120.  
  121.     function slideTiles(tiles) {
  122.         let newTiles = tiles.filter(tile => tile);
  123.         for (let i = 0; i < newTiles.length - 1; i++) {
  124.             if (newTiles[i] === newTiles[i + 1]) {
  125.                 newTiles[i] = (parseInt(newTiles[i]) * 2).toString();
  126.                 newTiles[i + 1] = '';
  127.             }
  128.         }
  129.         newTiles = newTiles.filter(tile => tile);
  130.         while (newTiles.length < boardSize) {
  131.             newTiles.push('');
  132.         }
  133.         return newTiles;
  134.     }
  135.  
  136.     buttons.up.addEventListener('click', () => move('up'));
  137.     buttons.down.addEventListener('click', () => move('down'));
  138.     buttons.left.addEventListener('click', () => move('left'));
  139.     buttons.right.addEventListener('click', () => move('right'));
  140.  
  141.     document.addEventListener('keydown', (e) => {
  142.         switch (e.key) {
  143.             case 'w': move('up'); break;
  144.             case 's': move('down'); break;
  145.             case 'a': move('left'); break;
  146.             case 'd': move('right'); break;
  147.         }
  148.     });
  149.  
  150.     initBoard();
  151. });

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/845712
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号