Peli äänet

Aseta äänet suuremmaksi. Kun punainen neliö törmää esteeseen, kuuletko törmäysäänen?

Miten lisätään ääniä?

Kuinka lisätä ääniä HTML5 <audio>-elementin avulla peliisi?

Esimerkissä luomme uuden objektikonstruktorin, joka käsittelee ääni-objektin:

esimerkki

function ääni(src) {
  this.ääni = document.createElement("audio");
  this.ääni.src = src;
  this.ääni.setAttribute("preload", "auto");
  this.ääni.setAttribute("controls", "none");
  this.ääni.styili.display = "none";
  document.body.appendChild(this.ääni);
  this.toisto = function(){
    this.ääni.toisto();
  }
  this.lopeta = function(){
    this.ääni.pysäytä();
  }
}

Jos haluat luoda uuden ääni-objektin, käytä Ääni Konstruktori, joka toistaa äänen, kun punainen laatikko törmää esteeseen:

esimerkki

var myPeliOsake;
var myEstomat = [];
var myÄäni;
function aloitaPeli() {
  myPeliOsake = new komponentti(30, 30, "punainen", 10, 120);
  myÄäni = new ääni("bounce.mp3");
  myGameArea.start();
}
function päivitäPeliAlue() {
  var x, korkeus, aukko, vähimmäiskorkeus, suurinKorkeus, vähimmäisAukko, suurinAukko;
  for (i = 0; i < myEstomat.length; i += 1) {
    if (myPeliOsake.kolaroi(myEstomat[i])) {
      myÄäni.toisto();
      myPeliAlue.lopeta();
      return;
    }
  }
...
}

Kokeile itse

Taustamusiikki

Jos haluat lisätä taustamusiikin peliin, luo uusi ääni-objekti ja aloita sen toisto pelin käynnistyessä:

esimerkki

var myPeliOsake;
var myEstomat = [];
var myÄäni;
var myMusic;
function aloitaPeli() {
  myPeliOsake = new komponentti(30, 30, "punainen", 10, 120);
  myÄäni = new ääni("bounce.mp3");
  myMusic = new ääni("gametheme.mp3");
  myMusic.play();
  myGameArea.start();
}

Kokeile itse