Mã nguồn trò chơi ô chữ HTML5

Gần đây, tôi đã tạo một trò chơi ô chữ CSS thuần túy được triển khai bằng cách sử dụng lưới CSS không cần JavaScript để hoạt động. Nó đã thu hút được sự quan tâm khá nhanh chóng trên CodePen. Khi viết bài này, nó đã có hơn 350 trái tim và hơn 24.000 lượt xem trang

Hướng dẫn CSS Grid Garden tuyệt vời đã truyền cảm hứng cho tôi xây dựng thứ gì đó với các tính năng Bố cục lưới. Tôi tự hỏi liệu những tính năng này có thể được sử dụng tốt trong việc xây dựng trò chơi ô chữ hay không — sau đó tôi nghĩ, hãy thử tạo toàn bộ mà không cần sử dụng JavaScript

Xây dựng bảng / lưới

Vì vậy, điều đầu tiên, hãy tự tạo bảng

Tôi đã kết thúc với cấu trúc cơ bản sau đây, với các nhận xét HTML được bao gồm để hiển thị những gì các phần khác nhau sẽ thực hiện

<div class="crossword-board-container">

  <div class="crossword-board">

    

    <div class="crossword-board crossword-board--highlight crossword-board--highlight--across">
      
    div>

    <div class="crossword-board crossword-board--highlight crossword-board--highlight-down">
      
    div>

    <div class="crossword-board crossword-board--labels">
      
    div>

    <div class="crossword-clues">

      <dl class="crossword-clues__list crossword-clues__list--across">
        
      dl>

      <dl class="crossword-clues__list crossword-clues__list--down">
        
      dl>

    div>

  div>

div>

Điều đó đặt khung cơ bản của chúng tôi vào vị trí để chúng tôi có thể thêm nhiều yếu tố hơn và bắt đầu tạo kiểu cho mọi thứ

Sử dụng các phần tử biểu mẫu cho hình vuông

Trò chơi ô chữ tôi đang tạo là một lưới 13×13 với 44 khoảng trống, vì vậy tôi cần tạo 125 phần tử

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

0, mỗi phần tử có ID riêng ở định dạng

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

1, tôi. e.

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

2. Đây là những gì lưới sẽ trông như thế nào

Mỗi đầu vào sẽ có một

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

3 và

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

4 của “1” để mô phỏng hành vi của trò chơi ô chữ (i. e. một chữ cái trên mỗi ô vuông). Mỗi đầu vào cũng sẽ có thuộc tính

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

5 để xác thực biểu mẫu HTML5 sẽ được sử dụng. Tôi tận dụng tất cả các thuộc tính HTML5 này bằng CSS

Sử dụng Bộ chọn anh chị em chung

Các yếu tố đầu vào được sắp xếp trực quan theo nhóm (chính xác là trò chơi ô chữ). Mỗi nhóm yếu tố đầu vào đại diện cho một từ trong ô chữ. Nếu mỗi phần tử trong nhóm đó hợp lệ (có thể xác minh bằng cách sử dụng bộ chọn giả

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

6), thì chúng ta có thể sử dụng CSS để tạo kiểu cho một phần tử xuất hiện sau trong DOM (sử dụng bộ chọn CSS nâng cao được gọi là bộ chọn anh chị em chung) mà

Do cách hoạt động của bộ chọn anh chị em và cách CSS hoạt động nói chung, phần tử này phải xuất hiện sau trong DOM. CSS chỉ có thể tạo kiểu cho các phần tử đứng sau phần tử hiện được chọn. Nó không thể nhìn ngược trong DOM (hoặc lên cây DOM) và định kiểu thứ gì đó trước phần tử hiện tại (ít nhất là tại thời điểm này)

Điều này có nghĩa là tôi có thể sử dụng lớp giả

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

6 để tạo kiểu cho các phần tử hợp lệ

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

Xem Ví dụ về Bộ chọn giả hợp lệ bút của SitePoint (@SitePoint) trên CodePen

Để tạo kiểu cho một phần tử sau này trong DOM là phần tử anh em của phần tử khác, tôi có thể sử dụng bộ chọn ~ (dấu ngã/anh chị em chung), e. g.

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

8. Bộ chọn này sẽ chọn tất cả các phần tử khớp với B, là phần tử anh em của A và xuất hiện sau A trong DOM. Ví dụ

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

1

Với đoạn mã này, nếu tất cả các phần tử đầu vào đều hợp lệ thì sẽ hiển thị phần tử

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

9

