Spelsound

Justera ljudet. När den röda kuben kolliderar med ett hinder, hör du kollisionssoundet?

Hur lägger man till ljud?

Använd HTML5 <audio> element för att lägga till ljud och musik till ditt spel.

I följande exempel skapar vi en ny objekt konstruktor för att hantera ljudobjekt:

exempel

function ljud(källa) {
  this.ljud = document.createElement("audio");
  this.ljud.src = src;
  this.ljud.setAttribute("preload", "auto");
  this.ljud.setAttribute("controls", "none");
  this.ljud.style.display = "none";
  document.body.appendChild(this.ljud);
  this.spela = function(){
    this.ljud.spela();
  }
  this.stoppa = function(){
    this.ljud.pausa();
  }
}

För att skapa ett nytt ljudobjekt, använd ljud Konstruktör, spela upp ljud när den röda kuben kolliderar med hinder:

exempel

var minSpelDel;
var minObstruerare = [];
var minLjud;
function startaSpelet() {
  minSpelDel = new komponent(30, 30, "röd", 10, 120);
  minLjud = new ljud("bounce.mp3");
  myGameArea.start();
}
function uppdateraSpelområde() {
  var x, höjd, luckra, minHöjd, maxHöjd, minLuckra, maxLuckra;
  for (i = 0; i < minObstruerare.length; i += 1) {
    if (minSpelDel.kolliderarMed(minObstruerare[i])) {
      minLjud.spela();
      minSpelområde.stoppa();
      return;
    }
  }
...
}

Prova själv

Bakgrundsmusik

För att lägga till bakgrundsmusik till spelet, lägg till en ny ljudobjekt och börja spela upp den vid start av spelet:

exempel

var minSpelDel;
var minObstruerare = [];
var minLjud;
var minMusik;
function startaSpelet() {
  minSpelDel = new komponent(30, 30, "röd", 10, 120);
  minLjud = new ljud("bounce.mp3");
  minMusik = new ljud("gametheme.mp3");
  myMusic.play();
  myGameArea.start();
}

Prova själv