Hướng dẫn how to make a game engine in javascript - cách tạo công cụ trò chơi bằng javascript

Điều này mất hàng giờ nghiên cứu.

Vào năm 2020, nếu bạn nghe thấy cụm từ động cơ trò chơi, bạn có thể tưởng tượng không thực tế hoặc thống nhất, hoặc thậm chí là Gamemaker Studio nếu bạn có một số lớp học. Có lẽ bạn không nghĩ rằng Vanilla JavaScript. Vì lý do chính đáng, JS không bao giờ có nghĩa là làm điều này. Với sự ra đời của HTML5, bạn có thể làm nhiều hơn nữa. Chúng tôi sẽ đi đến một cách siêng năng, và với nhiều lời phàn nàn, thực hiện một vòng lặp cơ bản cho phép logic và hoạt hình trò chơi cơ bản.

Điều đầu tiên chúng ta cần thực hiện là một chiếc đồng hồ. Các trò chơi dựa vào một chương trình lặp liên tục để kích hoạt các cuộc gọi chức năng khác nhau và đạt được chuyển động. May mắn là thực hiện một chiếc đồng hồ là tốt đẹp và đơn giản.

setInterval(fireClock, 16.66)

Được. Gọn gàng, nhưng những gì Fireclock? Đó là một chức năng mà chúng tôi sẽ xây dựng một sự kiện cho DOM cho phép chúng tôi nhận được đầu vào. Tại sao chúng ta bắn một sự kiện? Bởi vì JS không có chức năng sẵn có để xác định khi nào chính xác là một khóa được nhấn. Đây là vấn đề cho một trò chơi video. Vì vậy, những gì mà 16,66? Chúng tôi sẽ đến đó, hứa.

Đầu tiên, hãy để xây dựng sự kiện đó và người nghe sự kiện cho các máy ép chính.

const clockTick = new Event('clockTick')let up = false
let down = false
let left = false
let right = falsedocument.addEventListener("keydown", function(e){
    if (e.key === "ArrowUp"){
        up = true
    }
    if (e.key === "ArrowDown"){
        down= true
    }
    if (e.key === "ArrowLeft"){
        left= true
    }
    if (e.key === "ArrowRight"){
        right= true
    }
})
document.addEventListener("keyup", function(e){
    if (e.key === "ArrowUp"){
        up = false
    }
    if (e.key === "ArrowDown"){
        down= false
    }
    if (e.key === "ArrowLeft"){
        left= false
    }
    if (e.key === "ArrowRight"){
        right= false
    }
})function fireClock(){
    document.dispatchEvent(clockTick)
}setInterval(fireClock, 16.66)

Được. Nhưng tại sao theo cách đó? Bởi vì JS không thể lưu trữ liệu một khóa vẫn còn được nhấn hay không, nó có hai sự kiện. Hoặc là chìa khóa đang đi xuống, hoặc nó sắp tới. Nếu bạn hình dung nó, nếu khóa đó chưa xuất hiện, nó vẫn phải xuống. Đối với mục đích của chúng tôi, điều này nên xử lý những gì chúng tôi cần nó.

Bây giờ tại sao 16,66? Tiêu chuẩn công nghiệp cho số lần hiển thị làm mới mỗi giây là 60. Nếu bạn chia một giây cho 60, bạn sẽ nhận được một khung mới khoảng 16,66R giây. 16.66 sẽ làm cho mục đích của chúng tôi, ngay cả khi về mặt kỹ thuật, việc thiếu độ phân giải trong số đó có thể giới thiệu xé màn hình. Không có vấn đề gì lớn, chúng tôi có thể đã giành chiến thắng khi làm bất cứ điều gì thương mại với điều này.

Ok, nhưng làm thế nào để chúng ta vẽ mọi thứ? Tôi có thể giới thiệu thẻ Canvas.

Thẻ Canvas là một bổ sung mà HTML5 đã tạo sẽ vẽ một phần tử vào màn hình có thể được thao tác bằng JavaScript. Gọn gàng! Tôi khuyên bạn nên đọc nó ở đây. Trong khi đó, chúng tôi sẽ vẽ một trường với độ phân giải đã thiết lập để làm cho cuộc sống dễ dàng hơn một chút. Bây giờ chúng ta cần tạo một const để chúng ta có thể thao túng nó.

