Hướng dẫn how to make a crossword puzzle in html - làm thế nào để tạo một câu đố ô chữ trong html

Gần đây, tôi đã tạo ra một câu đố ô 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ó đã đạt được sự quan tâm nặng nề khá nhanh trên Codepen. Theo văn bản này, nó có hơn 350 trái tim và hơn 24.000 lượt xem trang!

Hướng dẫn Garden Garden Great CSS đã truyền cảm hứng cho tôi để xây dựng một cái gì đó với các tính năng bố trí lưới. Tôi tự hỏi liệu các tính năng này có thể được sử dụng tốt trong việc xây dựng một trò chơi ô chữ không - sau đó tôi nghĩ, hãy để cố gắng tạo ra toàn bộ mọi thứ 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, trước tiên, hãy để tự tạo ra 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ẽ hoàn thành:

<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 bộ xương 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ố và bắt đầu tạo kiểu.

Sử dụng các yếu tố biểu mẫu cho các ô vuông

Câu đố ô chữ mà tôi tạo ra là một lưới 13 × 13 với 44 khoảng trống, vì vậy tôi cần tạo 125

.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ức là

.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ó đượ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 1 để mô phỏng hành vi của một câu đố ô chữ (tức là một chữ cái trên mỗi hình 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 sao cho 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 phần tử đầu vào được trình bày trực quan theo nhóm (chính xác là cách chơi trò chơi ô chữ). Mỗi nhóm các phần tử đầu vào đại diện cho một từ trong ô chữ. Nếu từng phần tử trong nhóm đó là hợp lệ (có thể được xác minh bằ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 phần tử xuất hiện sau này trong DOM (sử dụng bộ chọn CSS nâng cao được gọi là bộ chọn anh chị em chung) rằng đó sẽ chỉ ra rằng từ này là chính xác.

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

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

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

6 để tạo ra các yếu tố hợp lệ:

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

Xem ví dụ chọn PSEUDO hợp lệ của PEN bằng SitePoint (@SitePoint) trên CodePen.

Để tạo kiểu cho một yếu tố sau này trong DOM là anh chị em của một yếu tố khác, tôi có thể sử dụng bộ chọn ~ (Tilde/General anh chị em), ví dụ:

.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 yếu tố phù hợp với B, là anh chị em của A và xuất hiện sau A trong DOM. Ví dụ:

#input1:valid ~ #input2:valid ~ #input3:valid ~ #input4:valid ~ #input5:valid ~ .valid-message {
  display: block;
}

Với mã này, nếu tất cả các phần tử đầu vào này là hợp lệ, phần tử

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

9 sẽ được hiển thị.

Xem bút bằng cách sử dụng bộ chọn anh chị em để hiển thị thông báo theo trang web (@SitePoint) trên CodePen.

Bộ chọn anh chị em chung là vô cùng hữu ích ở đây. Để làm cho ô chữ hoạt động, tôi cần đảm bảo rằng mọi thứ được đặt ra theo cách cho phép tôi tận dụng lợi thế của bộ chọn anh chị em chung.

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

#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ 
#item1-4:valid ~ #item1-5:valid ~ #item1-6:valid ~ 
.crossword-board--highlight .crossword-board__item-highlight--across-1 {
  opacity: 1;
}

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

#input1:valid ~ #input2:valid ~ #input3:valid ~ #input4:valid ~ #input5:valid ~ .valid-message {
  display: block;
}

0 sẽ được thay đổi.

#input1:valid ~ #input2:valid ~ #input3:valid ~ #input4:valid ~ #input5:valid ~ .valid-message {
  display: block;
}

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

#input1:valid ~ #input2:valid ~ #input3:valid ~ #input4:valid ~ #input5:valid ~ .valid-message {
  display: block;
}

0 là con của

#input1:valid ~ #input2:valid ~ #input3:valid ~ #input4:valid ~ #input5:valid ~ .valid-message {
  display: block;
}

1 vì vậy nó có thể lựa chọn với CSS!

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

Mỗi câu trả lời ô chữ (tức là nhóm các phần tử đầu vào) có một mục Grid trả lời đúng tương ứng (

#input1:valid ~ #input2:valid ~ #input3:valid ~ #input4:valid ~ #input5:valid ~ .valid-message {
  display: block;
}

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

#input1:valid ~ #input2:valid ~ #input3:valid ~ #input4:valid ~ #input5:valid ~ .valid-message {
  display: block;
}

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

#input1:valid ~ #input2:valid ~ #input3:valid ~ #input4:valid ~ #input5:valid ~ .valid-message {
  display: block;
}

6 thành

#input1:valid ~ #input2:valid ~ #input3:valid ~ #input4:valid ~ #input5:valid ~ .valid-message {
  display: block;
}

7, vì đoạn chọn phân chọn lớp giả ở trên thể hiện.

Kỹ thuật này được lặp lại cho mỗi nhóm các yếu tố đầu vào của Word Word. 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 phần tử đầ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 trở nê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 chính xác cho tất cả các câu trả lời đầu mối ngang (qua). Sau đó, bạn sẽ làm tương tự cho các câu trả lời manh mối dọc.

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

