[Ajuda] Como fazer esse código funcionar - HTML5?

Front-end JavaScript
#1

Olá pessoal,

Venho aqui pedir ajuda pra um pequeno pedaço de código de um tutorial que estou seguindo de HTML5.

O código deve renderizar um fundo preto e algumas partes renderiza blocos vermelhos sobre o fundo.

Estou tentando fazer esse código funcionar mas não estou conseguindo ainda…

Segue o código:

<html>

<head>
<title>Site</title>
<script type="text/javascript">

var map = [
  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
  [1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1],
  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];

MapRenderer.draw and MapRenderer.drawTile
draw:		 function(){
  var self = this;
  this.context.clearRect(0, 0, this.w, this.h);
    this.context.fillStyle = "rgba(255,0,0,0.6)";
  _(this.map).each(function(row,i){
    _(row).each(function(tile,j){
      if(tile !== 0){ //if tile is not walkable
        self.drawTile(j,i); //draw a rectangle at j,i
      }
    });
  });
},
drawTile: function(x,y){
  this.context.fillRect(
    x * this.tileSize, y * this.tileSize,
    this.tileSize, this.tileSize
  );
}

</script>
</head>

<body>

</body>

</html>

O tutorial completo está aqui: https://www.creativebloq.com/html5/build-tile-based-html5-game-31410992

Pra quem é mais experiente deve saber onde estou errando, pois não entendo muito de Javascript por enquanto.

Obrigado por qualquer ajuda.

#2

Cara, o código é “meio” extenso… Recomendo vc baixar o fonte e depois ir acompanhando lá no site. Quando vc baixar, vai ver o tanto de pastas e arquivos que tem. Boa sorte!

http://dan.nea.me/tile-based-games/ (Source Code dele aqui)

#3

Muito obrigado pela resposta @rodriguesabner!

Eu tinha baixado esses arquivos mas não vem o exemplo do tutorial. O exemplo que vem desenha uma tela toda verde. Não é o mesmo do tutorial.

Estou literalmente apanhando pra entender mas quero fazer funcionar pra criar um mapa pra um jogo web browser com batalhas por inteligencia artificial. Meio longe ainda mas o código do site tem até pathfinding pro inimigo seguir o herói.

Vou tentar alterar esses arquivos e mexer neles pra tentar renderizar o que o site mostra no tutorial.

Estava pesquisando no google de onde vinha essas funções inclusive…hehe.

Muito obrigado pela ajuda.

1 curtida
#4

https://www.youtube.com/watch?v=YltacqQx-IY, mano, achei esse interessante…

1 curtida
#5

Sinceramente estou pensando em pagar R$ 50 reais pra quem fazer esse meu código funcionar. Só quero aprender a configurar essas bibliotecas e fazer o código do tutorial funcionar renderizando o fundo preto com blocos vermelhos, igual do tutorial.

Então seria basicamente 2 coisas:

  • Configurar as bibliotecas.
  • Fazer o código acima(identico do tutorial) funcionar.

O que acham? Alguém se habilita?

Pra mim é importante que vem até algoritmo de pathfinding. Se eu entender esse código e como programa-lo já posso fazer um world map carregado do banco de dados em um array e um possível sistema de batalha.

Obrigado.

=== EDIT ===

Consegui renderizar. Obrigado.

#6

I have the WampServer start installed on my machine and it already comes with Apache If I can develop this game with your tutorials the same … will run without conflict Felipe?
Mobile app development company Dubai