利用JavaScript編寫一個簡單的1024小游戲

更新時間：2023年10月24日 11:03:59 作者：前端俊剛

在每年的10月24日,我們都會慶祝程序員節(jié),這是一個向所有辛勤工作、創(chuàng)造出無數(shù)令人驚嘆應(yīng)用和系統(tǒng)的程序員們致敬的日子,為了紀(jì)念這個特殊的日子,我們將通過編寫一個簡單的1024小游戲來向所有程序員們表示敬意,本文將詳細(xì)解釋如何使用JavaScript編寫這個小游戲

1. HTML 結(jié)構(gòu)

在HTML部分，我們首先需要創(chuàng)建一個容器來放置游戲方塊。代碼如下：

<div class="game-container"></div>

2. CSS 樣式

接下來，我們需要為游戲面板和方塊設(shè)置樣式。代碼如下：

.game-container {
    display: flex;
    flex-wrap: wrap;
    width: 408px;
    height: 408px;
    border: 1px solid black;
}
.game-tile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
.tile-2 {
    background-color: #eee4da;
}

.tile-4 {
    background-color: #ede0c8;
}

.tile-8 {
    background-color: #f2b179;
}

.tile-16 {
    background-color: #f59563;
}

.tile-32 {
    background-color: #f67c5f;
}

.tile-64 {
    background-color: #f65e3b;
}

.tile-128 {
    background-color: #edcf72;
}

.tile-256 {
    background-color: #edcc61;
}

.tile-512 {
    background-color: #edc850;
}

.tile-1024 {
    background-color: #edc53f;
}

3. JavaScript部分

初始化游戲面板和方塊

代碼如下：

// 創(chuàng)建游戲面板
const gameContainer = document.querySelector('.game-container');
const tiles = [];

// 生成游戲方塊并添加到面板中
for (let i = 0; i < 16; i++) {
    const tile = document.createElement('div');
    tile.classList.add('game-tile');
    tiles.push(tile);
    gameContainer.appendChild(tile);
}

游戲數(shù)據(jù)初始化和更新

接下來，我們需要初始化游戲數(shù)據(jù)，并實現(xiàn)生成新方塊和更新游戲面板的功能。代碼如下：

let board = Array(16).fill(0);
function generateRandomTile() {
 // ...
}
function updateBoard() {
 // ...
}

方塊移動和合并

為了使游戲能夠響應(yīng)玩家的操作，我們需要實現(xiàn)方塊的移動和合并功能。代碼如下：

function moveLeft() {
 // ...
}
function moveRight() {
 // ...
}
function moveUp() {
 // ...
}
function moveDown() {
 // ...
}

鍵盤事件監(jiān)聽

為了讓玩家能夠通過鍵盤操作游戲，我們需要監(jiān)聽鍵盤事件，并根據(jù)按鍵來調(diào)用相應(yīng)的移動函數(shù)。代碼如下：

function handleKeyDown(event) {
 // ...
}
document.addEventListener('keydown', handleKeyDown);

游戲初始化

最后，我們需要初始化游戲。代碼如下：

generateRandomTile();
generateRandomTile();
updateBoard();

完整代碼

<!DOCTYPE html>
<html>

<head>
  <title>1024 Game</title>
  <style>
    .game-container {
      display: flex;
      flex-wrap: wrap;
      width: 408px;
      height: 408px;
      border: 1px solid black;
    }

    .game-tile {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      font-size: 24px;
    }

    .tile-2 {
      background-color: #eee4da;
    }

    .tile-4 {
      background-color: #ede0c8;
    }

    .tile-8 {
      background-color: #f2b179;
    }

    .tile-16 {
      background-color: #f59563;
    }

    .tile-32 {
      background-color: #f67c5f;
    }

    .tile-64 {
      background-color: #f65e3b;
    }

    .tile-128 {
      background-color: #edcf72;
    }

    .tile-256 {
      background-color: #edcc61;
    }

    .tile-512 {
      background-color: #edc850;
    }

    .tile-1024 {
      background-color: #edc53f;
    }
  </style>
</head>

