[Ensinando sua namorada a aprender programação das séries 0 a 1] 3. Prática de jogo front-end de 2048 - suplemento de lição de casa depois da escola

dever de casa depois da aula

• Adicione botão e lógica para reiniciar o jogo
• Adicione lógica para registrar a pontuação mais alta da história
• Estilos de layout responsivos

Demonstração online: https://inscode.csdn.net/@willin/girl-3-2048

botão reiniciar jogo

Primeiro confirme a lógica da função start:

function startGame() {
    
    
  initializeGameBoard();
  addRandomTile();
  addRandomTile();
  generateGameBoard();
  document.removeEventListener('keydown', handleKeyDown, false);
  document.addEventListener('keydown', handleKeyDown, false);
}

Entre eles removeEventListener, remova o evento de escuta do teclado existente e religue-o.

Por que fazer isso?

Se não houver operação removeEventListener , adicionar um evento de escuta do teclado toda vez que o jogo for iniciado causará esse bug: pressionar a tecla de direção apenas uma vez, mas várias mesclagens serão executadas repetidamente.

Adicione o botão Iniciar em HTML:

<button onclick="startGame()">重新开始</button>

Então você precisa modificar a função da tarefa de inicialização, limpar o tabuleiro de xadrez e pontuar:

function initializeGameBoard() {
    
    
  // 清空棋盘和得分
  gameBoard = [];
  score = 0;
  // 不动
  for (let i = 0; i < 4; i++) {
    
    
    gameBoard.push(new Array(4).fill(0));
  }
}

Se os dados não forem apagados, eles serão adicionados diretamente ao tabuleiro de xadrez original.

Adicione lógica para registrar a pontuação mais alta da história

Primeiro adicione o código HTML exibido:

<div class="score">得分: <span class="game-score">0</span></div>
<div class="score">最高分: <span class="game-high-score">0</span></div>

Adicione a seção de pontuação mais alta.

Em seguida, modifique a generateGameBoardfunção lógica de renderização:

function generateGameBoard() {
    
    
  // ... 上面不动
  // 判断历史最高分
  let max = parseInt(localStorage.getItem('score')) || 0;
  if(score > max) {
    
    
    max = score;
    localStorage.setItem('score',`${
      
      score}`);
  }
  const highScoreContainer = document.querySelector('.game-high-score');
  highScoreContainer.textContent = max;
}

A lógica aqui é muito simples. Determine se a pontuação atual é maior que a pontuação histórica. Se for maior, armazene a pontuação mais recente em Localstorage .

Estilos de layout responsivos

Considerando que o jogo é jogado através do teclado, um layout responsivo não faz muito sentido.

Portanto, resta mais uma tarefa: modificar o layout responsivo e suportar gestos de deslizamento (deslizar para a esquerda, deslizar para a direita, deslizar para cima, deslizar para baixo) para mover os quadrados numéricos.

Dicas de layout responsivo

• O layout responsivo não pode usar largura e altura fixas. Por exemplo width: 400px; height: 400px;, você precisa usar unidades como porcentagem ou (igual a 100% da largura do dispositivo da tela vw) vh.100vw
• Você pode usar min-widthe max-widthpara restringir a largura máxima, e o mesmo vale para a altura.
• Use o MediaQuery para personalizar estilos para diferentes tamanhos de tela.

Deslizar JS (gesto)

Existem muitas bibliotecas de terceiros que podem ser importadas e usadas diretamente.

Como Xwiper

• https://github.com/behnammodi/xwiper
• https://www.npmjs.com/package/xwiper

Se você usa JS nativo (Vanilla JS) para implementá-lo, você precisa saber sobre o Touch Event:

• Documentação MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events
• Tutorial de referência: https://css-tricks.com/simple-swipe-with-vanilla-javascript/

Aqui está uma demonstração de implementação simples:

let pageWidth = window.innerWidth || document.body.clientWidth;
let treshold = Math.max(1,Math.floor(0.01 * (pageWidth)));
let touchstartX = 0;
let touchstartY = 0;
let touchendX = 0;
let touchendY = 0;

const limit = Math.tan(45 * 1.5 / 180 * Math.PI);
const gestureZone = document.getElementById('modalContent');

gestureZone.addEventListener('touchstart', function(event) {
    
    
    touchstartX = event.changedTouches[0].screenX;
    touchstartY = event.changedTouches[0].screenY;
}, false);

gestureZone.addEventListener('touchend', function(event) {
    
    
    touchendX = event.changedTouches[0].screenX;
    touchendY = event.changedTouches[0].screenY;
    handleGesture(event);
}, false);

function handleGesture(e) {
    
    
    let x = touchendX - touchstartX;
    let y = touchendY - touchstartY;
    let xy = Math.abs(x / y);
    let yx = Math.abs(y / x);
    if (Math.abs(x) > treshold || Math.abs(y) > treshold) {
    
    
        if (yx <= limit) {
    
    
            if (x < 0) {
    
    
                console.log("left");
            } else {
    
    
                console.log("right");
            }
        }
        if (xy <= limit) {
    
    
            if (y < 0) {
    
    
                console.log("top");
            } else {
    
    
                console.log("bottom");
            }
        }
    } else {
    
    
        console.log("tap");
    }
}