Làm game javascript đơn giản

Trò chơi JavaScript Tic-Tac-Toe là một ví dụ đơn giản về các trò chơi bạn có thể lập trình bằng JavaScript. Trò chơi có thể được phát triển bằng nhiều ngôn ngữ lập trình, nhưng ngôn ngữ phổ biến nhất là C++, JavaScript và C#.  

Nếu bạn muốn vừa học vừa vui hoặc chỉ để giải tỏa sự nhàm chán của mình, thì việc tạo một trò chơi JavaScript và HTML/CSS đơn giản là giải pháp dành cho bạn. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn tạo một trò chơi JavaScript Tic-Tac-Toe đơn giản, thiết kế và cách chơi, sau này bạn có thể mở rộng thành một trò chơi chi tiết và khó hơn. Chúng tôi thực sự thích các trò chơi JavaScript đơn giản tại CodeBrainer vì chúng mang tính giáo dục và thú vị

Hướng dẫn được xây dựng trong ba phần. Trong phần HTML của mã của chúng tôi, chúng tôi sẽ gán các thẻ id và các lớp cho các thành phần của bảng của chúng tôi. JavaScript sẽ xử lý tất cả các tương tác trong trò chơi của chúng tôi. Cuối cùng, biểu định kiểu CSS sẽ cho phép chúng tôi cá nhân hóa giao diện trực quan của trò chơi.  

Tic-Tac-Toe là một trò chơi dành cho hai người chơi, trong đó những người chơi điền vào chín ô hình chữ nhật trống trong một bảng bằng chữ X hoặc chữ O khi đến lượt của họ. Khi ai đó sắp xếp thành công biển báo của họ theo chiều dọc hoặc chiều ngang mà không bị gián đoạn, người chơi đó sẽ thắng. Với sự giúp đỡ của chúng tôi, bạn có thể tạo một trò chơi trình duyệt nhiều người chơi mà bạn có thể chơi với một người bạn

Sự bắt đầu

Để luôn ngăn nắp và tối ưu hóa khi tạo trò chơi, bạn nên tách các phần mã khác nhau thành các tệp khác nhau. Đối với trò chơi JavaScript Tic-Tac-Toe của chúng tôi, chúng tôi sẽ chỉ sử dụng ba tệp khác nhau vì đây là một trò chơi đơn giản. trong chỉ mục. html, chúng tôi sẽ gán các lớp cho tất cả các hàm tạo riêng biệt của trò chơi của chúng tôi. Chúng tôi sẽ tạo phong cách cho trò chơi của chúng tôi theo phong cách. css. Cuối cùng nhưng không kém phần quan trọng, chúng tôi sẽ viết kịch bản của mình trong kịch bản. js.  

Trò chơi sẽ bắt đầu với ký tự x, do đó x sẽ tự động trở thành người chơi đầu tiên.  

HTML cho trò chơi JavaScript Tic-Tac-Toe

Bắt đầu với HTML. Đây là phần đơn giản và ngắn nhất trong mã của chúng tôi. Ở đây chúng tôi sẽ gán các lớp và id cho các phần tử HTML của chúng tôi. Vì trò chơi này được làm bằng một bảng có các ô bên trong nên chúng tôi sẽ xây dựng các ô bằng

yếu tố. Điều này có nghĩa là chúng tôi sẽ chỉ tạo các thùng chứa chung mà chúng tôi sẽ tạo kiểu sau. Bảng của chúng tôi sẽ đơn giản nhất có thể

Như bạn có thể đã biết, một trò chơi tic-tac-toe yêu cầu 9 ô (3x3). Thay vì một menu đầy đủ, chúng tôi sẽ chỉ thêm một thông báo ở cuối cùng với nút khởi động lại. Đây là những gì chúng ta sẽ tạo trong phần thân của HTML. Đây là giao diện HTML của chúng ta

Sao chép vào clipboard

Đầu được giữ đơn giản. Ở đây, chúng tôi chỉ đặt tiêu đề cho trang web của mình và kết nối chỉ mục. html vào biểu định kiểu và tập lệnh

Sao chép vào clipboard

Trong phần thân, chúng tôi đã tạo bảng của mình và đặt tên cho lớp và id của nó. Chúng tôi cũng đã gán lớp “ô” cho các ô bên trong bảng. Chúng tôi đã thêm một số chi tiết

các yếu tố cho thông điệp chiến thắng của chúng tôi và nút khởi động lại. Để tìm hiểu thêm một chút về kiến ​​thức cơ bản của HTML, hãy đọc bài "HTML là gì?"

