paulo_vasconcelos
-
Posts
1 -
Cadastrado em
-
Última visita
-
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
Sobre o Clube do Hardware
No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais
Direitos autorais
Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais
