• 给游戏添加背景音乐并控制播放


    分两部分:

    1.加载音乐文件

    主要学习了加载页面的代码game.loader。

    var loader = {
        loaded: true,
        loadedCount: 0, // Assets that have been loaded so far
        totalCount: 0, // Total number of assets that need to be loaded
    
        init: function() {
            // check for sound support
            var mp3Support, oggSupport;
            var audio = document.createElement('audio');
            if (audio.canPlayType) {
                // Currently canPlayType() returns: "", "maybe" or "probably" 
                mp3Support = "" != audio.canPlayType('audio/mpeg');
                oggSupport = "" != audio.canPlayType('audio/ogg; codecs="vorbis"');
            } else {
                //The audio tag is not supported
                mp3Support = false;
                oggSupport = false;
            }
    
            // Check for ogg, then mp3, and finally set soundFileExtn to undefined
            loader.soundFileExtn = oggSupport ? ".ogg" : mp3Support ? ".mp3" : undefined;
        },
        loadImage: function(url) {
            this.totalCount++;
            this.loaded = false;
            $('#loadingscreen').show();
            var image = new Image();
            image.src = url;
            image.onload = loader.itemLoaded;
            return image;
        },
        soundFileExtn: ".ogg",
        loadSound: function(url) {
            this.totalCount++;
            this.loaded = false;
            $('#loadingscreen').show();
            var audio = new Audio();
            audio.src = url + loader.soundFileExtn;
            audio.addEventListener("canplaythrough", loader.itemLoaded, false);
            return audio;
        },
        itemLoaded: function() {
            loader.loadedCount++;
            $('#loadingmessage').html('Loaded ' + loader.loadedCount + ' of ' + loader.totalCount);
            if (loader.loadedCount === loader.totalCount) {
                // Loader has loaded completely..
                loader.loaded = true;
                // Hide the loading screen 
                $('#loadingscreen').hide();
                //and call the loader.onload method if it exists
                if (loader.onload) {
                    loader.onload();
                    loader.onload = undefined;
                }
            }
        }

    2.播放代码及调用

    分为播放、暂停、判断状态

    var game = {
        init: function() {
            loader.init();
            game.backgroundMusic=loader.loadSound('audio/backgroundMusic');//背景音乐加载
           
        startBackgroundMusic:function(){
            var music=$('#backgroundMusic')[0];
            game.backgroundMusic.play();
            music.style="background:rgba(255,255,255,0)";
        },
        stopBackgroundMusic:function(){
            var music=$('#backgroundMusic')[0];
            music.style="background:rgba(128,128,128,0.5)";
            game.backgroundMusic.pause();
            game.backgroundMusic.currentTime=0;//回到音乐开始的地方
    
        },
        musicBackgroundMusic:function(){
            var music=$('#backgroundMusic')[0];
            if (game.backgroundMusic.paused) {
                game.backgroundMusic.play();//音乐play的地方,只要调用musicBackgroundMusic函数,背景音乐就会播放
                music.style="background:rgba(255,255,255,0)";
            }else{
                game.backgroundMusic.pause();
                $('#backgroundMusic')[0].style="background:rgba(128,128,128,0.5)";
    
            }
        }
    }

    3.同理,给其他事件绑定音乐,也是先定义音乐名称,加载完成后,根据什么时候调用播放等等。

    4.注意事项:素材文件要每个都准备ogg格式和mp3格式。因为代码中只是判断浏览器支不支持ogg和mp3格式,而不是优先选择。音乐好像只能播放一遍,没有循环(待解决)。

  • 相关阅读:
    asp.net core 3.1 入口:Program.cs中的Main函数
    vue手机发送验证码倒计时
    阿里云短信服务-短信发送验证码
    前端思维图
    正向代理和反向代理
    lombok+Logback统一异常和日志处理
    java统一结果返回(链式编程结果)
    SpringBoot简介和特点
    web如何测试?
    CSS字体样式属性
  • 原文地址:https://www.cnblogs.com/fanfan-nancy/p/5319200.html
Copyright © 2020-2023  润新知