2016-05-13 10 views
-1

Ich habe ein Stück Code, wo ein Benutzer 0 drücken muss, um den Ton zu stummschalten oder 1, um den Klang eines Musikstücks abzuspielen. Wenn der Ton stummgeschaltet ist, ändert sich das Bild und wenn die Musik abgespielt wird.Wie vermeidet man flackernde Bilder mit Tastendruck?

var audio = new Audio(); 

window.onload = function geluidMaken() { 
    audio.src = "../Geluiden/Achtergrond_Geluid.mp3"; 
    audio.play(); 
    audio.loop = true; 
    window.addEventListener("keypress", function geluidsKnoppen() { 
     var codeGeluid = event.which || event.keyCode; 
     if(codeGeluid == 48) { 
      var geluidAanKnop = new Image(); 
      geluidAanKnop.src = "../Afbeeldingen/Sound_Button.png"; 
      mijnObject.drawImage(geluidAanKnop, (canvas.width/2)-25, 850, geluidAanKnop.width, geluidAanKnop.height); 
      audio.muted = true; 
     } 
     else if(codeGeluid = 49) { 
      var geluidAfKnop = new Image(); 
      geluidAfKnop.src = "../Afbeeldingen/Mute_Button.png"; 
      mijnObject.drawImage(geluidAfKnop, (canvas.width/2)-25, 850, geluidAfKnop.width, geluidAfKnop.height); 
      audio.muted = false; 
     } 
    }); 
} 

Ich habe auch ein anderes Stück Code, wo ich machen alle meine anderen Funktionen

function tekenenObjecten() { 
    mijnObject.clearRect(0, 0, canvas.width, canvas.height); 
    makenBalkKort(); 
    makenBal(); 
    makenMuur(); 
    makenBord(); 

Die Bilder auf der Leinwand nicht sichtbar sind, aber wenn ich auf die Tasten 0 oder 1 die Bilder erscheint und verschwindet direkt. Wie stelle ich sicher, dass die Bilder auf der Leinwand bleiben und sich ändern, wenn die 0 oder 1 gedrückt wird?

+0

Gibt es einen anderen Code, der 'mijnObject' manipuliert? – Sumurai8

+0

@ Sumurai8 ja, ich versuche, ein Spiel wie BrickBreaker zu machen und mein Paddel, Ball und Ziegel sind alle mit mijnObject gemacht :). Es wäre einfach, meine Funktion "geluidsKnoppen()" zu rendern, aber ich weiß nicht, ob es mit einem Tastendruck möglich ist. – KevinN

Antwort

0

Wenn Sie in html5 mit einem Canvas arbeiten, denken Sie daran, dass Sie beim Neuzeichnen eines Frames alles entfernen, was sich auf der Zeichenfläche befindet, und zeichnen Sie dann alles, was Sie im neuen Frame sehen möchten.

In Ihrem Tastendruck-Handler zeichnen Sie das Bild einmal. Wenn ein neuer Rahmen in dem anderen Teil Ihres Codes gezeichnet wird, wird die Zeichenfläche gelöscht und Sie zeichnen es nie neu.

Was Sie tun möchten, ist wahrscheinlich ein Platzhalter, der immer gezeichnet wird, dann ändern Sie nur die Quelle und lassen Sie die Hauptschleife sich darum kümmern.

var audioKnop = new Image(); 
var audioAanSource = "../Afbeeldingen/Sound_Button.png"; 
var audioMuteSource = "../Afbeeldingen/Mute_Button.png"; 

function init() { 
    audioKnop.src = audioMuteSource; 
} 

function tekenenObjecten() { 
    mijnObject.clearRect(0, 0, canvas.width, canvas.height); 
    makenBalkKort(); 
    makenBal(); 
    makenMuur(); 
    makenBord(); 
    maakAudioButton(); 
} 

function maakAudioButton() { 
    mijnObject.drawImage(audioKnop, (canvas.width/2)-25, 850, audioKnop.width, audioKnop.height); 
} 

window.addEventListener("keypress", function() { 
    var codeGeluid = event.which || event.keyCode; 
    if(codeGeluid == 48) { 
    audioKnop.src = audioAanSource; 
    audio.muted = true; 
    } else if(codeGeluid == 49) { 
    audioKnop.src = audioMuteSource; 
    audio.muted = false; 
    } 
}); 
+0

Vielen Dank, das funktioniert perfekt :) – KevinN