const canvas = document.getElementById("Main-Screen")

Được. Bây giờ chúng ta có thể làm mọi thứ với nó, nhưng làm thế nào? Canvas yêu cầu bạn xác định cách chúng tôi muốn thao túng nó. Dòng tiếp theo của chúng tôi sẽ trông như thế này.

const ctx = canvas.getContext("2d")

Điều này hoạt động như một bộ đệm mà chúng ta có thể truyền thông tin để chúng ta có thể vẽ lên khung vẽ. Mã của chúng tôi bây giờ sẽ trông như thế này.

const canvas = document.getElementById("Main-Screen")
const ctx = canvas.getContext("2d")
const clockTick = new Event('clockTick')let up = false
let down = false
let left = false
let right = falsedocument.addEventListener("keydown", function(e){
    if (e.key === "ArrowUp"){
        up = true
    }
    if (e.key === "ArrowDown"){
        down= true
    }
    if (e.key === "ArrowLeft"){
        left= true
    }
    if (e.key === "ArrowRight"){
        right= true
    }
})
document.addEventListener("keyup", function(e){
    if (e.key === "ArrowUp"){
        up = false
    }
    if (e.key === "ArrowDown"){
        down= false
    }
    if (e.key === "ArrowLeft"){
        left= false
    }
    if (e.key === "ArrowRight"){
        right= false
    }
})function fireClock(){
    document.dispatchEvent(clockTick)
}setInterval(fireClock, 16.66)

Bây giờ chúng ta cần thêm các lớp có thể hành động theo logic mà chúng ta xác định. Chúng tôi sẽ bắt đầu với một lớp thực thể.

class Entity {    constructor(x,y) {        this.x = x
        this.y = y
        this.fIndex = functionLoop.length
        functionLoop.push(this)
    }    destroy(){        functionLoop[fIndex] = false
    }
    loop() {    }}

Được. Gọn gàng, nhưng tại sao thực thể và những gì chức năng vòng lặp? Vòng lặp chức năng là một mảng chúng tôi xác định ở đầu mã của chúng tôi. Những gì nó làm? Trong chức năng Fireclock của chúng tôi, chúng tôi có thể xây dựng một vòng lặp cho vòng lặp thông qua vòng lặp chức năng và chạy các chức năng lớp. Trong một thế giới hoàn hảo, đây sẽ không phải là một mảng, mà là một đối tượng có các cặp giá trị chính. Các khóa sẽ có tên độc đáo về mặt chức năng và có thể được xáo trộn trong và ra khỏi bộ nhớ dễ dàng hơn. Nhưng với mục đích trình diễn, chúng tôi sẽ làm việc với một mảng.

Vì vậy, chức năng Fireclock của chúng ta trông như thế nào bây giờ?

function fireClock(){    document.dispatchEvent(clockTick)
    for (const object in functionLoop){
        if (functionLoop[object]){
             functionLoop[object].loop()
        }
    }}

Bây giờ, mỗi lần sự kiện đồng hồ được kích hoạt, mã được thực thi trong một vòng lặp. Tốt đẹp! Phức tạp nhưng tốt đẹp. Bây giờ chúng ta làm gì tốt? Nó thực sự tốt đẹp và đơn giản, bằng cách tạo ra một lớp kế thừa từ thực thể, chúng ta có thể có hành vi tiêu chuẩn và chèn của chúng ta vào chức năng lớp vòng lặp. Hãy để xây dựng một lớp học người chơi.