JavaScript cho trò chơi Tic-Tac-Toe

Bây giờ chúng ta tạo mã cho trò chơi JavaScript Tic-Tac-Toe. Phần này là những gì làm cho trò chơi vui tươi. Nếu bạn là người hoàn toàn mới bắt đầu và cần giới thiệu về JavaScript, bạn nên xem bài viết của chúng tôi về JavaScript là gì

Sao chép vào clipboard

Trong một vài dòng đầu tiên của tập lệnh, chúng tôi tạo một biến cố định cho các ký tự x và o của mình. Bảng dưới đây trình bày sự kết hợp của các chuyển động để giành chiến thắng trong trò chơi. Các kết hợp này sẽ giúp chúng tôi xác định xem trò chơi đã kết thúc hay chưa bằng cách kiểm tra xem có bất kỳ kết hợp nào phù hợp với cách chơi hiện tại không

Sao chép vào clipboard

Ở đây, chúng tôi đã sử dụng các thẻ id mà chúng tôi đã chỉ định trong index.html để lưu các giá trị của tất cả các thành phần bảng, thông báo chiến thắng và nút khởi động lại. Đối với điều này, chúng tôi đã sử dụng phương pháp JavaScript getElementById(). Đối với phần tử văn bản tin nhắn chiến thắng, chúng tôi đã sử dụng phương thức querySelector() trả về phần tử đầu tiên trong tài liệu khớp với bộ chọn đã chỉ định. Chúng tôi cũng đã sử dụng dấu ngoặc vuông ([]) để nhắm mục tiêu thuộc tính data-cell

Sao chép vào clipboard

Trong phần này của tập lệnh, chúng tôi đã tạo một chức năng để bắt đầu trò chơi có tên là gameStart(). Chúng tôi đặt biến isPlayer_O_Turn thành false, nghĩa là người đầu tiên chơi sẽ là ký tự x. Phần còn lại của chức năng xóa tất cả các ký tự còn lại từ trò chơi trước đó. Ở đây chúng tôi cũng kích hoạt các sự kiện có thể xảy ra trên bảng của chúng tôi, đó là các lần nhấp chuột

Sao chép vào clipboard

Trong hàm handleClick, chúng tôi xử lý các sự kiện nhấp chuột cho các ô trong bảng. Hầu hết các chức năng được gọi ở đây sẽ được giải thích riêng. Nói tóm lại, biến currentClass lưu ký tự (X hoặc O), hiện đang đến lượt nó. Một chức năng khác được sử dụng trong câu lệnh if để kiểm tra xem ai đó đã thắng hay chưa bằng cách so sánh các kết hợp chiến thắng với trò chơi. Cách này xác định có hòa hay không

Sao chép vào clipboard

Hàm gameEnd() đã được đề cập trước đây. Đây là chức năng kết thúc trò chơi. Hàm có thể hiển thị thông báo người chiến thắng chỉ định nhân vật nào đã thắng hoặc thông báo cho biết không có người chiến thắng – đó là một trận hòa, tùy thuộc vào kết quả của câu lệnh if.  

Sao chép vào clipboard

Một chức năng khác đã được đề cập trước đó là chức năng getElementById()0. Cái này chỉ trả về giá trị trong trường hợp hòa, nghĩa là không có người chơi nào thắng. Ngoài ra còn có một phương thức hay được ẩn trong hàm getElementById()1 có tên là getElementById()2 để kiểm tra tất cả các phần tử của một mảng để xác nhận một điều kiện bằng cách trả về một giá trị boolean. Nó thường được định nghĩa là một mảng kiểm tra các phần tử của một mảng và trả về true (1) nếu chúng vượt qua bài kiểm tra

Sao chép vào clipboard

getElementById()3 và getElementById()4 là hai hàm ngắn và đơn giản. getElementById()3 đặt ký tự vào ô, currentClass là X hoặc O tùy thuộc vào lượt của ai. Chức năng thứ hai là chức năng hoán đổi lượt sau khi ký tự được đặt trong một ô

Làm cho trò chơi JavaScript Tic-Tac-Toe tương tác hơn

Trong phần mã JavaScript sắp tới, chúng ta sẽ đặt hiệu ứng con trỏ di chuột lên bảng. Điều này sẽ giúp người chơi dễ dàng nhắm vào các ô hơn. Nó cũng làm cho trò chơi của chúng tôi phản ứng nhanh hơn một chút

Sao chép vào clipboard

