Spil lyd

Lav lyden op. Når den røde blok rammer en hindring, hører du stødsoundet?

Hvordan tilføjer jeg lyd?

Brug HTML5 <audio>-elementet til at tilføje lyd og musik til dit spil.

I nedenstående eksempel opretter vi en ny objektconstructor til at håndtere lydobjekter:

eksempel

function lyd(src) {
  this.lyd = document.createElement("audio");
  this.lyd.src = src;
  this.lyd.setAttribute("preload", "auto");
  this.lyd.setAttribute("controls", "none");
  this.lyd.style.display = "none";
  document.body.appendChild(this.lyd);
  this.play = function(){
    this.lyd.play();
  }
  this.stop = function(){
    this.lyd.pause();
  }
}

For at oprette et nyt lydobjekt brug lyd Konstruktør, der afspiller lyd, når den røde firkant rammer et obstakel:

eksempel

var minSpilDel;
var mineObstakler = [];
var minLyd;
function startSpil() {
  minSpilDel = new komponent(30, 30, "rød", 10, 120);
  minLyd = new lyd("bounce.mp3");
  myGameArea.start();
}
function opdaterSpilOmråde() {
  var x, højde, gap, mindsteHøjde, maksHøjde, mindsteGap, maksGap;
  for (i = 0; i < mineObstakler.length; i += 1) {
    if (minSpilDel.kollisionMed(mineObstakler[i])) {
      minLyd.play();
      minSpilOmråde.stop();
      return;
    }
  }
...
}

Prøv selv

Baggrundsmusik

For at tilføje baggrundsmusik til spillet, tilføj en ny lydobjekt og start afspilning ved opstart af spillet:

eksempel

var minSpilDel;
var mineObstakler = [];
var minLyd;
var minMusik;
function startSpil() {
  minSpilDel = new komponent(30, 30, "rød", 10, 120);
  minLyd = new lyd("bounce.mp3");
  minMusik = new lyd("gametheme.mp3");
  myMusic.play();
  myGameArea.start();
}

Prøv selv