KeySequence.js là một thư viện JavaScript nhẹ giúp bạn dễ dàng thêm các chức năng tương tác qua bàn phím vào trang web. Bài viết này sẽ hướng dẫn bạn cách sử dụng nó trong vòng 10 phút.

Cài đặt và cấu hình cơ bản

Bạn có thể tải thư viện từ CDN hoặc cài đặt qua npm:

<script src="https://cdn.jsdelivr.net/npm/keysequence.js"></script>

Nếu sử dụng npm:

npm install keysequence.js --save
import KeySeq from 'keysequence.js';

Ví dụ với mã Konami

Mã Konami (↑ ↑ ↓ ↓ ← → ← → B A) là một ví dụ nổi tiếng về "easter egg". Dưới đây là cách triển khai:

KeySeq('up up down down left right left right b a', function() {
  alert('Bạn đã tìm thấy easter egg!');
});

Tích hợp trạng thái và phản hồi

Bạn có thể thêm các trạng thái next, fail và done để theo dõi tiến trình của người dùng:

KeySeq('up up down down left right left right b a', {
  next: function(key, progress, sequence) {
    console.log(`Đã nhập ${progress + 1}/${sequence.length} phím`);
  },
  fail: function() {
    console.log('Lỗi! Hãy thử lại.');
  },
  done: function() {
    console.log('Xin chúc mừng! Bạn đã hoàn thành mã Konami');
    document.getElementById('hiddenContent').style.display = 'block';
  }
});

API chính và quản lý chuỗi phím

KeySequence.js hỗ trợ nhiều chuỗi phím cùng lúc và cho phép bạn quản lý chúng bằng các phương thức như disable và reset:

// Vô hiệu hóa chuỗi phím cụ thể
KeySeq.disable('up up down down left right left right b a');

// Đặt lại chuỗi phím
KeySeq.reset('left right up down');

Ứng dụng nâng cao

Dưới đây là một số ứng dụng thực tế:

Quyền hạn đa cấp

let levelAccess = 0;

KeySeq('a d m i n', function() { 
  if (levelAccess < 1) {
    levelAccess = 1;
    showMessage('Đã mở khóa quyền cấp 1');
  }
});

KeySeq('s u p e r', function() { 
  if (levelAccess >= 1) {
    levelAccess = 2;
    showMessage('Đã mở khóa quyền cấp 2');
  } else {
    showMessage('Yêu cầu quyền cấp thấp hơn');
  }
});

Tương tác dạng trò chơi

const gameKeys = 'q w e r t y';
let score = 0;

KeySeq(gameKeys, {
  next: function(key) {
    let elem = document.querySelector(`#key-${key}`);
    elem.classList.add('active');
    setTimeout(() => elem.classList.remove('active'), 200);
  },
  done: function() {
    score += 100;
    updateScoreboard(score);
  }
});

Tối ưu hóa hiệu suất và tương thích

Để tối ưu hóa hiệu suất, hãy giới hạn số lượng chuỗi phím hoạt động cùng lúc và vô hiệu hóa chúng khi người dùng rời khỏi trang:

window.addEventListener('beforeunload', () => {
  KeySeq.disable('all');
});

Kết luận

KeySequence.js mang đến một cách đơn giản nhưng mạnh mẽ để tích hợp các tính năng tương tác thú vị trên trang web của bạn. Với sự linh hoạt và khả năng tùy chỉnh cao, nó là công cụ lý tưởng cho việc tạo ra trải nghiệm người dùng độc đáo.