Vì chúng tôi muốn một ký tự xuất hiện trong các ô trong khi di chuột qua chúng bằng con trỏ chuột trước khi đặt chúng, nên hàm setBoardHoverClass() sẽ đảm nhận phần tương tác của ký tự đó. Các yếu tố tương tác sẽ làm cho trò chơi JavaScript Tic-Tac-Toe của chúng ta trở nên thú vị hơn

Sao chép vào clipboard

Và cuối cùng trong JavaScript của chúng tôi là chức năng getElementById()7 được gọi để kiểm tra xem bảng của chúng tôi có khớp với bất kỳ kết hợp chiến thắng nào không

CSS - tạo kiểu cho trò chơi của chúng tôi

Phần mã sắp tới của chúng tôi là nơi bạn có thể thỏa sức tưởng tượng và sáng tạo. Trong biểu định kiểu, chúng tôi sẽ sử dụng các thẻ id và các lớp để cá nhân hóa hình ảnh của trò chơi của chúng tôi. Tất cả các cách từ đường viền và độ rộng của dòng đến màu sắc và kích thước văn bản. Vì phần mã này có thể được cá nhân hóa hoàn toàn nên bạn có thể viết mã từ đầu, phù hợp với sở thích của riêng bạn hoặc sử dụng ví dụ của chúng tôi. Bạn cũng có thể chỉ cần thay đổi màu sắc, kích thước, phông chữ, v.v. nếu bạn sẽ sử dụng ví dụ của chúng tôi

Vì mục đích của trò chơi, chúng tôi cho rằng bạn biết một chút về CSS, nhưng nếu bạn muốn tìm hiểu thêm về CSS, bạn có thể xem bài đăng trên blog của chúng tôi về CSS là gì

Sao chép vào clipboard

Chúng tôi sử dụng phần tử getElementById()8 để đặt các biến để sử dụng sau. Các biến này đặt màu của X và O và chiều rộng của dấu X. Xem cá nhân hóa bên dưới để biết cách bạn có thể làm cho Tic-Tac-Toe phù hợp hơn với ý thích của mình

Sao chép vào clipboard

Bắt đầu với việc trực quan hóa HTML của chúng ta, getElementById()9 tạo khoảng cách giữa các phần tử với đường viền được xác định, ở đây nó được sử dụng để tạo đường viền bằng 0 cho toàn bộ màn hình. Sau đó, chúng tôi mô tả phần tử bằng tên lớp querySelector()0 của chúng tôi, chỉ định chiều rộng, chiều cao, cách thức và vị trí của nó được hiển thị. querySelector()1 là một thuộc tính ít được biết đến hơn (đây là một bài viết hay về grid-template-columns), vì vậy để đơn giản, nó chỉ định số lượng và chiều rộng/s của các cột trong bố cục lưới. Bằng cách này, chúng tôi tạo ra 9 ô để chơi

Sao chép vào clipboard

Ở đây chúng tôi chỉ định cách chúng tôi muốn các ô của mình trông như thế nào. Bắt đầu với querySelector()2 và querySelector()3, tiếp theo là querySelector()2 và querySelector()5 của biên giới, querySelector()6, querySelector()7 và querySelector()8

Tiếp theo là làm cho bảng của chúng ta trông giống trò chơi Tic-Tac-Toe hơn. IChúng tôi loại trừ các ô bên ngoài có đường viền đầy đủ, vì vậy bảng của chúng tôi có thể trông như thế này

Đối với một ô nhất định, chúng tôi chỉ định rằng không được có đường viền. Chúng tôi chọn một ô bằng cách sử dụng bộ chọn querySelector()9 nơi bạn viết số của ô để chọn phần tử/ô đó

Sao chép vào clipboard

Ở đây, chúng tôi xác định rằng không có hiệu ứng di chuột nếu ô đã được điền bằng một trong hai ký tự của chúng tôi

Sao chép vào clipboard

Vẽ dấu chéo cho người chơi

Vẽ một chữ thập cần một chút ma thuật CSS. Sử dụng data-cell0, chúng tôi xác định màu theo 3 bước trắng, xanh lam (đối với chữ thập) và trắng một lần nữa. Nhưng hãy cẩn thận ngay từ đầu, chúng ta cũng xác định góc độ bằng cách sử dụng các từ data-cell1 mà tại đó mọi việc xảy ra. Cài đặt nền ở đó để tạo khoảng cách và căn giữa chữ thập

Sao chép vào clipboard

