## Déplacer les tuiles de nombres Après avoir terminé la mise en page et l'initialisation, nous allons maintenant implémenter la fonctionnalité de déplacement et d'élimination des tuiles de nombres jusqu'à ce que la partie réussisse ou échoue. Ajoutez le code suivant à `main.js` : ```js // Écouter les mouvements des flèches du clavier $(document).keydown(function (event) { if ($("#score").text() == success_string) { new_game(); return; } switch (event.keyCode) { case 37: // Gauche event.preventDefault(); if (move_left()) { setTimeout("generate_one_number()", 210); setTimeout("is_gameover()", 300); } break; case 38: // Haut event.preventDefault(); if (move_up()) { setTimeout("generate_one_number()", 210); setTimeout("is_gameover()", 300); } break; case 39: // Droite event.preventDefault(); if (move_right()) { setTimeout("generate_one_number()", 210); setTimeout("is_gameover()", 300); } break; case 40: // Bas event.preventDefault(); if (move_down()) { setTimeout("generate_one_number()", 210); setTimeout("is_gameover()", 300); } break; default: break; } }); // Écouter l'événement touchstart sur les appareils mobiles document.addEventListener("touchstart", function (event) { startx = event.touches[0].pageX; starty = event.touches[0].pageY; }); // Écouter l'événement touchmove sur les appareils mobiles document.addEventListener("touchmove", function (event) { event.preventDefault(); }); // Écouter l'événement touchend sur les appareils mobiles document.addEventListener("touchend", function (event) { endx = event.changedTouches[0].pageX; endy = event.changedTouches[0].pageY; var deltax = endx - startx; var deltay = endy - starty; if ( Math.abs(deltax) < 0.3 * document_width && Math.abs(deltay) < 0.3 * document_width ) { return; } if ($("#score").text() == success_string) { new_game(); return; } // Mouvement sur l'axe x if (Math.abs(deltax) >= Math.abs(deltay)) { if (deltax > 0) { // Déplacer vers la droite if (move_right()) { setTimeout("generate_one_number()", 210); setTimeout("is_gameover()", 300); } } else { // Déplacer vers la gauche if (move_left()) { setTimeout("generate_one_number()", 210); setTimeout("is_gameover()", 300); } } } else { // Mouvement sur l'axe y if (deltay > 0) { // Déplacer vers le bas if (move_down()) { setTimeout("generate_one_number()", 210); setTimeout("is_gameover()", 300); } } else { // Déplacer vers le haut if (move_up()) { setTimeout("generate_one_number()", 210); setTimeout("is_gameover()", 300); } } } }); // Déplacer vers la gauche function move_left() { if (!can_move_left(board)) { return false; } // Déplacer vers la gauche for (var i = 0; i < 4; i++) { for (var j = 1; j < 4; j++) { if (board[i][j] != 0) { for (var k = 0; k < j; k++) { if (board[i][k] == 0 && no_block_horizontal(i, k, j, board)) { show_move_animation(i, j, i, k); board[i][k] = board[i][j]; board[i][j] = 0; break; } else if ( board[i][k] == board[i][j] && no_block_horizontal(i, k, j, board) && !has_conflicted[i][k] ) { show_move_animation(i, j, i, k); board[i][k] += board[i][j]; board[i][j] = 0; // Ajouter le score score += board[i][k]; update_score(score); has_conflicted[i][k] = true; break; } } } } } setTimeout("update_board_view()", 200); return true; } // Déplacer vers la droite function move_right() { if (!can_move_right(board)) { return false; } // Déplacer vers la droite for (var i = 0; i < 4; i++) { for (var j = 2; j >= 0; j--) { if (board[i][j] != 0) { for (var k = 3; k > j; k--) { if (board[i][k] == 0 && no_block_horizontal(i, j, k, board)) { show_move_animation(i, j, i, k); board[i][k] = board[i][j]; board[i][j] = 0; break; } else if ( board[i][k] == board[i][j] && no_block_horizontal(i, j, k, board) && !has_conflicted[i][k] ) { show_move_animation(i, j, i, k); board[i][k] += board[i][j]; board[i][j] = 0; // Ajouter le score score += board[i][k]; update_score(score); has_conflicted[i][k] = true; break; } } } } } setTimeout("update_board_view()", 200); return true; } // Déplacer vers le haut function move_up() { if (!can_move_up(board)) { return false; } // Déplacer vers le haut for (var j = 0; j < 4; j++) { for (var i = 1; i < 4; i++) { if (board[i][j] != 0) { for (var k = 0; k < i; k++) { if (board[k][j] == 0 && no_block_vertical(j, k, i, board)) { show_move_animation(i, j, k, j); board[k][j] = board[i][j]; board[i][j] = 0; break; } else if ( board[k][j] == board[i][j] && no_block_vertical(j, k, i, board) && !has_conflicted[k][j] ) { show_move_animation(i, j, k, j); board[k][j] += board[i][j]; board[i][j] = 0; // Ajouter le score score += board[k][j]; update_score(score); has_conflicted[k][j] = true; break; } } } } } setTimeout("update_board_view()", 200); return true; } // Déplacer vers le bas function move_down() { if (!can_move_down(board)) { return false; } // Déplacer vers le bas for (var j = 0; j < 4; j++) { for (var i = 2; i >= 0; i--) { if (board[i][j] != 0) { for (var k = 3; k > i; k--) { if (board[k][j] == 0 && no_block_vertical(j, i, k, board)) { show_move_animation(i, j, k, j); board[k][j] = board[i][j]; board[i][j] = 0; break; } else if ( board[k][j] == board[i][j] && no_block_vertical(j, i, k, board) && !has_conflicted[k][j] ) { show_move_animation(i, j, k, j); board[k][j] += board[i][j]; board[i][j] = 0; // Ajouter le score score += board[k][j]; update_score(score); has_conflicted[k][j] = true; break; } } } } } setTimeout("update_board_view()", 200); return true; } // Vérifier si la partie est réussie ou échouée function is_gameover() { for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { if (board[i][j] == 2048) { update_score(success_string); return; } } } if (nospace(board) && nomove(board)) { gameover(); } } // Mettre à jour le texte de fin de partie lorsque la partie se termine function gameover() { update_score(gameover_string); } ```