Nếu, giống như tôi, 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 khu vực lưới chồng chéo trong cùng một hệ thống lưới mà không phải khai báo rõ ràng. Họ chỉ có thể ngồi cạnh nhau (1 và 1 xuống chia sẻ một hình vuông ở phía trên 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 trả lời chính xác).

Giải pháp là bọc từng mục lưới chỉ báo câu trả lời chính xác (qua) trong hệ thống lưới riêng của nó và mỗi mục lưới chỉ báo câu trả lời chính xác (xuống) theo 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 vào nhau và phá 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 yếu tố khối nội tuyến. Điều này về cơ bản 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 thứ nhất và xuất hiện sau nó trong lưới.

Xem ví dụ 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. CSS Grid không thích điều này vì vậy nó kết thúc nó ở hàng tiếp theo. Ngay cả khi bạn chỉ định

#input1:valid ~ #input2:valid ~ #input3:valid ~ #input4:valid ~ #input5:valid ~ .valid-message {
  display: block;
}

8 trong mục thứ hai, điều đó sẽ được ưu tiên và sau đó di chuyển mục lưới thứ nhất 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 được tình huống này bằng cách chỉ định khoảng và nhịp 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 có thể duy trì hơn.

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

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

#input1:valid ~ #input2:valid ~ #input3:valid ~ #input4:valid ~ #input5:valid ~ .valid-message {
  display: block;
}

9 có biểu thức thông thường là 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 id="item1-1" class="crossword-board__item"
       type="text" minlength="1" maxlength="1"
       pattern="^[sS]{1}$" required value="">

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

.input#item1-1[value="s"],
.input#item1-1[value="S"] {
  /* do something... */
}

Nhưng điều này đã giành được công việc. Bộ chọn thuộc tính sẽ chọn phần tử dựa trên những gì 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 dùng đến phương pháp giả phạm

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

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

Làm nổi bật các manh mối trên di chuột

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

#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ 
#item1-4:valid ~ #item1-5:valid ~ #item1-6:valid ~ 
.crossword-board--highlight .crossword-board__item-highlight--across-1 {
  opacity: 1;
}

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

#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ 
#item1-4:valid ~ #item1-5:valid ~ #item1-6:valid ~ 
.crossword-board--highlight .crossword-board__item-highlight--across-1 {
  opacity: 1;
}

1 này là anh chị em của các yếu 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 một khối mã trước đó. Điều này giúp bạn dễ dàng chọn (các) đầu mối chính xác tùy thuộc vào phần tử đầu vào đang được tập trung/lơ lửng.

Đố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

#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ 
#item1-4:valid ~ #item1-5:valid ~ #item1-6:valid ~ 
.crossword-board--highlight .crossword-board__item-highlight--across-1 {
  opacity: 1;
}

5,

#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ 
#item1-4:valid ~ #item1-5:valid ~ #item1-6:valid ~ 
.crossword-board--highlight .crossword-board__item-highlight--across-1 {
  opacity: 1;
}

6 và

#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ 
#item1-4:valid ~ #item1-5:valid ~ #item1-6:valid ~ 
.crossword-board--highlight .crossword-board__item-highlight--across-1 {
  opacity: 1;
}

7 để làm nổi bật manh mối có 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.

#item1-1:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-1:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-1:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #ffff74;
}

Đánh số manh mối

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

<div class="crossword-board crossword-board--labels">
  <span id="label-1" class="crossword-board__item-label crossword-board__item-label--1">
  <span class="crossword-board__item-label-text">1span>span>
  <span id="label-2" class="crossword-board__item-label crossword-board__item-label--2">
  <span class="crossword-board__item-label-text">2span>span>

  

div>

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

.crossword-board__item-label--1 {
  grid-column: 1/1;
}

.crossword-board__item-label--2 {
  grid-column: 4/4;
}

/* etc... more items here... */

Mỗi số được đặt ở vị trí bắt đầu của nhóm các thành phần đầu vào liên quan (hoặc từ). Số lượng sau đó được thực hiện là chiều rộng và chiều cao của 1 lưới vuông để 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 lưới CSS khác nhau ở đây, nhưng tôi đã chọn làm theo cách này.

Kiểm tra hộp kiểm đối với ô vuông hợp lệ

Ở đầu ô chữ, bạn sẽ nhận thấy một hộp kiểm được dán nhãn kiểm tra cho các ô 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 nhất định có đúng không, ngay cả khi một từ nhất định là sai.

Tạo ra điều 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 làm nổi bật. Nó sử dụng hack hộp kiểm để chọn tất cả các thành phần đầu vào hợp lệ sau khi kiểm tra đã kiểm tra trong DOM.

Đây là mã:

#checkvaliditems:checked ~ .crossword-board-container .crossword-board__item:valid {
  background: #9aff67;
}

Sự 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 đã đến bao xa 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. Tôi cho một người có thể chờ đợi để thử và đẩy các tính năng mới khác đến giới hạn!

Nếu bạn muốn gây rối với CSS từ bài viết này, tôi đã đặt tất cả các ví dụ mã vào một bộ sưu tập Codepen. Câu đố ô chữ CSS làm việc đầy đủ có thể được tìm thấy ở đây.

Có một chương trình để tạo ra các câu đố ô chữ?

Làm thế nào để bạn nhúng một câu đố ô chữ?

Máy tính có thể giải trí ô chữ không?