class Player extends Entity {    constructor(x,y) {
        super(x,y)
        this.img = document.getElementById('player-ship')
    }    loop(){
        this.x += (right) - (left)
        this.y += (down) - (up) 
        ctx.drawImage(img, this.x, this.y)
}

IMG trong tình huống này đề cập đến một hình ảnh mà chúng tôi giữ trong tệp HTML của chúng tôi với một thẻ ẩn ẩn.

Don Tiết lo lắng về tuyến đường chính xác mà tôi đã liệt kê ở đây, bạn có thể sử dụng tuyến đường của riêng bạn. Vấn đề là con tàu bây giờ, mọi chu kỳ, được vẽ vào khung vẽ. Bây giờ bạn có thể di chuyển tàu của bạn xung quanh màn hình bằng các phím mũi tên. Tất cả những gì bạn phải làm để thực hiện điều này là tạo ra một thể hiện mới của người chơi trước khi vòng lặp bắt đầu bắn.

Xin chúc mừng, đó là rất nhiều công việc cho một điều nhỏ nhặt phải không? Chúng tôi vẫn chưa thực hiện phát hiện va chạm, hoặc thực sự là bất cứ điều gì, nhưng chúng tôi đã thực hiện một số bước đi. Chúng ta đã học được gì?

A. Đây là một quá trình liên quan.

Tạo một công cụ trò chơi từ đầu có thể là một quá trình tẻ nhạt, bạn không thể thực hiện nhiều bước tiến nhanh chóng và nên mong đợi tất cả các khả năng xử lý logic sẽ tăng theo cấp số nhân phạm vi và quy mô của dự án của bạn. Nó là một điều kỳ diệu những điều này tồn tại cả.

B. JavaScript không phải là tốt nhất ở đây.

Nếu trò chơi của bạn không cần chạy trong trình duyệt một cách rõ ràng và bạn không muốn sử dụng bộ tính năng thống nhất mạnh mẽ hơn (chạy khung WebGL), bạn sẽ tốt hơn khi sử dụng nhiều công cụ có sẵn và có sẵn. Để đọc thêm, tôi khuyên bạn nên điều này cho Unity, điều này cho Unreal và loạt phim tuyệt vời này của Shaun Spalding cho Game Maker Studio 2.

C. Tạo một công cụ trò chơi có thể là một lợi ích lớn cho kiến ​​thức JavaScript của bạn.

Bạn có thể đã bắt gặp các khái niệm và ý tưởng trong tổng quan ngắn gọn này hoàn toàn xa lạ với bạn. Động cơ trò chơi chạy trên các khái niệm rất khác nhau so với hầu hết các ứng dụng web và việc học cả hai mặt của phương trình có thể cải thiện đáng kể khả năng giải quyết vấn đề của bạn. Nếu bạn thấy mình có nhu cầu cải thiện thuật toán của mình, hãy mở một dự án trò chơi video. Mỗi vấn đề đơn giản trong các trò chơi video đòi hỏi rất nhiều suy nghĩ. Để tập thể dục, hãy xem liệu bạn có thể tạo một thực thể kẻ thù và đăng nhập vào bảng điều khiển mỗi khi họ liên hệ với người chơi.

Vậy bạn có thể làm gì để cải thiện động cơ của mình?

Đối với một người bạn có thể triển khai các vòng thứ cấp trong lớp thực thể của mình. Nhiều động cơ trò chơi sẽ vẽ các thực thể trong một vòng lặp bespoke, một số chức năng bạn có thể xác định là:

Draw()

beforeLoop()

afterLoop()

beforeDestroy()

Sau đó, bạn có thể thêm Đệ tam cho các vòng lặp vào sự kiện Fireclock của mình và gọi các chức năng này trên từng thực thể. Miễn là bạn giữ số lượng thực thể của bạn tương đối nhỏ, bạn có thể thêm một tấn các vòng lặp này và tăng chức năng. Bạn cũng có thể thêm các loại đối tượng riêng biệt. Các hạt là một khởi đầu tốt, chúng chỉ cần hàm rút () và có thể chạy với tham số đã đặt mà không làm tắc nghẽn đường ống logic của bạn. Bạn cũng có thể thực hiện một đường ống xử lý nền với các sprites ốp lát, bằng cách gọi nó trước khi các cuộc gọi vẽ khác của bạn, bạn có thể đặt hình ảnh phía sau các sprites khác trên màn hình. Khả năng là vô tận, nhưng công việc là rất lớn.

Đây là một dự án ví dụ nhanh chóng và bẩn thỉu mà bạn có thể gây rối!

Tôi có thể tạo một công cụ trò chơi trong JavaScript không?

JavaScript có thể được sử dụng để chơi game không?

JavaScript có tốt cho các trò chơi 3D không?