Javascript Girl
  1. Javascript Girl
  3. HTML5 Toile clignotante sur le dessin
Intereting Posts
Quel est le "chemin" d'AngularJS pour gérer une ressource CRUD Persistance des données de stockage local Comment télécharger la page en cours en tant que fichier / pièce jointe en utilisant Javascript? Alerte pour les modifications non enregistrées dans la forme Chrome / Firefox set breakpoint sur tous les événements onclick javascript à la fois Angular2.js vs angular2.dev.js Ajouter dynamiquement des champs dans des rails avec des attributs imbriqués Obtenir un jeton d'accès API Spotify avec Node.js / Express.js Est-il possible de désactiver Ctrl + F de trouver en page? Comment puis-je empêcher les cellules de jointjs de déborder le papier? Réagissez aux événements sans tirer Quelle bibliothèque JavaScript possède le support d'héritage de classe le plus complet? AngularJS – chargement dynamique de JS externe basé sur les itinéraires Vérifie combien d'arguments une fonction prend dans Javascript? Ajout de zéros supplémentaires en face d'un nombre en utilisant jQuery?

HTML5 Toile clignotante sur le dessin

Je commence par un jeu isométrique, et ma toile clignote (pas dans IE) lorsqu'elle tire toutes les parties du sol. Lorsque je règle fps à 20 ou moins, le clignotement s'arrête. Comment puis-je résoudre cela? Des idées? 

var camerax = 300, cameray = 100; var fps = 60; function draw() { clearCanvas(); drawGround(); } function drawGround() { var img = new Image(); img.onload = function() { var width = img.width; var height = img.height; for (var x = 0; x < 3; x++) { for (var y = 3; y >= 0; y--) { mx = (xy)*height + camerax; my = (x+y)*height/2 + cameray; ctx.drawImage(img, mx, my); } } } img.src = "ground.png"; } var loop = setInterval(function() { update(); draw(); }, 1000/fps);

À l'heure actuelle, vous rechargez l'image de chaque image et, à moins que le rappel de charge ne se déclenche dans les 16ms de l'image, vous verrez un canevas vierge.

Vous devez uniquement appeler la new Image , img.onload sequence une fois, pour précharger vos images. Le rappel en ligne lancerait alors votre première image et les appels de tirage sont libres d'utiliser l'image en mémoire.

Quelque chose comme: 

 var camerax = 300, cameray = 100; var fps = 60; var img; var loop; function init() { img = new Image(); img.onload = function() { loop = setInterval(function() { update(); draw(); }, 1000/fps); }; img.src = "ground.png"; } function draw() { clearCanvas(); drawGround(); } function drawGround() { var width = img.width; var height = img.height; for (var x = 0; x < 3; x++) { for (var y = 3; y >= 0; y--) { mx = (xy)*height + camerax; my = (x+y)*height/2 + cameray; ctx.drawImage(img, mx, my); } } } }

Bien sûr, il devient plus complexe une fois que vous attendez que plusieurs images soient préchargées car vous devez lancer la boucle une fois que toutes sont terminées.

Bon conseil, freejosh! Merci! Mon écran maintenant ne clignote pas et le résultat du code était ce: 

  var canvas = document.getElementById("game"); var ctx = canvas.getContext("2d"); var camerax = 300, cameray = 100; var fps = 60; var img; var loop; function update() { } function draw() { clearCanvas(); drawGround(); } function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function drawGround() { var width = img.width; var height = img.height; for (var x = 0; x < 3; x++) { for (var y = 3; y >= 0; y--) { mx = (xy)*height + camerax; my = (x+y)*height/2 + cameray; ctx.drawImage(img, mx, my); } } } function init() { img = new Image(); img.onload = function() { drawGround(); }; img.src = "ground.png"; } function keyListener(e){ e = e || window.event if(e.keyCode==37){ camerax--; } else if(e.keyCode==39){ camerax++; } else if(e.keyCode==38){ cameray--; } else if(e.keyCode==40){ cameray++; } } window.onkeypress = function(e) { keyListener(e); } init(); var loop = setInterval(function() { update(); draw(); }, 1000/fps);