HTML 游戏声音



  • 定义和使用

    把音量调大。当红场遇到障碍物时,你听到“碰撞”声吗?
        
  • 如何添加声音

    使用HTML5 <audio> 元素为游戏添加声音和音乐。
    在我们的示例中,我们创建了一个新的对象构造函数来处理声音对象:
    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();
        }
    }
    当击中一个新的障碍物时,使用一个声音来制造一个新的障碍物:
    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;
            }
        }
    
    ...
    
    }
    尝试一下
  • 背景音乐

    您可以随时通过更改组件的 image 对象的 src 属性来更改图像。要在游戏中添加背景音乐,请添加一个新的声音对象,并在游戏开始时开始播放:
    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();
    }
    尝试一下