Erro de audio em html e javascript

paulo_vasconcelos · 8 de julho de 2016

galera estou tentando colocar audio em game que estou estruturando em html com javascript + canvas

tentei colocar audio mas nao consigo , gostaria de colocar 2 musicas : uma de fundo e outra em caso de game over.

eis meu codigo:

index.html

<html>
    <head>
        <title>Game</title>
        <link rel="stylesheet" type="text/css" href="css/estilo.css">
    </head>
    <body>
    <div style="display: none;">
        <img id="personagem" src="img/capivara.png">
        </div>
         <script src="js/script.js"></script> 
</body>
</html>

-------------------------

script.js

// var
var canvas, ctx, altura, largura, frames = 0, maxPulos = 3, velocidade = 5,
    estadoAtual, record
    
var 
    estados = {
        jogar: 0,
        jogando: 1,
        perdeu: 2
    },
    
    
    chao = {
        y: 550,
        altura: 50,
        cor: "#ffdf70",
        desenha:  function() {
            ctx.fillStyle = this.cor;
            ctx.fillRect(0, this.y, largura, this.altura);
        }
    },
    bloco = {
        x: 50,
        y: 0,
        altura: 50,
        largura: 50,
        cor: "#000000",
        gravidade: 1.5,
        velocidade: 5,
        forcaDoPulo: 20,
        qtPulos: 0,
        score: 0,
        
        atualiza: function() {
            this.velocidade += this.gravidade;
            this.y += this.velocidade;
            if (this.y > chao.y -this.altura && estadoAtual != estados.perdeu) {
                this.y = chao.y - this.altura
                this.qtPulos = 0;
                this.velocidade = 0;
            };
        },
        reset: function () {
            this.velocidade = 0;
            this.y = 0;
            if (this.score > record) {
                localStorage.setItem("record", this.score);
                record = this.score;
            };
            this.score = 0;
        },
        pula: function () {
            if (this.qtPulos < maxPulos) {
                this.velocidade = -this.forcaDoPulo;
                this.qtPulos++;
            };
        },
        desenha: function() {
            // ctx.fillStyle = this.cor;
            // ctx.fillRect(this.x, this.y, this.largura, this.altura);
            var img = document.getElementById("personagem");
            ctx.drawImage(img,this.x, this.y, this.largura=80, this.altura=100);
            
        }
    },
    obstaculos = {
        _obs: [],
        cores: ["#afa", "#cce", "#ffa", "#ada", ],
        tempoInsere: 0,
        insere: function() {
            this._obs.push({
                x: largura,
                // largura: 20 + Math.floor(21 * Math.random()),
                largura: 70,
                altura: 30 + Math.floor(80 * Math.random()),
                cor: this.cores[Math.floor(3 * Math.random())]
            });
            this.tempoInsere = 50 + Math.floor(51 * Math.random());
        },
        atualiza: function() {
            if (this.tempoInsere == 0) {
                this.insere();
            } else {
                this.tempoInsere--;
            }
            
            for (var i = 0, tam = this._obs.length; i < tam; i++) {
                var obs = this._obs;
                obs.x -= velocidade;
                if (bloco.x < obs.x + obs.largura && bloco.x + bloco.largura >= obs.x && bloco.y + bloco.altura >= chao.y - obs.altura) {
                    estadoAtual = estados.perdeu;
                } else if (obs.x == 0) {
                    bloco.score++;
                } else if (obs.x <= -obs.largura) {
                    this._obs.splice(i, 1);
                    tam--;
                    i--;
                };
            };
        },
        limpa: function () {
            this._obs = [];
        },
        desenha: function() {
            for (var i = 0, tam = this._obs.length; i < tam; i++) {
                var obs = this._obs;
                ctx.fillStyle = obs.cor;
                ctx.fillRect(obs.x, chao.y-obs.altura, obs.largura, obs.altura);
            };
        }
    };

function main(){
    altura = window.innerHeight;
    largura = window.innerWidth;
    if (largura >= 500) {
        largura = 600;
        altura = 600;
    }
    canvas = document.createElement("canvas");
    canvas.width = largura;
    canvas.height = altura;
    canvas.style.border = "1px solid #000";
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);
    document.addEventListener("mousedown", clique);
    estadoAtual = estados.jogar;
    record = localStorage.getItem("record");
    if (record == null) {
        record = 0;
    }
    roda();
}
function clique(e){
    if (estadoAtual == estados.jogando) {
        bloco.pula();
    } else if (estadoAtual == estados.jogar) {
        estadoAtual = estados.jogando
    } else if (estadoAtual == estados.perdeu && bloco.y >= 2 * altura) {
        estadoAtual = estados.jogar;
        obstaculos.limpa();
        bloco.reset();
        
    }
}
function roda() {
    atualiza();
    desenha();
    window.requestAnimationFrame(roda);
}
function atualiza() {
    frames++;
    bloco.atualiza();
    if (estadoAtual == estados.jogando) {
        obstaculos.atualiza();
    };
}
function desenha() {
    ctx.fillStyle = "#50beff";
    ctx.fillRect(0, 0, largura, altura);
    ctx.fillStyle = "#fff";
    ctx.font = "50px Arial";
    ctx.fillText(bloco.score, 30, 68);
    
    
    if (estadoAtual == estados.jogar) {
        } else if (estadoAtual == estados.perdeu ) {
        ctx.font = '50pt Calibri';
         ctx.fillStyle = "black";
        ctx.fillText('!!! GAME OVER !!!', 100, 300);        
             ctx.font = '20pt Calibri';
         ctx.fillStyle = "red";
        ctx.fillText('clique aqui e tente de novo', 200, 400);
        ctx.save();
        ctx.translate(largura/2, altura/2);
        ctx.fillStyle = "black";
        //ctx.fillText(bloco.score, -ctx.measureText(bloco.score).width/2, 19);
        ctx.restore();
    
} else if (estadoAtual == estados.jogando) {
        obstaculos.desenha();
    };
    chao.desenha();
    bloco.desenha();
    //} else if {
    
    //}
    
}

// inicializa o jogo
main();

------------------
estilo.css

canvas {
     width:1360px;
    height:660px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}