Petua Pantas: Cara Membuat Game Loop di JavaScript

mata teras

JavaScript Game Loop adalah teknik yang digunakan untuk memberikan animasi dan permainan yang keadaannya berubah dari masa ke masa. Ia melibatkan fungsi berjalan berulang kali yang menerima input pengguna, mengemas kini keadaan masa berlalu, dan kemudian menarik bingkai.
• Kaedah
• adalah API untuk memberikan animasi yang meminta penyemak imbas untuk memanggil fungsi yang ditentukan secepat mungkin sebelum mengecat semula seterusnya, dan menyediakan cap waktu untuk fungsi panggil balik untuk memulakan pelaksanaan. requestAnimationFrame
input pengguna boleh diintegrasikan ke dalam gelung permainan dengan mengesan kekunci yang ditekan, mendengar untuk semua acara
• dan keydown, dan mengemas kini kedudukan X dan Y berdasarkan kunci yang ditekan, dan menyimpan objek dalam sempadan. keyup
Animasi yang lebih kompleks boleh dibuat dengan menyimpan vektor tambahan untuk pergerakan dan putaran, mengemas kini putaran berdasarkan kekunci kiri dan kanan, mengemas kini pergerakan berdasarkan kunci dan putaran ke atas dan ke bawah, dan mengemas kini kedudukan berdasarkan vektor pergerakan dan sempadan kanvas.

JavaScript Game Loop adalah teknik yang digunakan untuk memberikan animasi dan permainan yang mengubah keadaan dari masa ke masa. Pada terasnya adalah fungsi yang berjalan sebanyak mungkin, yang menerima input pengguna, mengemas kini keadaan masa berlalu, dan kemudian menarik bingkai.

Artikel ini akan memperkenalkan secara ringkas bagaimana teknologi asas ini berfungsi dan membantu anda mula membuat permainan dan animasi berasaskan pelayar anda sendiri.

Berikut adalah contoh gelung permainan JavaScript:

Kaedah

function update(progress) {
  // 更新自上次渲染以来经过时间的世界的状态
}

function draw() {
  // 绘制世界的状态
}

function loop(timestamp) {
  var progress = timestamp - lastRender;

  update(progress);
  draw();

  lastRender = timestamp;
  window.requestAnimationFrame(loop);
}
var lastRender = 0;
window.requestAnimationFrame(loop);

meminta penyemak imbas untuk memanggil fungsi yang ditentukan secepat mungkin sebelum mengecat semula seterusnya. Ia adalah API yang didedikasikan untuk memberikan animasi, tetapi anda juga boleh mendapatkan hasil yang sama dengan requestAnimationFrame dengan tamat masa yang singkat. setTimeout melepasi cap waktu di mana fungsi panggil balik mula dilaksanakan, yang mengandungi bilangan milisaat sejak tingkap dimuatkan, sama dengan requestAnimationFrame. performance.now()

Masa antara nilai atau progress adalah penting untuk mewujudkan animasi yang lancar. Dengan menggunakannya untuk menyesuaikan kedudukan X dan Y dalam fungsi kemas kini, kami dapat memastikan bahawa animasi bergerak pada kelajuan yang konsisten.

Kemas kini lokasi

animasi pertama kami akan sangat mudah. Dataran merah bergerak ke kanan sehingga ia mencapai tepi kanvas dan gelung kembali ke titik permulaan.

kita perlu menyimpan kedudukan persegi dan meningkatkan kedudukan x dalam fungsi kemas kini. Apabila kita sampai ke sempadan, kita dapat menolak lebar kanvas untuk kembali ke titik permulaan.

var width = 800;
var height = 200;

var state = {
  x: width / 2,
  y: height / 2
};

function update(progress) {
  state.x += progress;

  if (state.x > width) {
    state.x -= width;
  }
}

Lukis bingkai baru

Contoh ini menggunakan elemen

untuk menjadikan grafik, tetapi gelung permainan juga boleh digunakan dengan output lain seperti dokumen HTML atau SVG. <canvas>

Fungsi lukisan hanya menjadikan keadaan dunia semasa. Dalam setiap bingkai, kami akan membersihkan kanvas dan kemudian melukis persegi merah 10 piksel dengan pusatnya yang terletak di lokasi yang disimpan di objek negara.

var canvas = document.getElementById("canvas");
var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";

function draw() {
  ctx.clearRect(0, 0, width, height);

  ctx.fillRect(state.x - 5, state.y - 5, 10, 10);
}

Kami mencapai mudah alih!

Balas Input Pengguna

Seterusnya, kami akan mendapat input papan kekunci untuk mengawal kedudukan objek, state.pressedKeys akan menjejaki kunci yang ditekan.

function update(progress) {
  // 更新自上次渲染以来经过时间的世界的状态
}

function draw() {
  // 绘制世界的状态
}

function loop(timestamp) {
  var progress = timestamp - lastRender;

  update(progress);
  draw();

  lastRender = timestamp;
  window.requestAnimationFrame(loop);
}
var lastRender = 0;
window.requestAnimationFrame(loop);

mari kita dengar semua keydown dan keyup peristiwa dan kemas kini state.pressedKeys sewajarnya. Kekunci yang akan saya gunakan adalah d (kanan), a (kiri), w (up), dan s ke bawah). Anda boleh mencari senarai kod utama di sini.

var width = 800;
var height = 200;

var state = {
  x: width / 2,
  y: height / 2
};

function update(progress) {
  state.x += progress;

  if (state.x > width) {
    state.x -= width;
  }
}

maka kita hanya perlu mengemas kini nilai x dan y berdasarkan kekunci yang ditekan dan pastikan kita menyimpan objek dalam batas.

var canvas = document.getElementById("canvas");
var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";

function draw() {
  ctx.clearRect(0, 0, width, height);

  ctx.fillRect(state.x - 5, state.y - 5, 10, 10);
}

kami telah melaksanakan input pengguna!

(kandungan berikutnya, mengenai permainan asteroid dan FAQ, kerana batasan ruang, ditinggalkan di sini. Idea teras telah dipaparkan sepenuhnya di bahagian sebelumnya, dan kandungan berikutnya adalah kes yang lebih kompleks dan soalan yang sering ditanya, yang boleh ditambah sendiri seperti yang diperlukan

Atas ialah kandungan terperinci Petua Pantas: Cara Membuat Game Loop di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!