Âm thanh trò chơi


Tăng âm lượng. Bạn có nghe thấy tiếng "dunk" khi hình vuông màu đỏ chạm vào chướng ngại vật không?








Làm thế nào để thêm âm thanh?

Sử dụng phần tử <audio> HTML5 để thêm âm thanh và nhạc vào trò chơi của bạn.

Trong các ví dụ của chúng tôi, chúng tôi tạo một phương thức khởi tạo đối tượng mới để xử lý các đối tượng âm thanh:

Thí dụ

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



Để tạo một đối tượng âm thanh mới, hãy sử dụng hàm soundtạo và khi hình vuông màu đỏ chạm vào chướng ngại vật, hãy phát âm thanh:

Thí dụ

var myGamePiece;
var myObstacles = [];
var mySound;

function startGame() {
  myGamePiece = new component(30, 30, "red", 10, 120);
  mySound = new sound("bounce.mp3");
  myGameArea.start();
}

function updateGameArea() {
  var x, height, gap, minHeight, maxHeight, minGap, maxGap;
  for (i = 0; i < myObstacles.length; i += 1) {
    if (myGamePiece.crashWith(myObstacles[i])) {
      mySound.play();
      myGameArea.stop();
      return;
    }
  }

...

}

Nhạc nền

Để thêm nhạc nền vào trò chơi của bạn, hãy thêm một đối tượng âm thanh mới và bắt đầu chơi khi bạn bắt đầu trò chơi:

Thí dụ

var myGamePiece;
var myObstacles = [];
var mySound;
var myMusic;

function startGame() {
  myGamePiece = new component(30, 30, "red", 10, 120);
  mySound = new sound("bounce.mp3");
  myMusic = new sound("gametheme.mp3");
  myMusic.play();
  myGameArea.start();
}