欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年10月24日 11:03:59   作者：前端俊剛  
在每年的10月24日,我們都會慶祝程序員節(jié),這是一個向所有辛勤工作、創(chuàng)造出無數令人驚嘆應用和系統的程序員們致敬的日子,為了紀念這個特殊的日子,我們將通過編寫一個簡單的1024小游戲來向所有程序員們表示敬意,本文將詳細解釋如何使用JavaScript編寫這個小游戲

1. HTML 結構

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

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

2. CSS 樣式

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

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

游戲數據初始化和更新

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

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

方塊移動和合并

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

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

鍵盤事件監(jiān)聽

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

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)
    }
    // 初始化游戲數據
    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)]

      // 隨機生成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>

效果圖

總結

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

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

相關文章

  • p5.js入門教程之圖片加載

    p5.js入門教程之圖片加載

    這篇文章主要介紹了p5.js入門教程之圖片加載,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • js實現StringBuffer的簡單實例

    js實現StringBuffer的簡單實例

    下面小編就為大家?guī)硪黄猨s實現StringBuffer的簡單實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09
  • 詳解解決小程序中webview頁面多層history返回問題

    詳解解決小程序中webview頁面多層history返回問題

    這篇文章主要介紹了詳解解決小程序中webview頁面多層history返回問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-08-08
  • Node.js API詳解之 zlib模塊用法分析

    Node.js API詳解之 zlib模塊用法分析

    這篇文章主要介紹了Node.js API詳解之 zlib模塊用法,結合實例形式分析了Node.js API中zlib模塊基本功能、函數使用方法與操作注意事項,需要的朋友可以參考下
    2020-05-05
  • 微信小程序開發(fā)注意指南和優(yōu)化實踐(小結)

    微信小程序開發(fā)注意指南和優(yōu)化實踐(小結)

    這篇文章主要介紹了微信小程序開發(fā)注意指南和優(yōu)化實踐，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-06-06
  • javascript 使用for循環(huán)時該注意的問題-附問題總結

    javascript 使用for循環(huán)時該注意的問題-附問題總結

    所謂for循環(huán)就是重復的執(zhí)行一段代碼，for循環(huán)也是希望在創(chuàng)建循環(huán)時常會用到的工具，這篇內容主要給大家介紹javascript 使用for循環(huán)時該注意的問題-附問題總結，需要的朋友可以參考下
    2015-08-08
  • js解決彈窗問題實現班級跳轉DIV示例

    js解決彈窗問題實現班級跳轉DIV示例

    本文為大家介紹下js如何解決彈窗問題實現班級跳轉DIV，具體示例如下，感興趣的朋友可以參考下
    2014-01-01
  • 微信小程序實現手指拖動選項排序

    微信小程序實現手指拖動選項排序

    這篇文章主要介紹了微信小程序實現手指拖動選項排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-04-04
  • JavaScript根據json生成html表格的示例代碼

    JavaScript根據json生成html表格的示例代碼

    這篇文章主要介紹了JavaScript根據json生成html表格的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10
  • JS命名空間的另一種實現

    JS命名空間的另一種實現

    這篇文章介紹了js命名空間的另一種簡單實現方法，有需要的朋友可以參考一下
    2013-08-08

最新評論