Tập sách nhỏ javascript về thiết kế mã trò chơi

Dự án JavaScript dành cho người mới bắt đầu (sê-ri 8 phần)

• 1 Tạo ứng dụng JavaScript đầu tiên của bạn — Trình tạo trích dẫn ngẫu nhiên
• 2 Cách tạo Ứng dụng Tìm kiếm Wikipedia bằng JavaScript
• 3 Cách tạo Ứng dụng Máy tính bằng JavaScript
• 4 Cách tạo Ứng dụng Todo List bằng JavaScript
• 5 Cách tạo Trình phát video HTML5 tùy chỉnh bằng JavaScript
• 6 Cách xây dựng Trò chơi Simon bằng JavaScript
• 7 Cách tạo Ứng dụng hẹn giờ Pomodoro bằng JavaScript
• 8 Cách tạo tiện ích mở rộng Chrome đầu tiên của bạn

Trong hướng dẫn này, chúng ta sẽ phát triển Trò chơi Simon cổ điển bằng JavaScript. Mục tiêu của trò chơi là lặp lại một loạt các lần nhấp ô ngẫu nhiên do trò chơi tạo ra. Sau mỗi vòng, trình tự trở nên dài hơn và phức tạp hơn khiến bạn khó nhớ hơn

Chơi phiên bản trực tiếp của trò chơi

Thông thường, bạn sẽ có bốn ô khác nhau, mỗi ô có một màu và âm thanh riêng được kích hoạt khi nhấn. Âm thanh hỗ trợ người chơi ghi nhớ trình tự và trò chơi kết thúc nếu người chơi bỏ lỡ một bước trong trình tự

điều kiện tiên quyết

Hướng dẫn này giả định kiến ​​thức cơ bản về JavaScript và DOM

Bắt đầu

Lấy các tệp HTML và CSS cho trò chơi trên GitHub. Hướng dẫn thiết lập dự án có trong tệp README đi kèm. Bạn cũng có thể làm theo hướng dẫn sử dụng JSFiddle nếu muốn

Đây là điểm bắt đầu trên JSFiddle

Như đã đề cập trước đó, một vòng bắt đầu khi trò chơi kích hoạt một hoặc nhiều ô xếp theo thứ tự ngẫu nhiên và kết thúc khi người chơi lặp lại thứ tự đó bằng cách nhấn các ô xếp. Ở vòng tiếp theo, số lượng ô trong chuỗi tăng thêm một

Hãy bắt đầu bằng cách tạo một mảng để theo dõi chuỗi lần nhấp ô ban đầu và mảng thứ hai cho chuỗi con người

let sequence = [];
let humanSequence = [];

Tiếp theo, chọn nút bắt đầu và tạo một hàm

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Tại thời điểm này, một khi nút bắt đầu được nhấn, nó sẽ bị ẩn. Phần tử

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

Cập nhật tệp JavaScript của bạn như hình bên dưới

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

Bây giờ, sau khi nhấp vào nút bắt đầu, phần tử

<span class="info js-info hidden">span>

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

Bắt đầu vòng tiếp theo

Tạo một biến

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

Tiếp theo, tạo một hàm

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

Mỗi lần

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

Tạo một hàm

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Biến

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Chúng ta cần lấy một giá trị ngẫu nhiên từ mảng mỗi khi thực thi

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

<span class="info js-info hidden">span>

Điều đó không hữu ích cho chúng tôi vào lúc này. Nó cần được chuyển đổi thành một chỉ mục hợp lệ cho mảng

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

Tuy nhiên, những giá trị phân số đó không phải là chỉ mục mảng hợp lệ, vì vậy,

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

Hãy tận dụng giá trị trả về của hàm

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

Điều xảy ra ở đây là khi

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

<span class="info js-info hidden">span>

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

Chơi vòng tiếp theo

Bước tiếp theo là thực sự chơi vòng tiếp theo bằng cách kích hoạt các ô trên màn hình theo đúng thứ tự. Thêm các chức năng sau vào trên

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

