Trò chơi nào sử dụng mã html?

Vì vậy, bạn muốn sử dụng kiến thức cơ bản của mình về phát triển web để tạo ra thứ gì đó thú vị hơn một ứng dụng việc cần làm. Trò chơi là một trong những dự án tốt nhất mà bạn có thể tạo, bởi vì chúng rất dễ được người dùng cuối yêu thích và rất thú vị khi thực hiện. Có những thư viện JavaScript được tạo sẵn để phát triển trò chơi, nhưng tôi thích tạo từ đầu để tôi có thể hiểu mọi thứ hoàn chỉnh

Nội dung chính Show

Đăng NhậpTên Lửa. Gỡ lỗi JavaScript dễ dàng hơn bằng cách hiểu ngữ cảnh
Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn
Công cụ trò chơi nào sử dụng HTML?
HTML có thể được sử dụng cho các trò chơi không?
HTML có tốt cho việc mã hóa trò chơi không?
HTML được sử dụng như thế nào trong phát triển trò chơi?

Còn trò chơi nào đại diện cho sự phát triển web tốt hơn trò chơi khủng long trên Chrome mà bạn chơi khi mất kết nối internet? . Nó trông không hoàn toàn giống nhau, nhưng nó hoạt động giống nhau. Nếu bạn thực sự muốn, bạn có thể tạo kiểu cho nó khi hoàn tất

Để bắt đầu mã hóa trò chơi, hãy tạo một thư mục mới trong tài liệu của bạn. Sử dụng trình soạn thảo văn bản yêu thích của bạn để mở thư mục đó, sau đó tạo ba tệp mới và đặt tên cho chúng.

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

1 và

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

2. Có thể thực hiện mọi thứ trong một tệp với HTML5, nhưng nó có tổ chức hơn để giữ mọi thứ riêng biệt

Tệp

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

0 của chúng tôi sẽ rất đơn giản. khi bạn có bố cục HTML cơ bản, hãy tạo một div có ID

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

4, sau đó tạo thêm hai div bên trong có ID là

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

5 và

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

6. Nhân vật sẽ là khủng long, và khối sẽ là xương rồng tiến về phía chúng ta

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jump Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="game">
        <div id="character"></div>
        <div id="block"></div>
    </div>
<script src="script.js"></script>
</body>
</html>

Tiếp theo, chuyển đến tệp CSS và bắt đầu áp dụng các kiểu cho hai

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

7 mà chúng ta vừa tạo. Đầu tiên, chúng ta sẽ bắt đầu với trò chơi

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

7. Chọn phần tử theo

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

9 của nó, được biểu thị bằng ký hiệu băm (

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

10)

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

Tiếp theo, chúng ta sẽ tạo kiểu div cho nhân vật của mình. Chúng ta phải khai báo

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

11 là

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

12 vì các thuộc tính vị trí như

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

13 và

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

14 chỉ áp dụng cho các phần tử được định vị

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

Tạo hoạt ảnh khung hình chính có tên jump. Hoạt ảnh này sẽ làm cho vị trí trên cùng trượt lên 50px rồi trượt xuống dưới

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

Tiếp theo, chúng ta sẽ tạo một lớp mới có tên là

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

15, áp dụng hoạt ảnh nhảy

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

Chúng tôi sẽ sử dụng JavaScript để thêm lớp

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

16 vào ký tự của chúng tôi bất cứ khi nào bạn nhấp chuột

Trong tệp

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

2, tạo một hàm có tên là

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

18 để thêm lớp

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

16 vào ký tự

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

7. Tạo trình xử lý sự kiện lắng nghe người dùng nhấp, sau đó thực hiện chức năng nhảy

Tạo một hàm khác có tên là

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

81 xóa lớp animate. Sau đó, thêm hàm

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

82 vào

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

18 để chạy

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

81 khi hoạt ảnh kết thúc. Hoạt hình sẽ không chạy lại trừ khi chúng tôi xóa nó

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

Điều này hoạt động, nhưng có vẻ như nó bị trục trặc nếu người dùng nhấp vào trong khi nó đang nhảy. Để khắc phục điều đó, hãy thêm dòng bên dưới vào đầu

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

18. Nó sẽ ngăn chức năng làm bất cứ điều gì nếu hoạt ảnh đang chạy

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

