Tic tac toe CSS
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#. Show
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-ToeBắ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 thành phần. Đ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 clipboardTrong 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-ToeBâ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 clipboardTrong 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 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à Trong hàm Hàm Một chức năng khác đã được đề cập trước đó là chức năng
Làm cho trò chơi JavaScript Tic-Tac-Toe tương tác hơnTrong 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 clipboardVì 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 clipboardVà cuối cùng trong JavaScript của chúng tôi là chức năng CSS - tạo kiểu cho trò chơi của chúng tôiPhầ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 clipboardChúng tôi sử dụng phần tử Bắt đầu với việc trực quan hóa HTML của chúng ta, Ở đâ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 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 Ở đâ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 clipboardVẽ dấu chéo cho người chơiVẽ một chữ thập cần một chút ma thuật CSS. Sử dụng Đối với màu sắc, chúng tôi sử dụng biến của chúng tôi 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à Đâ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 clipboardVẽ một dấu hiệu vòng tròn cho một người chơiVẽ 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 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ắngTạ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ơiGầ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 clipboardVà đây là mã cho nút có thêm hiệu ứng lơ lửng Sao chép vào clipboardTấ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 clipboardCá nhân hóa trò chơi bằng cách thay đổi CSSSau 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 La lênChú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ọ Phần kết luậnTrong 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 Làm thế nào để tạo ra một ticXem trước trò chơi Tic Tac Toe. -
. ở đây id div là chi tiết và id nhãn là kết quả. Here the div id is the banner to which we are adding the title Tic Tac Toe and then the div is of opinion is X or O button we want to choose one button then another div id is the class that is choice msg. here the div id is the detail and the label id is the result.
làm thế nào để làm cho ticThứ tự chung của các bước triển khai. . Tạo một bảng Tic Tac Toe và tô nó bằng dấu gạch ngang Tạo một chức năng vẽ bảng như một hình vuông Theo dõi lượt của người chơi và biểu tượng họ đang sử dụng Tiếp tục yêu cầu người dùng nhập hàng và cột cho đến khi chúng hợp lệ Thuật toán nào tốt nhất cho ticThuật toán Minimax là một quy tắc quyết định được xây dựng cho các trò chơi có tổng bằng 0 của 2 người chơi (Tic-Tac-Toe, Cờ vua, Cờ vây, v.v. ). Thuật toán này đi trước một vài bước và đặt mình vào vị trí của đối thủ. |