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

HTML5 giới thiệu nhiều tính năng tiên tiến như đồ họa 2D và 3D, API âm thanh chất lượng và lưu trữ nội dung ngoại tuyến, cho phép các nhà phát triển trò chơi xây dựng các trò chơi hấp dẫn theo cách tương tác. HTML5 cho phép phát triển các trò chơi dễ dàng thích ứng với các độ phân giải, kích thước màn hình, tỷ lệ khung hình và hướng dẫn khác nhau. So sánh với các công nghệ phức tạp khác như Objective - C, C# và Visual Studio, HTML5 dễ dàng và hiệu quả hơn nhiều cho việc phát triển trò chơi.  

Giống như những điều này, có rất nhiều lý do khác để phát triển trò chơi với HTML5.  

•    Một trong những lợi thế khác biệt nhất của việc phát triển trò chơi trong HTML5 là khả năng tương thích phổ biến. HTML5 hoạt động như một nền tảng chéo. Có thể truy cập các trò chơi được xây dựng bằng HTML5 trên điện thoại di động, PC, máy tính xách tay và các thiết bị thông minh khác. Các nhà phát triển chỉ cần suy nghĩ về lối chơi và cách trò chơi sẽ phản ứng với các kích thước màn hình và loại đầu vào khác nhau, đồng thời phải thực hiện một số cá nhân hóa trong mã trên mỗi nền tảng, nhưng nó tốt hơn nhiều so với các trò chơi chuyển hoàn toàn. Trò chơi cũng có thể được triển khai dưới dạng trò chơi web cục bộ và có thể được xem trong trình duyệt.  

•    HTML5 là một công cụ trò chơi mã nguồn mở với tất cả các công cụ cần thiết để tạo trò chơi. Công cụ này cực kỳ linh hoạt và tự hào có nhiều API để cung cấp cho người dùng cuối trải nghiệm chơi trò chơi thực sự.  

•    HTML5 cung cấp nhiều công cụ trò chơi JavaScript và khung để phát triển trò chơi 2D, chẳng hạn như Contstruct2, Three. js, Chơi Canvas, Turbulenz, Đá. js. , Minko và Unity5. Những công cụ trò chơi này giúp phát triển trò chơi 2D dễ dàng hơn. HTML5 cho phép truy cập tất cả các công nghệ này, không giống như Flash. Hơn nữa, làm game 2D trên HTML5 không hề tẻ nhạt chút nào

•    Việc phát triển trò chơi trong HTML5 rất nhanh. Các nhà phát triển không phải đợi quá trình biên dịch, cập nhật và gỡ lỗi trong thời gian thực và sau khi hoàn thành trò chơi, họ có thể tung ra bản cập nhật ngay lập tức. HTML5 cung cấp các API cho WebGL, Canvas và Web Audio, đây là những yếu tố cần thiết để xây dựng các trò chơi nâng cao tương thích để chạy trong trình duyệt web.  

•    Phần tử Canvas trong HTML5 là một phần tử mà qua đó bất kỳ hình dạng nào cũng có thể được vẽ ở dạng 3D. Phần tử canvas chuyển đổi hình dạng thành hình ảnh 3D. Các hình ảnh có thể được sử dụng thông qua lập trình hoặc được thêm trực tiếp dưới dạng đồ họa trong phần tử Canvas. Mặc dù Canvas không được hỗ trợ bởi các phiên bản trình duyệt cũ hơn nhưng tất cả các trình duyệt mới đang được sử dụng rộng rãi đều hỗ trợ phần tử canvas. Ngoài ra, để hiển thị và giới thiệu các họa tiết và vật lý cho trò chơi, các khung API tùy chỉnh luôn có sẵn.  

•    Một tính năng mang tính cách mạng khác của HTML5 là tính năng này có thể hoạt động ngoại tuyến. Do đó, các trò chơi được phát triển trong HTML 5 có thể chơi ngoại tuyến mà không cần kết nối web

•    Trò chơi HTML5 cũng dễ sử dụng nhất đối với người dùng và họ không phải cài đặt cũng như tải xuống các plugin khác nhau để chơi trò chơi 2D trong trình duyệt.  