Xem Bút Sử dụng Bộ chọn Anh chị em để Hiển thị Thông báo theo SitePoint (@SitePoint) trên CodePen

Bộ chọn anh chị em chung cực kỳ hữu ích ở đây. Để trò chơi ô chữ hoạt động, tôi cần đảm bảo rằng mọi thứ được sắp xếp theo cách cho phép tôi tận dụng bộ chọn anh chị em chung

Ví dụ ô chữ đã hoàn thành đang sử dụng kỹ thuật trên, bắt đầu từ dòng 285. Tôi đã tách nó ra trong khối mã bên dưới

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

3

Phần CSS này đảm bảo rằng nếu tất cả các phần tử đầu vào này hợp lệ thì độ mờ của phần tử

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

10 sẽ bị thay đổi.

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

11 là anh chị em của tất cả các yếu tố đầu vào và

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

10 là con của

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

11 nên có thể chọn bằng CSS

Chỉ ra câu trả lời đúng

Mỗi câu trả lời ô chữ (i. e. nhóm yếu tố đầu vào) có mục lưới “chỉ báo câu trả lời đúng” (

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

14) tương ứng. Các mục lưới này được đặt phía sau các thành phần đầu vào trên trục z và được ẩn bằng cách sử dụng

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

15. Khi một từ chính xác được nhập vào, thì mục lưới chỉ báo câu trả lời đúng sẽ được hiển thị bằng cách thay đổi

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

16 thành

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

17, như đoạn mã bộ chọn lớp giả ở trên minh họa

Kỹ thuật này được lặp lại cho từng nhóm “từ” của các phần tử đầu vào. Vì vậy, điều này có nghĩa là tạo thủ công từng quy tắc CSS cho từng thành phần đầu vào trong nhóm từ và sau đó chọn mục lưới chỉ báo câu trả lời đúng tương ứng. Như bạn có thể tưởng tượng, điều này làm cho CSS phát triển nhanh chóng

Vì vậy, cách tiếp cận hợp lý sẽ là tạo tất cả các quy tắc CSS hiển thị/ẩn các mục lưới chỉ báo câu trả lời đúng cho tất cả các câu trả lời đầu mối theo chiều ngang (ngang qua). Sau đó, bạn sẽ làm tương tự cho các câu trả lời theo chiều dọc

Những thách thức của hệ thống lưới

Giống như tôi, nếu bạn đang cố gắng sử dụng càng ít CSS càng tốt, bạn sẽ nhanh chóng nhận ra rằng bạn không thể có các vùng lưới chồng chéo trong cùng một hệ thống lưới mà không cần phải khai báo rõ ràng. Họ chỉ có thể ngồi cạnh nhau (1 ngang và 1 xuống chia sẻ một ô vuông ở trên cùng bên phải của bảng và điều này là không thể khi sử dụng một lưới CSS để bố trí tất cả các mục chỉ báo câu trả lời đúng)

Giải pháp là bọc từng mục lưới chỉ báo câu trả lời đúng theo chiều ngang (ngang) trong hệ thống lưới riêng của nó và từng mục lưới chỉ báo câu trả lời đúng theo chiều dọc (xuống dưới) trong một mục khác. Bằng cách này, tôi vẫn có thể sử dụng CSS để chọn chúng (sử dụng bộ chọn anh chị em chung) và chúng sẽ không can thiệp lẫn nhau và làm hỏng bố cục của lưới

Các mục Bố cục lưới CSS hoạt động tương tự như các phần tử khối nội tuyến. Về cơ bản, điều này có nghĩa là nếu bạn chỉ định hai mục lưới chiếm cùng một không gian, thì mục thứ hai sẽ chạy xung quanh mục đầu tiên và xuất hiện sau mục đó trong lưới

Xem Ví dụ về Mô-đun Bố cục Lưới Bút của SitePoint (@SitePoint) trên CodePen

Trong ví dụ trên, mục lưới đầu tiên rộng bảy cột và kéo dài từ cột đầu tiên đến cột thứ bảy. Mục lưới thứ hai có nghĩa là bắt đầu ở cột thứ 4 và kéo dài đến cột thứ 9. Lưới CSS không thích điều này nên nó bao sang hàng tiếp theo. Ngay cả khi bạn chỉ định

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

18 trong mục thứ hai, mục đó sẽ được ưu tiên và sau đó di chuyển mục lưới đầu tiên sang hàng thứ hai

