Hướng dẫn can i create a game using html css and javascript? - tôi có thể tạo trò chơi bằng html css và javascript không?

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

Còn trò chơi nào tốt hơn để đại diện cho sự phát triển web hơn trò chơi khủng long Chrome mà bạn chơi khi bạn mất kết nối internet? Nó có một trò chơi thú vị, và nó dễ dàng tạo lại mã. Nó không giống hệt 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 bạn hoàn thành!

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

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

Tệp

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

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

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

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

Tiếp theo, đi qua 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;
}

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

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

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

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

Tiếp theo, chúng tôi tạo kiểu cho nhân vật Div của chúng tôi. Chúng ta phải khai báo ____ 21 & nbsp; là

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

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

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

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

Tạo một hình ảnh động KeyFrame gọi là Jump. Hoạt hình này sẽ làm cho vị trí trên cùng trượt lên 50px và sau đó trượt xuống.

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

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

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

.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)
}

Trong tệp

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

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

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

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

Tạo một chức năng khác gọi là ________ 31 & nbsp; loại bỏ lớp Animate. Sau đó thêm hàm

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

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

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 dường như nó bị trục trặc nếu người dùng nhấp vào trong khi nó hiệ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)
}

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

Bây giờ, chúng tôi 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 đã tạo ra hình ảnh động khối, vì vậy hãy tạo một hình ảnh động để làm cho khối trượt từ bên 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 tấn công. Tạo một hàm gọi là

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

Tạo một biến gọi là

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

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

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

.animate{
    animation: jump 300ms linear;
}

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

.animate{
    animation: jump 300ms linear;
}

.animate{
    animation: jump 300ms linear;
}

Tạo hàm khoảng & nbsp; chạy hàm

.animate{
    animation: jump 300ms linear;
}

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 đầy đủ chức năng. Đây là một dự án tuyệt vời để chia sẻ với những người không 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!

Logrocket: Debug Lỗi JavaScript dễ dàng hơn bằng cách hiểu bối cảnh

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

Logrocket cho phép bạn hiểu các lỗi này theo những cách mới và độc đáo. Giải pháp giám sát frontend của chúng tôi theo dõi sự tham gia của người dùng với các mặt tiền JavaScript của bạn để cung cấp cho bạn khả năng tìm hiểu chính xác những gì người dùng đã làm dẫn đến lỗi.

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

Hãy thử nó miễn phí.