Một tính năng rất tiên tiến của HTML5 là bất kỳ cập nhật nào đối với chương trình hoặc mã hóa đều được cấu hình tự động trong tất cả các ứng dụng trực tuyến cụ thể. Ngay sau khi thay đổi được thực hiện, nó sẽ được áp dụng cho mọi người dùng và nền tảng nơi trò chơi được chơi. Do đó, tính năng nâng cao này làm cho HTML 5 trở nên rất khác biệt so với các phiên bản HTML trước đó. Có nhiều trò chơi phổ biến được xây dựng bằng HTML5 như HexGL, CrossCode, Sketch out, Bejeweled và Gods Will Be watching.  

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

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;
}

0,

#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ó một 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 đó thêm hai div bên trong nó với các ID

#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

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 (

#character{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px; //game height - character height (200 - 50)
}

0)

#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

#character{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px; //game height - character height (200 - 50)
}

1 là

#character{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px; //game height - character height (200 - 50)
}

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

#character{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px; //game height - character height (200 - 50)
}

3 và

#character{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px; //game height - character height (200 - 50)
}

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

#character{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px; //game height - character height (200 - 50)
}

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

@keyframes jump{
    0%{top: 150px;}
    30%{top: 100px;}
    70%{top: 100px;}
    100%{top: 150px;}
}

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

#character{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px; //game height - character height (200 - 50)
}

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

.animate{
    animation: jump 300ms linear;
}

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

#character{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px; //game height - character height (200 - 50)
}

6 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, hãy tạo một hàm có tên là

#character{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px; //game height - character height (200 - 50)
}

8 để thêm lớp

#character{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px; //game height - character height (200 - 50)
}

6 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à

@keyframes jump{
    0%{top: 150px;}
    30%{top: 100px;}
    70%{top: 100px;}
    100%{top: 150px;}
}

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

@keyframes jump{
    0%{top: 150px;}
    30%{top: 100px;}
    70%{top: 100px;}
    100%{top: 150px;}
}

2 vào

#character{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px; //game height - character height (200 - 50)
}

8 để chạy

@keyframes jump{
    0%{top: 150px;}
    30%{top: 100px;}
    70%{top: 100px;}
    100%{top: 150px;}
}

1 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ó

var character = document.getElementById("character");
document.addEventListener("click",jump);
function jump(){
    character.classList.add("animate");
    setTimeout(removeJump,300); //300ms = length of animation
};
function removeJump(){
    character.classList.remove("animate");
}

Đ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

#character{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px; //game height - character height (200 - 50)
}

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

if(character.classList == "animate"){return;}

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

#block{
    width: 20px;
    height: 20px;
    background-color: blue;
    position: relative;
    top: 130px; //game height - character height - block height (200 - 50 - 20)
    left: 480px; //game width - block width (500 - 20)
    animation: block 1s infinite linear;
}

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

@keyframes block{
    0%{left: 500px} 
    100%{left: -20px}
}

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à

@keyframes jump{
    0%{top: 150px;}
    30%{top: 100px;}
    70%{top: 100px;}
    100%{top: 150px;}
}

6 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à

@keyframes jump{
    0%{top: 150px;}
    30%{top: 100px;}
    70%{top: 100px;}
    100%{top: 150px;}
}

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

@keyframes jump{
    0%{top: 150px;}
    30%{top: 100px;}
    70%{top: 100px;}
    100%{top: 150px;}
}

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

@keyframes jump{
    0%{top: 150px;}
    30%{top: 100px;}
    70%{top: 100px;}
    100%{top: 150px;}
}

9 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ị chẳng hạn như

.animate{
    animation: jump 300ms linear;
}

0. 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

.animate{
    animation: jump 300ms linear;
}

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

Tạo một câu lệnh

.animate{
    animation: jump 300ms linear;
}

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

.animate{
    animation: jump 300ms linear;
}

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

@keyframes jump{
    0%{top: 150px;}
    30%{top: 100px;}
    70%{top: 100px;}
    100%{top: 150px;}
}

7 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

.animate{
    animation: jump 300ms linear;
}

5

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

.animate{
    animation: jump 300ms linear;
}

6 cứ sau 10 mili giây

var block = document.getElementById("block");
function checkDead(){
    let characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
    let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
    if(blockLeft<20 && blockLeft>-20 && characterTop>=130){
        alert("Game over");
    }
}

setInterval(checkDead, 10);

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ế

HTML có được sử dụng trong phát triển trò chơi không?

Bạn có thể sử dụng HTML trong trò chơi không?

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