Đối với màu sắc, chúng tôi sử dụng biến của chúng tôi data-cell2. Bạn có thể thấy rằng chúng tôi đã sử dụng hàm data-cell3 cho điều đó (đọc thêm về hàm var). Có một chức năng khác gọi là data-cell4 (đọc về chức năng calc). Đây là một chức năng đặc biệt vì nó lấy tất cả các loại phép đo (như px, pt, %) và tính tổng chúng lại với nhau

Trong trường hợp ô trống, hiệu ứng di chuột sẽ sử dụng một biến cho màu có tên là data-cell5 và nếu chúng ta đóng dấu x hoặc o vào đó, nó sẽ là data-cell2. Ở đây bạn có thể thấy dấu x được đóng dấu bên cạnh hiệu ứng lơ lửng của o

Đây là mã cho X không di chuột. Chỉ thay đổi là tên của màu sắc

Sao chép vào clipboard

Vẽ một dấu hiệu vòng tròn cho một người chơi

Vẽ một vòng tròn dễ dàng hơn nhiều, chỉ mất một dòng. Nhưng nguyên tắc tương tự được sử dụng, chỉ với radial-gradient

Sao chép vào clipboard

Lần này rõ ràng hơn về cách chúng ta sử dụng màu sắc khi biển báo đang lơ lửng và khi biển báo được "đặt trong đá"

Tạo kiểu cho một tin nhắn chiến thắng

Tạo kiểu cho một thông điệp chiến thắng đơn giản hơn. Ở đây chúng tôi đặt phông chữ và màu sắc cho văn bản. Làm cho nút hơi tròn. Và thêm hiệu ứng di chuột ở cuối

Hiển thị kết quả trò chơi

Gần đến vạch đích, bây giờ chúng ta chơi với thông điệp thắng hoặc hòa. Ở đây, chúng tôi căn giữa nó trên màn hình và đặt màu thành màu trắng, vì sau khi trò chơi kết thúc, nền sẽ chuyển sang màu đen

Đây là mã cho tin nhắn

Sao chép vào clipboard

Và đây là mã cho nút có thêm hiệu ứng lơ lửng

Sao chép vào clipboard

Tất cả trông giống như thế này

Lớp cuối cùng dành cho cách các yếu tố được vẽ trong thông điệp chiến thắng

Sao chép vào clipboard

Cá nhân hóa trò chơi bằng cách thay đổi CSS

Sau khi làm theo hướng dẫn về cách tạo trò chơi Tic-Tac-Toe JavaScript, giờ đây, bạn có thể tự mình chọn màu sắc của các thành phần trò chơi và biến nó thành của mình. Đây là giao diện sau khi nền và các ô đã được thay đổi thành màu cam/vàng

Bạn có thể thay đổi màu bằng các biến data-cell5 và data-cell2. Nếu bạn muốn thay đổi querySelector()5 của đường viền, hãy thay đổi màu đường viền của ô

La lên

Chúng tôi cũng muốn gửi lời cảm ơn tới người (rất tiếc là không có tên nào được đề cập) đã viết mã mà dự án của chúng tôi dựa trên đó. Chúng tôi đã thay đổi khá nhiều và làm cho nó phù hợp hơn cho người mới bắt đầu. Nhưng nó vẫn là một đoạn mã đẹp và bạn có thể kiểm tra các dự án khác mà họ có trên trang của họ

Sự kết luận

Trong CodeBrainer, chúng tôi thực sự thích tạo và chơi trò chơi. Đó là lý do tại sao chúng tôi rất hào hứng viết một bài viết về cách tạo trò chơi JavaScript Tic-Tac-Toe, trò chơi này đủ đơn giản để trở thành một dự án thú vị cho cả sinh viên của chúng tôi hoặc chỉ những người đang tự học.

Chúng tôi hy vọng sẽ truyền cảm hứng cho mọi người đồng thời giới thiệu cho họ về cả trò chơi và phát triển web. Với JavaScript, HTML và CSS, bạn có thể tự do khám phá và thử nghiệm trong khi tạo một trò chơi đơn giản nhưng vẫn tiến bộ

Vui lòng chia sẻ với chúng tôi bất kỳ điều chỉnh hoặc lời khuyên nào về bài viết này hoặc nếu bạn quan tâm đến việc đăng ký một số khóa học của chúng tôi. Chúng tôi luôn rộng mở chào đón cả người mới bắt đầu và nhà phát triển có kinh nghiệm

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

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

JavaScript có thể tạo trò chơi AAA không?

Bạn có thể tạo một trò chơi chỉ bằng HTML không?