编写HTML/CSS文件(index.html/style.css)
power2
Your Score: 0
LOSE
td { border: 3px solid #ccc; text-align: center; vertical-align: center; width: 25%; height: 25%; font-weight: bold;}body { line-height: 100%;}#wrap { width: 500px; height: 500px; margin-left: 30%; margin-top: 3%; border-spacing: 10px; border-collapse: separate;}#opts { margin-top: 2%; width: 500px; margin-left: 30%; padding-left: 3%;}#lost { display: none; position: absolute; top: 45%; left: 15%; font-size: 350px; color: red;}.word { font-size: 24px;}._2, ._4, ._8 { font-size: 85px;}._16, ._32, ._64 { font-size: 75px;}._128, ._256, ._512 { font-size: 50px;}._1024 { font-size: 35px;}._2 { color: rgb(205, 28, 31);}._4 { color: rgb(223,223,16);}._8 { color: rgb(15,177,34);}._16 { color: rgb(51,102,205);}._32 { color: rgb(16,223,223);}._64 { color: rgb(255,110,199);}._128 { color: rgb(255, 70, 0);}._256 { color: rgb(255,97,128);}._512 { color: rgb(128, 42, 42);}._1024 { color: rgb(70, 70, 70);} 编写JavaScript文件
'use strict';const KEY_LEFT = 1024;const KEY_UP = 2048;const KEY_RIGHT = 4096;const KEY_DOWN = 8192;var score = 0;//全局格子数组var blocks = [ [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ]];//撤销堆栈数组var undoArr = [];$(() => { startGame();});//开始游戏并绑定键盘事件function startGame() { $(window).on('keydown', (evt) => { const key = evt.which; switch (key) { case 37: mainMove(KEY_LEFT); break; case 38: mainMove(KEY_UP); break; case 39: mainMove(KEY_RIGHT); break; case 40: mainMove(KEY_DOWN); break; case 82: restartGame(); break; case 85: undoGame(); break; default: break; } }); $('#restart').on('click', (evt) => { restartGame(); }); $('#undo').on('click', (evt) => { undoGame(); }) restartGame();}//重启游戏function restartGame() { for (let row = 0; row < blocks.length; row++) { for (let col = 0; col < blocks[0].length; col++) { blocks[row][col] = 0; } } undoArr = []; $('#lost').hide(); $('#score').text(0); genNewNum(); updatePaint();}//撤销游戏function undoGame() { blocks = undoArr.pop(); updatePaint();}//核心移动算法function mainMove(dir) { var merged = [ [ false, false, false, false ], [ false, false, false, false ], [ false, false, false, false ], [ false, false, false, false ] ]; //临时数组 撤销堆栈用 var tmp = [ [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ] ]; var isMoved = false; //临时数组保存当前状态 for (let row = 0; row < blocks.length; row++) { for (let col = 0; col < blocks[0].length; col++) { tmp[row][col] = blocks[row][col]; } } //根据方向键移动方块并计算得分 如果2个1024合在一起则变成2 if (dir == KEY_DOWN) { for (let col = 0; col < blocks[0].length; col++) { for (let row = blocks.length-2; row >= 0; row--) { if (blocks[row][col] !== 0) { for (let cur = row; cur <= blocks.length-2; cur++) { if (blocks[cur+1][col] === 0) { blocks[cur+1][col] = blocks[cur][col]; blocks[cur][col] = 0; isMoved = true; } else if (blocks[cur+1][col] === blocks[cur][col] && !merged[cur+1][col]) { blocks[cur+1][col] *= 2; if (blocks[cur+1][col] === 2048) { blocks[cur+1][col] = 2; } blocks[cur][col] = 0; score += blocks[cur+1][col]; for (let merge = cur+1; merge < blocks.length; merge++) { merged[merge][col] = true; } isMoved = true; } } } } } } else if (dir == KEY_UP) { for (let col = 0; col < blocks[0].length; col++) { for (let row = 1; row <= blocks.length-1; row++) { if (blocks[row][col] !== 0) { for (let cur = row; cur >= 1; cur--) { if (blocks[cur-1][col] === 0) { blocks[cur-1][col] = blocks[cur][col]; blocks[cur][col] = 0; isMoved = true; } else if (blocks[cur-1][col] === blocks[cur][col] && !merged[cur-1][col]) { blocks[cur-1][col] *= 2; if (blocks[cur-1][col] === 2048) { blocks[cur-1][col] = 2; } blocks[cur][col] = 0; score += blocks[cur-1][col]; for (let merge = cur-1; merge >= 0; merge--) merged[merge][col] = true; isMoved = true; } } } } } } else if (dir == KEY_RIGHT) { for (let row = 0; row < blocks.length; row++) { for (let col = blocks[0].length-2; col >= 0; col--) { if (blocks[row][col] !== 0) { for (let cur = col; cur <= blocks[0].length-2; cur++) { if (blocks[row][cur+1] === 0) { blocks[row][cur+1] = blocks[row][cur]; blocks[row][cur] = 0; isMoved = true; } else if (blocks[row][cur+1] === blocks[row][cur] && !merged[row][cur+1]) { blocks[row][cur+1] *= 2; if (blocks[cur+1][col] === 2048) { blocks[cur+1][col] = 2; } blocks[row][cur] = 0; score += blocks[row][cur+1]; for (let merge = cur+1; merge < blocks[0].length; merge++) merged[row][merge] = true; isMoved = true; } } } } } } else if (dir == KEY_LEFT) { for (let row = 0; row < blocks.length; row++) { for (let col = 1; col <= blocks[0].length-1; col++) { if (blocks[row][col] !== 0) { for (let cur = col; cur >= 1; cur--) { if (blocks[row][cur-1] === 0) { blocks[row][cur-1] = blocks[row][cur]; blocks[row][cur] = 0; isMoved = true; } else if (blocks[row][cur-1] === blocks[row][cur] && !merged[row][cur-1]) { blocks[row][cur-1] *= 2; if (blocks[cur-1][col] === 2048) { blocks[cur-1][col] = 2; } blocks[row][cur] = 0; score += blocks[row][cur-1]; for (let merge = cur-1; merge >= 0; merge--) merged[row][merge] = true; isMoved = true; } } } } } } //如果移动了 那么之前状态加入堆栈 产生新数字并判断是否输 if (isMoved) { undoArr.push(tmp); genNewNum(); updatePaint(); checkIfLose(); }}//产生新数字2function genNewNum() { do { let idx = (Math.random() * 16)|0; var row = (idx / 4)|0; var col = idx % 4; } while(blocks[row][col] !== 0); blocks[row][col] = 2;}//画面重绘function updatePaint() { for (let row in blocks) { for (let col in blocks[row]) { const cell = '#cell' + (+(row*4)+(+col)); const str = blocks[row][col].toString(); if (str !== '0') { $(cell).text(str).attr('class', 'cell _' + str); } else { $(cell).text(''); } } } $('#score').text(score);}//检查是否输function checkIfLose() { //检查是否有空格子 for (let row = 0; row < blocks.length; row++) { for (let col = 0; col < blocks[0].length; col++) { if (blocks[row][col] === 0) { return; } } } //检查是否可以列合并 for (let row = 0; row < blocks.length; row++) { for (let col = 0; col < blocks[0].length-1; col++) { if (blocks[row][col] === blocks[row][col+1]) { return; } } } //检查是否可以行合并 for (let col = 0; col < 4; col++) { for (let row = 0; row < blocks.length-1; row++) { if (blocks[row][col] === blocks[row+1][col]) { return; } } } updatePaint(); $('#lost').show();} 游戏截图
