Olá demorei mas voltei. Ai se segue um joguinho de tiro SEMI PRONTO. só colar no app builder e editar me segue ai que logo posto mais. Valeu
<html>
<script>
vidaVilao = 100;
vezes = 0;
x = 100;
y = 200;
vilaox = 30;
vilaoy = 50;
tiroy = y;
tirox =x+10;
chaox = 0;
chaoy = 291;
padrao = 30;
vilao = new Image();
vilao.src ="///android_asset/verde.png";
quadrado = new Image();
quadrado.src = "///android_asset/azule.png";
limpador = new Image();
limpador.src ="///android_asset/azulc.png"
tiro = new Image();
tiro.src = "///android_asset/rosa.png";function iniciar(){
ctx =document.getElementById("canvas").getContext('2d');
desenha();}
function desenha(){
ctx.drawImage(quadrado,x,y,padrao,padrao);
ctx.drawImage(quadrado,0,0,400,30);
ctx.font ="20px Georgea";
ctx.fillText("Vida Vilao:",10,20);
ctx.fillText(vidaVilao, 110, 20);
criarVilao();
}function criarVilao(){
alfa = ctx.drawImage(vilao,vilaox,vilaoy-30,30,30);vilaox = vilaox+11;
if(vilaox > 300){
z = Math.floor((Math.random() * 300) + 100);
vilaox = vilaox-z;
}
setTimeout(
function(){
atualiza();
},400);
}function azulc(){
quadrado.src="///android_asset/azulc.png";
}
function acima(){
limpar();
y = y-41;
desenha();
}
function direita(){
limpar();
x = x+41;
desenha();
}
function esquerda(){
limpar();
x = x-41;
desenha();
}
function baixo(){
limpar();
y = y+41;
desenha();
}function rosa(){
if( vezes < 30 )setTimeout(
function(){
alfa = ctx.drawImage(tiro,tirox,tiroy-10,10,10);
tiroy = tiroy-11;
vezes = vezes+1;rosa();
}, 10);
if( vezes == 30){
vezes = vezes-31;}
}function atualiza(){
limpar();
desenha();
if(vilaox == tirox+20|| vilaoy == tiroy+20 ||vilaox==tirox-20||vilaoy==tiroy-20){
vidaVilao = vidaVilao-10;
}
}function limpar(){
ctx.clearRect(0,0,500,500);
}
</script>
<body><img src="controles.png" style="position: absolute; top: 300; left: 5; ">
<canvas style=" background: url(pedras.jpg); -webkit-border-radius: 10px;" style="position: absolute; top: 5; left: 10; ">
teste
</canvas><img src="azule.png" style="position: absolute; top: 315; left: 300; -webkit-border-radius: 50%;">
<b style="position: absolute; left: 210; top: 340;">
<img src="azulc.png" style="width: 0; height: 0;
border-bottom: 50px solid lightskyblue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
">
</b><img src="rosa.png" style="position: absolute; top: 410; left: 200; -webkit-border-radius: 50%;">
<img src="verde.png" style="position: absolute; top: 370; left: 270; -webkit-border-radius: 50%;">
<img src="amarelo.png" style="position: absolute; top: 340; left: 80; ">
<img src="amarelo.png" style="position: absolute; top: 380; left: 30; ">
<img src="amarelo.png" style="position: absolute; top: 380; left: 120; ">
<img src="amarelo.png" style="position: absolute; top: 400; left: 80; ">
</body></html>