Như đã giải thích ở trên, tôi đã tránh điều này bằng cách có nhiều lưới cho các mục ngang và dọc. Có thể tránh tình trạng này bằng cách chỉ định khoảng cách hàng và cột cho từng phần tử, nhưng tôi đã sử dụng phương pháp trên để giảm lượng CSS và cũng để có cấu trúc HTML dễ bảo trì hơn

Kiểm tra đầu vào thư hợp lệ

Mỗi phần tử đầu vào có một thuộc tính

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

19 với một biểu thức chính quy làm giá trị của nó. Biểu thức chính quy khớp với chữ hoa hoặc chữ thường cho hình vuông đó

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

4

Điều này không lý tưởng vì câu trả lời nằm trong HTML. Tôi muốn ẩn câu trả lời trong CSS, nhưng tôi không thể tìm ra cách nào để thực hiện việc này thành công. Tôi đã thử kỹ thuật sau

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

5

Nhưng điều này sẽ không làm việc. Bộ chọn thuộc tính sẽ chọn phần tử dựa trên nội dung thực sự bên trong HTML và không xem xét các thay đổi trực tiếp. Vì vậy, tôi đã phải sử dụng cách tiếp cận lớp giả

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

6 được nêu chi tiết ở trên và do đó (và thật khó chịu) phơi bày các câu trả lời trong chính HTML

Làm nổi bật manh mối khi di chuột

Tất cả các manh mối ngang (ngang) được bao bọc trong một

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

31, cũng như các manh mối dọc (xuống dưới). Các phần tử

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

31 gói này là anh em ruột của các phần tử

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

0 trong lưới ô chữ. Điều này được thể hiện trong cấu trúc HTML được liệt kê ở trên trong khối mã trước đó. Điều này giúp dễ dàng chọn (các) đầu mối chính xác tùy thuộc vào yếu tố đầu vào nào đang được tập trung/di chuột

Đối với điều này, mỗi phần tử

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

0 cần các kiểu

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

35,

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

36 và

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

37 để làm nổi bật đầu mối liên quan bằng cách áp dụng màu nền khi người dùng tương tác với phần tử

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

0

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

5

Đánh số các manh mối

Các số cho manh mối được định vị bằng cách sử dụng mẫu Lưới CSS. Đây là một ví dụ về HTML, viết tắt

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

6

Sau đó, CSS trông giống như thế này

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

7

Mỗi số được đặt ở vị trí bắt đầu của nhóm phần tử đầu vào (hoặc từ) có liên quan của nó. Số này sau đó được tạo thành chiều rộng và chiều cao của 1 ô vuông lưới để nó chiếm ít không gian nhất có thể trong lưới. Nó có thể chiếm ít chỗ hơn bằng cách triển khai CSS Grid theo cách khác ở đây, nhưng tôi đã chọn thực hiện theo cách này

Hộp kiểm “Kiểm tra ô vuông hợp lệ”

Ở đầu ô chữ, bạn sẽ thấy hộp kiểm có nhãn “Kiểm tra ô vuông hợp lệ”. Điều này cho phép người dùng kiểm tra xem một số chữ cái có đúng không, ngay cả khi một từ đã cho sai

Tạo cái này khá đẹp vì nó là một quy tắc CSS làm cho tất cả các ô vuông hợp lệ được tô sáng. Đó là sử dụng hack hộp kiểm để chọn tất cả các phần tử đầu vào hợp lệ nằm sau hộp kiểm đã chọn trong DOM

Đây là mã

.input:valid {
  border: 2px solid green;
}
.input:invalid {
  border: 2px solid red;
}

8

Phần kết luận

Điều đó bao gồm tất cả các kỹ thuật chính được sử dụng trong bản demo. Như một bài tập, điều này cho bạn thấy CSS đã tiến xa như thế nào trong những năm gần đây. Có rất nhiều tính năng chúng ta có thể sáng tạo với. Tôi nóng lòng muốn thử và đẩy các tính năng mới khác đến giới hạn

Nếu bạn muốn loay hoay với CSS từ bài viết này, tôi đã đưa tất cả các mã ví dụ vào bộ sưu tập CodePen. Bạn có thể tìm thấy Câu đố ô chữ CSS đầy đủ đang hoạt động tại đây

Chia sẻ bài viết này

Adrian Roworth

Adrian là nhà phát triển web front-end làm việc tại Scotland. Trong cuộc đời làm việc của mình, Adrian thích sử dụng CSS và JavaScript theo những cách mới lạ và sáng tạo. Khi anh ấy không viết mã, anh ấy dành thời gian chơi guitar và trống