<body>
  <div class="game-container"></div>
  <script>
    // 創(chuàng)建游戲面板
    const gameContainer = document.querySelector('.game-container')
    const tiles = []
    for (let i = 0; i < 16; i++) {
      const tile = document.createElement('div')
      tile.classList.add('game-tile')
      tiles.push(tile)
      gameContainer.appendChild(tile)
    }
    // 初始化游戲數(shù)據(jù)
    let board = Array(16).fill(0)
    function generateRandomTile() {
      const emptyTiles = board.reduce((acc, curr, index) => {
        if (curr === 0) {
          acc.push(index)
        }
        return acc
      }, [])
      console.log({ emptyTiles })
      if (emptyTiles.length === 0) {
        return false
      }
      const randomIndex =
        emptyTiles[Math.floor(Math.random() * emptyTiles.length)]

      // 隨機(jī)生成2或4
      board[randomIndex] = Math.random() > 0.5 ? 2 : 4
      return true // 成功生成新方塊
    }
    function updateBoard() {
      for (let i = 0; i < 16; i++) {
        tiles[i].innerText = board[i] === 0 ? '' : board[i]
        tiles[i].className = `game-tile tile-${board[i]}`
      }
    }
    function moveLeft() {
      let hasChanged = false
      for (let i = 0; i < 4; i++) {
        const row = board.slice(i * 4, (i + 1) * 4)

        // 合并相同的方塊
        for (let j = row.length - 1; j > 0; j--) {
          if (row[j] === row[j - 1]) {
            row[j] *= 2
            row[j - 1] = 0
            hasChanged = true
          }
        }
        // 移動方塊
        for (let j = row.length - 1; j > 0; j--) {
          if (row[j - 1] === 0) {
            row[j - 1] = row[j]
            row[j] = 0
            hasChanged = true
          }
        }
        board.splice(i * 4, 4, ...row)
      }
      return hasChanged
    }
    function moveRight() {
      let hasChanged = false
      for (let i = 0; i < 4; i++) {
        const row = board.slice(i * 4, (i + 1) * 4)

        // 合并相同的方塊
        for (let j = 0; j < row.length - 1; j++) {
          if (row[j] === row[j + 1]) {
            row[j] *= 2
            row[j + 1] = 0
            hasChanged = true
          }
        }
        // 移動方塊
        for (let j = 0; j < row.length - 1; j++) {
          if (row[j + 1] === 0) {
            row[j + 1] = row[j]
            row[j] = 0
            hasChanged = true
          }
        }
        board.splice(i * 4, 4, ...row)
      }
      return hasChanged
    }
    function moveUp() {
      let hasChanged = false
      for (let i = 0; i < 4; i++) {
        const column = [board[i], board[i + 4], board[i + 8], board[i + 12]]

        // 合并相同的方塊
        for (let j = column.length - 1; j > 0; j--) {
          if (column[j] === column[j - 1]) {
            column[j] *= 2
            column[j - 1] = 0
            hasChanged = true
          }
        }
        // 移動方塊
        for (let j = column.length - 1; j > 0; j--) {
          if (column[j - 1] === 0) {
            column[j - 1] = column[j]
            column[j] = 0
            hasChanged = true
          }
        }
        board[i] = column[0]
        board[i + 4] = column[1]
        board[i + 8] = column[2]
        board[i + 12] = column[3]
      }
      return hasChanged
    }
    function moveDown() {
      let hasChanged = false
      for (let i = 0; i < 4; i++) {
        const column = [board[i], board[i + 4], board[i + 8], board[i + 12]]

        // 合并相同的方塊
        for (let j = 0; j < column.length - 1; j++) {
          if (column[j] === column[j + 1]) {
            column[j] *= 2
            column[j + 1] = 0
            hasChanged = true
          }
        }
        // 移動方塊
        for (let j = 0; j < column.length - 1; j++) {
          if (column[j + 1] === 0) {
            column[j + 1] = column[j]
            column[j] = 0
            hasChanged = true
          }
        }
        board[i] = column[0]
        board[i + 4] = column[1]
        board[i + 8] = column[2]
        board[i + 12] = column[3]
      }
      return hasChanged
    }
    function handleKeyDown(event) {
      let hasChanged = false
      switch (event.key) {
        case 'ArrowLeft':
          hasChanged = moveLeft()
          break
        case 'ArrowRight':
          hasChanged = moveRight()
          break
        case 'ArrowUp':
          hasChanged = moveUp()
          break
        case 'ArrowDown':
          hasChanged = moveDown()
          break
      }
      if (hasChanged) {
        generateRandomTile()
        updateBoard()
      } else {
        console.log('123456')
      }
    }
    // 初始化游戲
    generateRandomTile()
    generateRandomTile()
    updateBoard()
    // 監(jiān)聽鍵盤事件
    document.addEventListener('keydown', handleKeyDown)
  </script>
</body>

</html>

效果圖

總結(jié)

通過以上的代碼解釋，我們詳細(xì)了解了如何使用JavaScript編寫一個簡單的1024小游戲。這個小游戲通過鍵盤操作來移動方塊，合并相同數(shù)字的方塊，直到達(dá)到無法繼續(xù)移動為止。這個小游戲不僅是對1024程序員節(jié)的致敬，也是對所有辛勤工作、創(chuàng)造出無數(shù)令人驚嘆應(yīng)用和系統(tǒng)的程序員們的致敬。讓我們一起慶祝1024程序員節(jié)，并感謝所有程序員們?yōu)槲覀儙淼募夹g(shù)和創(chuàng)新！

以上就是用JavaScript編寫一個簡單的1024小游戲的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 1024小游戲的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: