Conseil rapide: comment faire une boucle de jeu en javascript

Points de base

• JavaScript Game Loop est une technique utilisée pour rendre des animations et des jeux dont l'État change avec le temps. Il implique une fonction d'exécution à plusieurs reprises qui reçoit l'entrée de l'utilisateur, met à jour l'état du temps écoulé, puis dessine le cadre.
La méthode
• requestAnimationFrame est une API pour rendre des animations qui demandent au navigateur d'appeler la fonction spécifiée dès que possible avant la prochaine repeinte, et fournit un horodatage pour la fonction de rappel pour démarrer l'exécution.
• L'entrée utilisateur peut être intégrée dans la boucle de jeu en suivant les touches appuyées, en écoutant tous les événements keydown et keyup, et de mise à jour des positions X et Y en fonction des touches pressées et de la maintenance de l'objet dans l'objet dans l'objet limite.
• Des animations plus complexes peuvent être créées en stockant des vecteurs supplémentaires pour le mouvement et la rotation, la mise à jour des rotations basées sur les touches gauche et droite, la mise à jour des mouvements basés sur les touches et les rotations de haut en bas et de mise à jour de positions en fonction des vecteurs de mouvement et des limites de toile.

JavaScript Game Loop est une technique utilisée pour rendre des animations et des jeux qui changent d'état au fil du temps. À son cœur, une fonction qui s'exécute autant de fois que possible, qui reçoit l'entrée utilisateur, met à jour l'état du temps écoulé, puis dessine le cadre.

Cet article présentera brièvement le fonctionnement de cette technologie de base et vous aidera à commencer à créer vos propres jeux et animations basés sur un navigateur.

Ce qui suit est un exemple de boucle de jeu JavaScript:

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

requestAnimationFrame La méthode demande au navigateur d'appeler la fonction spécifiée dès que possible avant la prochaine repection. Il s'agit d'une API dédiée au rendu des animations, mais vous pouvez également obtenir des résultats similaires avec setTimeout avec de courts délais d'attente. requestAnimationFrame passe l'horodatage auquel la fonction de rappel commence à s'exécuter, qui contient le nombre de millisecondes car la fenêtre est chargée, égale à performance.now().

progress Le temps entre les valeurs ou est crucial pour créer des animations lisses. En l'utilisant pour ajuster les positions X et Y dans la fonction de mise à jour, nous pouvons nous assurer que l'animation se déplace à une vitesse cohérente.

Mettre à jour l'emplacement

Notre première animation sera très simple. Un carré rouge se déplaçant vers la droite jusqu'à ce qu'il atteigne le bord de la toile et remonte au point de départ.

Nous devons stocker la position du carré et incrémenter la position X dans la fonction de mise à jour. Lorsque nous atteignons la limite, nous pouvons soustraire la largeur du canevas pour remonter au point de départ.

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

Dessinez un nouveau cadre

Cet exemple utilise l'élément <canvas> pour rendre les graphiques, mais la boucle de jeu peut également être utilisée avec d'autres sorties telles que les documents HTML ou SVG.

Les fonctions de dessin ne font que rendre l'état du monde actuel. Dans chaque trame, nous effacerons la toile, puis dessinons un carré rouge de 10 pixels avec son centre situé à l'emplacement stocké dans l'objet d'état.

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

Nous avons atteint le mobile!

Répondez à l'entrée de l'utilisateur

Ensuite, nous obtiendrons l'entrée du clavier pour contrôler la position de l'objet, state.pressedKeys suivra les touches appuyées.

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

Écoutons tous les événements keydown et keyup et mettons à jour state.pressedKeys en conséquence. Les touches que j'utiliserai sont d (à droite), a (gauche), w (up) et s vers le bas). Vous pouvez trouver une liste de codes clés ici.

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

Ensuite, nous avons juste besoin de mettre à jour les valeurs x et y en fonction des touches appuyées et assurez-vous de garder l'objet dans les limites.

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

Nous avons implémenté la saisie des utilisateurs!

(Le contenu ultérieur, sur les jeux Astéroïdes et la FAQ, en raison des limites de l'espace, est omis ici. L'idée de base a été pleinement affichée dans la partie précédente, et le contenu ultérieur est des cas plus complexes et des questions fréquemment posées, qui peut être complété par vous-même au besoin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!