鹤壁网站seo优化,哈尔滨网站建设口碑好,购物网站的名称和网址,顶尖网站建设主要实现
1.使用WASD或方向按钮控制游戏 2.最高值4096#xff0c;玩到4096视为胜利 3.随机生成2、4、8方块 4.移动方块 5.合并方块
JS代码干了什么
初始化游戏界面#xff1a;创建游戏板和控制按钮。 定义游戏相关变量#xff1a;如棋盘大小、棋盘状态、得分等。 初始化棋…主要实现
1.使用WASD或方向按钮控制游戏 2.最高值4096玩到4096视为胜利 3.随机生成2、4、8方块 4.移动方块 5.合并方块
JS代码干了什么
初始化游戏界面创建游戏板和控制按钮。 定义游戏相关变量如棋盘大小、棋盘状态、得分等。 初始化棋盘创建棋盘元素并添加到页面。 生成新的方块根据一定概率生成 2、4 或 8 的方块。 更新棋盘显示根据方块的值设置背景颜色。移动方块根据用户操作或键盘按键实现方块的上、下、左、右移动。 合并方块在移动过程中相同值的方块会合并。 处理游戏结束判断是否无法再进行移动。 监听用户操作通过点击按钮或键盘按键触发移动操作。
HTML布局 game-container游戏板块|game-board游戏棋盘板块 |controls游戏控制按钮版块 不同数字的配色
数字颜色2#eee4da4#ede0c88#f2b17916#f5956332#f67c5f64#f65e3b128#edcf72256#edcc61512#edc8501024#edc53f2048#edc22e4096#ed9e1f
效果图 源代码 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title4096 Game/titlestyle
* {box-sizing: border-box;margin: 0;padding: 0;font-family: Arial, sans-serif;}body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #faf8ef;}#game-container {display: flex;flex-direction: column;align-items: center;}#game-board {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(4, 1fr);gap: 10px;background-color: #bbada0;padding: 10px;border-radius: 10px;margin-bottom: 20px;}.tile {width: 80px;height: 80px;background-color: #cdc1b4;display: flex;justify-content: center;align-items: center;font-size: 24px;border-radius: 10px;transition: all 0.2s ease-in-out;}#controls {display: flex;gap: 10px;}button {width: 60px;height: 60px;font-size: 20px;border-radius: 10px;background-color: #8f7a66;color: white;border: none;cursor: pointer;}button:hover {background-color: #9f8b76;}/style
/headbodydiv idgame-containerdiv idgame-board/divdiv idcontrolsbutton idupW/buttonbutton idleftA/buttonbutton iddownS/buttonbutton idrightD/button/div/divscriptdocument.addEventListener(DOMContentLoaded, () {const boardSize 4;let board [];let score 0;const gameBoard document.getElementById(game-board);const buttons {up: document.getElementById(up),down: document.getElementById(down),left: document.getElementById(left),right: document.getElementById(right)};function initBoard() {for (let i 0; i boardSize * boardSize; i) {const tile document.createElement(div);tile.classList.add(tile);gameBoard.appendChild(tile);}board Array.from(document.querySelectorAll(.tile));generateTile();generateTile();updateBoard();}function generateTile() {let emptyTiles board.filter(tile !tile.textContent);if (emptyTiles.length 0) {let randomTile emptyTiles[Math.floor(Math.random() * emptyTiles.length)];let randomValue Math.random() 0.9? 2 : Math.random() 0.1? 4 : 8;randomTile.textContent randomValue;}}function updateBoard() {board.forEach(tile {const value tile.textContent;tile.style.backgroundColor getTileColor(value);});}function getTileColor(value) {switch (value) {case 2:return #eee4da;case 4:return #ede0c8;case 8:return #f2b179;case 16:return #f59563;case 32:return #f67c5f;case 64:return #f65e3b;case 128:return #edcf72;case 256:return #edcc61;case 512:return #edc850;case 1024:return #edc53f;case 2048:return #edc22e;case 4096:return #ed9e1f;default:return #cdc1b4;}}function move(direction) {switch (direction) {case up:moveUp();break;case down:moveDown();break;case left:moveLeft();break;case right:moveRight();break;}generateTile();updateBoard();}function moveUp() {for (let i 0; i boardSize; i) {let column [];for (let j 0; j boardSize; j) {column.push(board[i j * boardSize].textContent);}let newColumn slideTiles(column);for (let j 0; j boardSize; j) {board[i j * boardSize].textContent newColumn[j];}}}function moveDown() {for (let i 0; i boardSize; i) {let column [];for (let j 0; j boardSize; j) {column.push(board[i j * boardSize].textContent);}let newColumn slideTiles(column.reverse()).reverse();for (let j 0; j boardSize; j) {board[i j * boardSize].textContent newColumn[j];}}}function moveLeft() {for (let i 0; i boardSize; i) {let row [];for (let j 0; j boardSize; j) {row.push(board[i * boardSize j].textContent);}let newRow slideTiles(row);for (let j 0; j boardSize; j) {board[i * boardSize j].textContent newRow[j];}}}function moveRight() {for (let i 0; i boardSize; i) {let row [];for (let j 0; j boardSize; j) {row.push(board[i * boardSize j].textContent);}let newRow slideTiles(row.reverse()).reverse();for (let j 0; j boardSize; j) {board[i * boardSize j].textContent newRow[j];}}}function slideTiles(tiles) {let newTiles tiles.filter(tile tile);for (let i 0; i newTiles.length - 1; i) {if (newTiles[i] newTiles[i 1]) {newTiles[i] (parseInt(newTiles[i]) * 2).toString();newTiles[i 1] ;}}newTiles newTiles.filter(tile tile);while (newTiles.length boardSize) {newTiles.push();}return newTiles;}buttons.up.addEventListener(click, () move(up));buttons.down.addEventListener(click, () move(down));buttons.left.addEventListener(click, () move(left));buttons.right.addEventListener(click, () move(right));document.addEventListener(keydown, (e) {switch (e.key) {case w:move(up);break;cases:move(down);break;case a:move(left);break;case d:move(right);break;}});initBoard();});/script
/body/html
