ja mostrei aqui alguns exemplos de como o HTML5 vai revolucionar a WEB mas nada com a tag canvas ja tem um tempo que não posto nada devido ao tempo reduzido que estou tendo esses últimos dias então vou somente disponibilizar o código aqui e semana que vem vou fazer um novo post comentando o código eu peguei o mesmo semi pronto o que eu implementei foi apenas algumas outras funcionalidades. segue o link de onde retirei o script original como montar um jogo em HTML5. veja o jogo aqui >>
para visualizar o código basta pedir para o browser exibir o código fonte porem o mesmo esta logo abaixo
Seu HTML
<div style="width:500px; height:20px; font-size:15px; padding:5px; overflow:hidden;" class="redondo gradienteL"> <strong>Level: </strong><samp id="level">1</samp> <strong>Barras restantes: </strong><samp id="barras">0</samp> <strong>Pontos: </strong><samp id="pontos">0</samp> <samp id="pontos"><input style="float:right; font-size:15px; font:Verdana, Geneva, sans-serif; padding:0;" type="button" id="ST" value="PLAY" onClick="status(this)"></samp> </div> <div style=" width:500px; height:400px;"> <canvas style="border:#CCC double;" id="canvas" width="500" height="400"></canvas> <div id="result" style="position:relative;left:50%; top:-50%; margin-left:-100px; margin-top:-50px; height:100px; width:200px; border:#CCC double; text-align:center; display:none;"></div> <div id="XxX"></div> <div id="resultado2"></div> </div> <script src="jogo.js" type="application/x-javascript"></script>Seu código javascript "jogo.js"
var x = 150; var y = 280; var dx = 3; var dy = 5; var IncrementoDx = dx; var NROWS = 5; // total de linhas var NCOLS = 3; // total de colunas var xb = 150; // tamanho horizontal da barra var yb = 10; // tamanho vertical da barra var St = document.getElementById("ST"); var level = document.getElementById("level"); var result = document.getElementById("result"); var canvas = document.getElementById("canvas"); var pontos = document.getElementById("pontos"); var Pontos = 0; var n = 0; var barras; var WIDTH; var HEIGHT; var ctx; var paddlex; var paddleh; var paddlew; rightDown = false; leftDown = false; var bricks; var NROWS; var NCOLS; var BRICKWIDTH; var BRICKHEIGHT; var PADDING; var intervalo; function initbricks() { BRICKWIDTH = (WIDTH/NCOLS) - 1; BRICKHEIGHT = 15; PADDING = 1; bricks = new Array(NROWS); for (i=0; i < NROWS; i++) { bricks[i] = new Array(NCOLS); for (j=0; j < NCOLS; j++) { bricks[i][j] = 1; } } } function keyDown (evt) { key = evt; if (evt.keyCode == 13) status(St); else if (evt.keyCode == 39) rightDown = true; else if (evt.keyCode == 37) leftDown = true; } function keyUp(evt) { key = null; if (evt.keyCode == 39) rightDown = false; else if (evt.keyCode == 37) leftDown = false; } document.onkeydown=function(event){keyDown(event);} document.onkeyup=function(event){keyUp(event);} function init_paddle() { posX = (WIDTH/2)-(xb/2); paddlex = posX; paddleh = yb; paddlew = xb; } function circle(x,y,r) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } function rect(x,y,w,h) { ctx.beginPath(); ctx.rect(x,y,w,h); ctx.closePath(); ctx.fill(); } function clear() { ctx.clearRect(0, 0, WIDTH, HEIGHT); } function init() { barras = NCOLS*NROWS // total é igaul a colunas x linhas if (canvas.getContext) { ctx = canvas.getContext("2d"); WIDTH = canvas.width; HEIGHT = canvas.height; init_paddle(); initbricks(); intervalo = setInterval(draw, 10); } } function perdeu(){ var canvas = null; clearInterval(intervalo) init(); } function ganhou(){ var canvas = null; clearInterval(intervalo) NROWS = NROWS+1; NCOLS = NCOLS+1; barras = NCOLS*NROWS init(); levelAt = level.innerHTML; level.innerHTML = eval(levelAt)+eval(1); } function pontuacao(){ Pontos = eval(Pontos)+(50*level.innerHTML)/3; pontos.innerHTML = Pontos.toFixed(0); } function draw() { clear(); circle(x, y, 10); if (rightDown){ if (paddlex < WIDTH-57) paddlex += 5; } else if (leftDown) { if (paddlex > -5) paddlex -= 5; } rect(paddlex, HEIGHT-paddleh, paddlew, paddleh); //draw bricks for (i=0; i < NROWS; i++) { for (j=0; j < NCOLS; j++) { if (bricks[i][j] == 1) { rect((j * (BRICKWIDTH + PADDING)) + PADDING, (i * (BRICKHEIGHT + PADDING)) + PADDING, BRICKWIDTH, BRICKHEIGHT); } } } //have we hit a brick? rowheight = BRICKHEIGHT + PADDING; colwidth = BRICKWIDTH + PADDING; row = Math.floor(y/rowheight); col = Math.floor(x/colwidth); //if so, reverse the ball and mark the brick as broken if (y < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) { dy = -dy; bricks[row][col] = 0; pontuacao(); barras -= 1 if(barras == 0){ St.value = "PLAY"; i = 0 j = 0 x = 150; y = 280; result.innerHTML = "<h1>Você Ganhou</h1> Pressione <b>enter</b> para comtinuar"; result.style.display = "block"; ganhou(); } } if (x + dx > WIDTH || x + dx < 0) dx = -dx; if (y + dy < 0) dy = -dy; else if (y + dy > HEIGHT-10) { if (x > paddlex-10 && x < paddlex + paddlew-10) { dy = -dy; if(key.keyCode == 37) { if(dx > 0 )dx = -dx; } else if(key.keyCode == 39){ if(dx < 0 )dx = (dx*-1); } } else{ var i = 0 var j = 0 for (i=0; i < NROWS; i++) { for (j=0; j < NCOLS; j++) { if (bricks[i][j] == 1) { bricks[i][j] = 0 } } } St.value = "PLAY"; i = 0 j = 0 x = 150; y = 280; result.innerHTML = "<h1>Você Perdeu</h1> Pressione <b>enter</b> reiniciar"; result.style.display = "block"; perdeu(); clearInterval(intervalId); } } if(St.value == "STOP"){ x += dx; y += dy; } document.getElementById("barras").innerHTML = barras; } function status(el){ if(el.value == "PLAY") { result.style.display = "none"; el.value = 'STOP' if(dx < 0) dx = dx*-1; } else el.value = 'PLAY' }
Então até o próximo post onde vou comentar esse código abraço e obrigado!
OBs: ainda falta muitos detalhes para ficar perfeito mas isso é apenas uma demonstração sinta se a vontade apara usar o código e melhora-lo
Nenhum comentário:
Postar um comentário