Â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ử HTML5 <audio> để 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 hàm tạo đối tượng mới để xử lý các đối tượng âm thanh:
Ví 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 tạo sound
và khi hình vuông màu đỏ gặp chướng ngại vật, hãy phát âm thanh:
Ví 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;
}
}
...
}
Hãy tự mình thử »Nhạc nền
Để thêm nhạc nền vào trò chơi của bạn, hãy thêm đối tượng âm thanh mới và bắt đầu phát khi bạn bắt đầu trò chơi:
Ví 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();
}
Hãy tự mình thử »