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;
}
desde ja agradeço a ajuda