<span class="info js-info hidden">span>

Hàm

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

Số mili giây được chỉ định trong hàm

<span class="info js-info hidden">span>

Trong hàm

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Lớp

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Cuối cùng, gọi

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Bây giờ, khi bạn nhấn nút bắt đầu, vòng đầu tiên sẽ bắt đầu và một nút ngẫu nhiên sẽ được kích hoạt trên bảng

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

Lượt của người chơi

Sau khi máy tính bắt đầu một vòng bằng cách kích hoạt chuỗi ô tiếp theo, người chơi cần kết thúc vòng bằng cách lặp lại mô hình kích hoạt ô theo đúng thứ tự. Nếu một bước bị bỏ lỡ trên đường đi, trò chơi sẽ kết thúc và đặt lại

Chọn tiêu đề và phần tử bộ chứa ô xếp bên dưới biến

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Tiếp theo, tạo một hàm

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Bước đầu tiên là xóa lớp

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Ở dòng tiếp theo, nội dung của phần tử

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Hàm

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Hàm

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Trong lần cập nhật tiếp theo cho

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Tiêu đề hiện phản ánh cấp độ hiện tại

Bước tiếp theo là phát hiện các lần nhấn nút của người chơi và quyết định chuyển sang vòng tiếp theo hay kết thúc trò chơi. Thêm trình lắng nghe sự kiện sau ngay bên dưới sự kiện cho

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Trong trình xử lý sự kiện ở trên, giá trị của

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');
const info = document.querySelector('.js-info');

function startGame() {
  startButton.classList.add('hidden');
  info.classList.remove('hidden');
  info.textContent = 'Wait for the computer';
}

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

Tạo hàm

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Hàm này đẩy giá trị khối xếp vào mảng

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

Khối

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

So sánh trình tự

Chúng ta cần so sánh thứ tự mà người chơi chạm vào các nút với thứ tự của trình tự do trò chơi tạo ra. Nếu thứ tự không khớp, trò chơi sẽ đặt lại và hiển thị thông báo cảnh báo người chơi về lỗi

Tạo một hàm

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

Chức năng này hiển thị cảnh báo và khôi phục trò chơi về trạng thái ban đầu. Hãy sử dụng nó trong

<span class="info js-info hidden">span>

<span class="info js-info hidden">span>

Nếu giá trị của phần tử được truy xuất bởi

<span class="info js-info hidden">span>

const startButton = document.querySelector('.js-start');

function startGame() {
  startButton.classList.add('hidden');
}

startButton.addEventListener('click', startGame);

<span class="info js-info hidden">span>

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

Chuẩn bị trạng thái kết thúc

Trò chơi chủ yếu hoạt động nhưng chúng tôi cần giới thiệu trạng thái kết thúc khi người chơi thắng trò chơi. Tôi đã chọn 20 vòng, nhưng bạn có thể sử dụng bất kỳ số nào bạn thích. Trò chơi Simon kinh điển đã kết thúc sau 35 vòng đấu

Đây là phần kết thúc trò chơi nếu người dùng đến và hoàn thành vòng thứ 20

<span class="info js-info hidden">span>

Sau khi hoàn thành vòng thứ 20, một thông báo chúc mừng sẽ được hiển thị và trò chơi sẽ đặt lại. Đảm bảo dùng thử và xem liệu bạn có thể đạt cấp 20 mà không bị trượt không

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

Sự kết luận

Trong hướng dẫn này, chúng tôi đã phát triển một trò chơi Simon đang hoạt động với JavaScript. Tôi hy vọng bạn đã có rất nhiều niềm vui khi xây dựng nó. Bạn có thể tiến xa hơn bằng cách thử nghiệm các thiết kế khác nhau hoặc bằng cách thêm các tính năng bổ sung. Ngoài ra còn có một số bản sao bạn có thể học hỏi và sử dụng như một nguồn cảm hứng

Bạn có thể thiết kế trò chơi bằng JavaScript không?

Bạn có thể tạo trò chơi 3D bằng JavaScript không?