Heroi andando com html

547 1 2
                                    

Meu nome eh Claudio e meu whatsapp eh 011_98540-2278. Existem varios jeitos de fazer seu heroi andar por exemplo: faz de conta que vc quer que ele ande sozinho tu vai fazer assim:abra o APPBUILDER no seu android e crie uma estrutura basica de html assim
<html>
<body>
<script>
</script>
</body>
</html>
Ai dentro do body vamos colocar uma imagem assim

<Img src="nomedaimagem.jpg ou png" >

O src eh o caminho onde esta sua imagem que comi esta dentro do app nao necessita ser especificada mas caso tu queira saber o caminho da imagem dentro do app instalado o caminho eh ///android-asset/img.jpg
Entendeu?

Vamos seguir com este capitulo, ai entre a imagem que vc quer que ande sozinha tu coloca a tag <marquee> assim veja

<marquee>
<img src="imagem.jpg">
</marquee>

Com essa tecnica simples e em puro html teu personagem vai andar da direita pra esquerda.

Ai tu diz ai caramba cade o JAVASCRIPT? ok vou te ensinar em js meu jovem.

Tu cria uma imagem e dentro dela coloca a tag id assim olha

<Img src="imagem.jpg">

Ai dentro das tags script tu coloca o seguinte código

<script>
var x = 100;
var y = 100;
function iniciar(){
document.getElementById("MeuId").style.top = x;
document.getElementById("MeuId").style.left = y;
}
function mover(){
y = y++;
}
</script>
Pronto ai esta agora vamos explicar tin tin por tin tin

O que eh var? Adivinha.... var eh uma variável (poxa fiquei na mesma) bro var eh um valor que vc pode auterar quando bem entender ou um objeto ou qq outra coisa no nosso caso a var x significa o valor que queremos que a imagem fique de distancia do topo da tela e a var y o valor que queremos em distância que a imagem fique do lado esquerdo da tela. Mais claro que isso ta dificil bro.

O que eh function? Adivinha... uma função ou seja o que nos queremos que seja feito a primeira funçao ali eh a iniciar(); ai tu me diz (mas quem vai fazer essa funçao?) Boa pergunta amigo vamos fazer assim dentro da tag body vamos colocar o codigo assim <body> esse codigo ai quer dizer que quando o body"corpo da pagina" iniciar"onload" ele deve ir la no javascript e fazer tudo que esta dentro da funçao iniciar

O que eh document? Adivinha? Eh o documento que esta aberto.

O que eh getElementById? Isso quer dizer que quando a funçao iniciar for ativada ela deve pegar(get) o elemento(Element) com o id(ById) MeuId sacou?

O que eh style.top e style.left? Style vem de css muito usado bro ai o que acontece style.top=10 quer dizer que a imagem ou seja la o que for deve estar a 10 pixel de distando topo e do mesmo modo Style.left se tiver 50 quer dizer que ele deve estar a 50 px de diatancia da borda esquerda sendo assim so com esses dois dados tu pode colocar tua imagem em qq lugar na tela ou seja ja temos um lugar que ela vai ficar style.top=x e x eh = a 100 entao a imagem deve estar a 100 px do top da tela de distância

Agora vamos fazer a magica acontecer
Funçao mover
La diz que y = y++ esse ++ significa que toda vez que eu chamar a função mover ele vai aumenta o valor de y em mais1 ai tu diz mas como vamos chamar a funçao mover? Vamos fazer assim cada vez que clicarmos na tela a imagem anda que tal? Entao vamos no body denovo <body> onclick quer dizer que ai clicar ele deve executar a funçao mover sacou?

fazendo jogos no android sem pc com html css e javascriptOnde histórias criam vida. Descubra agora