Bây giờ, chúng ta sẽ quay lại tệp CSS của mình và bắt đầu tạo kiểu cho khối div

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

Chúng tôi chưa tạo hoạt ảnh khối, vì vậy hãy tạo hoạt ảnh để làm cho khối trượt từ phải sang trái

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

Bây giờ chúng tôi có thể nhảy, nhưng chúng tôi phải kết thúc trò chơi nếu chúng tôi va vào khối. Tạo một hàm có tên là

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

86 lấy vị trí của khối và ký tự, sau đó đánh giá xem chúng có nằm trên nhau không. Nếu có, sau đó kết thúc trò chơi

Tạo một biến có tên là

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

87 bằng với giá trị cao nhất của ký tự div.

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

88 sẽ trả về tất cả các giá trị CSS được liên kết với một phần tử và

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

89 chỉ định thuộc tính mà bạn muốn giá trị từ đó

Bây giờ, điều này sẽ trả về một chuỗi có giá trị như

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

00. Chúng tôi chỉ muốn giá trị số, vì vậy chúng tôi sẽ gói mọi thứ bên trong hàm

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

01 để hàm trả về giá trị dưới dạng số nguyên

Tạo câu lệnh

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

02 kiểm tra xem giá trị của

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

03 có nằm trong khoảng từ -20px đến 20px và giá trị của

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

87 có lớn hơn 130px hay không. Nếu đúng như vậy, điều đó có nghĩa là chúng chồng lên nhau và trò chơi kết thúc. Vì vậy, chúng tôi sẽ đặt cảnh báo ________ 205

Tạo một hàm khoảng thời gian chạy hàm

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

06 cứ sau 10 mili giây

#game{
    width: 500px;
    height: 200px;
    border: 1px solid black;
    margin: auto;
}

Bây giờ bạn có một trò chơi hoạt động đầy đủ. Đây là một dự án tuyệt vời để chia sẻ với những người không phải là nhà phát triển, bởi vì họ sẽ có thể đánh giá cao hơn những gì bạn đã học được

Có một liên kết đến GitHub của tôi nếu bạn muốn sao chép mã. Bạn cũng có thể xem video YouTube của tôi nếu bạn học trực quan tốt hơn

Đăng NhậpTên Lửa. Gỡ lỗi JavaScript dễ dàng hơn bằng cách hiểu ngữ cảnh

Gỡ lỗi mã luôn là một công việc tẻ nhạt. Nhưng bạn càng hiểu lỗi của mình thì càng dễ sửa chúng

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

LogRocket cho phép bạn hiểu những lỗi này theo những cách mới và độc đáo. Giải pháp giám sát giao diện người dùng của chúng tôi theo dõi mức độ tương tác của người dùng với giao diện người dùng JavaScript của bạn để cung cấp cho bạn khả năng tìm ra chính xác những gì người dùng đã làm dẫn đến lỗi

LogRocket ghi nhật ký bảng điều khiển, thời gian tải trang, dấu vết ngăn xếp, yêu cầu/phản hồi mạng chậm với tiêu đề + nội dung, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Hiểu tác động của mã JavaScript của bạn sẽ không bao giờ dễ dàng hơn thế

Công cụ trò chơi nào sử dụng HTML?

6 công cụ trò chơi JavaScript và HTML5 hàng đầu .

Số ba. js

tỳ hưu. js

phaser

Ba-by-lôn. js

Vấn đề. js

ChơiCanvas

HTML có thể được sử dụng cho các trò chơi không?

Canvas HTML . Phần tử

The

. The

HTML có tốt cho việc mã hóa trò chơi không?

Có, HTML, CSS và JavaScript có thể khá tốt cho việc phát triển trò chơi, đặc biệt . Một lợi ích lớn của nó là về cơ bản, tất cả các thiết bị máy tính đều có thể chơi các trò chơi được triển khai bằng JS và HTML.

HTML được sử dụng như thế nào trong phát triển trò chơi?

Nói một cách đơn giản, Phát triển trò chơi HTML 5 là cái mà chúng tôi gọi là phát triển trò chơi chạy trên trình duyệt, sử dụng chính xác các ngôn ngữ và công cụ phát triển giao diện người dùng. Bằng cách biết HTML, CSS và JavaScript, bạn có thể tạo các trò chơi đơn giản có thể chạy trên mọi nền tảng được trang bị trình duyệt .