致敬1024程序员节：用JavaScript编写一个简单的1024小游戏

jungang2023-10-24 8:22

引言

在每年的10月24日，我们都会庆祝程序员节，这是一个向所有辛勤工作、创造出无数令人惊叹应用和系统的程序员们致敬的日子。为了纪念这个特殊的日子，我们将通过编写一个简单的1024小游戏来向所有程序员们表示敬意。本文将详细解释如何使用JavaScript编写这个小游戏，并对代码进行分段讲解。

1. HTML 结构

在HTML部分，我们首先需要创建一个容器来放置游戏方块。代码如下：

html 复制代码 
<div class="game-container"></div>

2. CSS 样式

接下来，我们需要为游戏面板和方块设置样式。代码如下：

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部分

初始化游戏面板和方块

代码如下：

javascript 复制代码 
// 创建游戏面板
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);
}

游戏数据初始化和更新

接下来，我们需要初始化游戏数据，并实现生成新方块和更新游戏面板的功能。代码如下：

javascript 复制代码 
let board = Array(16).fill(0);
function generateRandomTile() {
 // ...
}
function updateBoard() {
 // ...
}

方块移动和合并

为了使游戏能够响应玩家的操作，我们需要实现方块的移动和合并功能。代码如下：

javascript 复制代码 
function moveLeft() {
 // ...
}
function moveRight() {
 // ...
}
function moveUp() {
 // ...
}
function moveDown() {
 // ...
}

键盘事件监听

为了让玩家能够通过键盘操作游戏，我们需要监听键盘事件，并根据按键来调用相应的移动函数。代码如下：

javascript 复制代码 
function handleKeyDown(event) {
 // ...
}
document.addEventListener('keydown', handleKeyDown);

游戏初始化

最后，我们需要初始化游戏。代码如下：

javascript 复制代码 
generateRandomTile();
generateRandomTile();
updateBoard();

完整代码

html 复制代码 
<!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>
    // 创建游戏面板
    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()
    // 监听键盘事件
    document.addEventListener('keydown', handleKeyDown)
  </script>
</body>

</html>

效果图

总结

通过以上的代码解释，我们详细了解了如何使用JavaScript编写一个简单的1024小游戏。这个小游戏通过键盘操作来移动方块，合并相同数字的方块，直到达到无法继续移动为止。这个小游戏不仅是对1024程序员节 的致敬，也是对所有辛勤工作、创造出无数令人惊叹应用和系统的程序员们的致敬。让我们一起庆祝1024程序员节，并感谢所有程序员们为我们带来的技术和创新！

相关推荐
蟾宫曲4 小时前
在 Vue3 项目中实现计时器组件的使用（Vite+Vue3+Node+npm+Element-plus，附测试代码）
前端·npm·vue3·vite·element-plus·计时器
秋雨凉人心4 小时前
简单发布一个npm包
前端·javascript·webpack·npm·node.js
liuxin334455664 小时前
学籍管理系统：实现教育管理现代化
java·开发语言·前端·数据库·安全
qq13267029404 小时前
运行Zr.Admin项目（前端）
前端·vue2·zradmin前端·zradmin vue·运行zradmin·vue2版本zradmin
魏时烟6 小时前
css文字折行以及双端对齐实现方式
前端·css
哥谭居民00016 小时前
将一个组件的propName属性与父组件中的variable变量进行双向绑定的vue3（组件传值）
javascript·vue.js·typescript·npm·node.js·css3
踢足球的，程序猿7 小时前
Android native+html5的混合开发
javascript
2401_882726487 小时前
低代码配置式组态软件-BY组态
前端·物联网·低代码·前端框架·编辑器·web
web130933203987 小时前
ctfshow-web入门-文件包含（web82-web86）条件竞争实现session会话文件包含
前端·github
胡西风_foxww7 小时前
【ES6复习笔记】迭代器（10）
前端·笔记·迭代器·es6·iterator
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04【一文读懂】NTN（非地面网络）技术介绍05优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间06HCIA-datacom数通题库和录播视频资料07新手学习VR全景需要知道的几个问题08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09支付宝短视频平台创作分成激励项目10【数学建模】建筑工地开工问题