Jump to content
keven1406

Como deixar Jogo feito em JavaScritpt e HTML5 na tela toda?

Recommended Posts

Olá pessoal. Ainda não tenho muito conhecimento no desenvolvimento Web, porem já sei bastante coisa. Estou criando uma Engine para Visual Novels que vou disponibilizar como Open Source. Para quem não conhece esse tipo de game,  ele é como um livro em que você vai lendo as falas, vendo os personagens por trás e ainda com trilha sonora. Sem contar que você pode fazer escolhas que vão modificar a história. Em fim, estou quase terminando a primeira versão da minha engine. Porem não sei como fazer para colocar ela aparecendo em todo o navegador. Vou postar uma imagem aqui de como está agora:  Clique para acessar a imagem

(Sprite e background não foram feitos por mim, só usei de modelo para construir o código. Quando eu colocar no GitHub irei criar minhas proprias imagens)

 

O que quero é que ela fique fixa em toda área do navegador. O que devo estudar? Estudei DOM mas meu conhecimento ainda é pouco já que foquei mais na aprendizagem com o console e agora estou partindo pro documento. Tem como fazer isso sem um Framework? Não queria usar um Framework por que estou fazendo a Engine com puro JavaScript. Ainda estou pensando em como deixar o game responsivo (se tiverem alguma dica pra mim podem falar).

 

Um pouco sobre a Engine:

Não fiz com a Canvas porque ainda não estudei sobre ela. Fiz com o DOM normal e JS orientado a objetos. Não usei funções de ordem superior por que ainda não estudei sobre elas mas utilizei funções como setTimeout. Primeiro o usuario irá se deparar com o Menu, onde terá a opção de iniciar o jogo ou continuar. Iniciando o jogo, a personagem irá explicar um pouco sobre o poder da engine. Os textos são passados com um efeito onde aparece letra por letra. Também podemos mudar a posição do personagem como também da espressão do rosto dele apenas acrescentando as determinadas propriedades no objeto. Fora que terá música de fundo que é a unica coisa que falta implementar no projeto. Tudo isso orientado a objeto, onde só precisamos digitar em determinado objeto, a propriedade que queremos que ele tenha.

 

Sou um cara que estuda programação a 7 meses sósinho. Mas não significa que estudei JS por todo esse tempo. Estudei lógica, depois HTML5 e CSS3, um pouco de Bootstrap e por fim estou me aprofundando no JS.

 

Desde já obrigado pessoal!

 

 

Share this post


Link to post
Share on other sites

Ok. Fiz da seguinte forma:

<!DOCTYPE html>
<html lang = "pt-br">
    <head>
        <meta charset = "UTF-8"/>
        <title>Lídia Engine - Desenvolvimento de Visual Novels</title>
        <link rel = "stylesheet" href = "_css/estilo.css"/>
    </head>
    <body>
        <div id = "corpo">
    <!-- - - - - - - Aqui é o Menu inicial do jogo - - - - - - - - - - -->
            <section id = "menu">
                <img src = "_imagens/_background/menu-foto.jpg" id = "fundo-menu" alt= "foto do menu"/>
                <h1 id = "titulo-do-menu">Lídia Engine</h1>
                <button id = "continuar" onclick = "continuar()">Continuar</button>
                <button id = "botao-iniciar" onclick = "iniciarOuVoltar(true)">Iniciar</button>
            </section>
    <!-- - - - - - - Aqui é a parte onde o jogo inicia - - - - - - - - -->
            <section id = "jogando">
              	<!-- A seguir as tags img estão no css com position: absolute; -->
                <img src = "" id = "fundo-jogo"/> <!-- Aqui fica o background do game que pode ser auterado com JS -->
                <img src = "" id = "esquerda"/>   <!-- Aqui é um slote onde ficará o personagem na posição direita(pode ser alterado com JS) -->
                <img src = "" id = "emocao-esquerda"/> <!-- Aqui ficará a expressão que  ficará sobre o rosto do personagem que está a esquerda. A expressão facial e a posição da mesma é auterada apenas digitando no objeto a posição desejada. As proximas são a mesma coisa -->
                <img src = "" id = "centro"/> 
                <img src = "" id = "emocao-centro"/>
                <img src = "" id = "direita"/>
                <img src = "" id = "emocao-direita"/>
                <div id = "caixa-de-textos"> <!-- caixa onde o texto será apresentado. Terá dois botões, um para avançar e outro para voltar. Os buttons estão estilisados com position: absolute. -->
                    <p id = "falas">Precione proximo para começar</p>
                    <button onclick = "trocaDeFalas(1)" id = "botao-avancar">Avançar</button>
                    <button onclick = "trocaDeFalas(0)" id = "botao-voltar">Voltar</button>
                </div>
    <!-- - - - - - - Menu de ferramentas contendo o botão salvar e sair - - - - - - -->
                <div id = "menu-ferramentas">
                    <section>
                        <button id = "salvar" onclick = "salvar()">Salvar</button>
                        <button id = "sair" onclick = "iniciarOuVoltar(false)">Sair</button>
                    </section>
                </div>	
            </section>
        </div>
      	<!-- Demais códigos que não há necessidade de postar aqui -->
        <script src = "_javascript/var.js"></script>
        <script src = "_javascript/script.js"></script>
    </body>
</html>

Essa estrutura é tudo que preciso para fazer a engine funcionar. Isso é a base para os eventos que vão ocorrer quando pressionar  os botões avançar ou voltar na caixa de texto.

 

A área onde o jogo está acontecendo está estilisada assim no css:

/*caixa onde o jogo está sendo apresentado*/
#corpo {
	width: 1100px;
	margin: auto;
    height:620px;
	box-shadow: 0px 0px 5px black;
	background-color: #606060;
	padding: 5px;
	position: relative;
}
#fundo-jogo {
	width:1100px;
	margin: 0px;
}

Meu problema é como deixar essa aba no navegador todo. Não queria usar framework mas também não quero uma resposta pra eu dar ctrl + c e ctrl + v. Queria saber exatamente o que deve estudar pra fazer isso. Se é um framework, se é determinado assunto do JS ou CSS? Ou até mesmo html5. Obrigado pessoal.

Share this post


Link to post
Share on other sites
Agora, Rapadura disse:

Olá, bem ?
 

Acho eu que não tem como você deixar ele na tela inteira (do pc ) somente apertando F11 

 

ou você quer ele full screen na tela do navegador ?

 

Abraços.

 

:star: 

Isso, queria que ele ficasse dentro da área de todo o navegador. Por exemplo: 

clique nesse link para ver o exemplo

 

Assim dessa forma. Independente do tamanho da tela do usuário.

Share this post


Link to post
Share on other sites
15 horas atrás, Rapadura disse:

 


#corpo {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

Resolve ?

Tentei utilizar isso, no entanto só fica a parte do cenário em todo o navegador. Os personagens ficam fora do lugar. Durante minhas pesquisas, encontrei algo relacionado a media queries. Estudei CSS antes mas não cheguei a estudar isso. Vou dar uma estudada e ver se isso vai resolver alguma coisa.

Share this post


Link to post
Share on other sites

Eu tentaria pegar dinamicamente a largura pelo JS...

 

Algo +/- assim:

http://www.html5gamedevs.com/topic/1638-changing-game-size-to-fit-page/

 

 

Já q trabalhar (pelo menos no inicio) apenas com % pode ser problemático.

Faz mas sentido você fazer os cálculos necessários pensando em pixel e esticar essa imagem.

 

 

Da uma lida sobre box-model, grid-system, tabless.

Entender esses conceitos de CSS/HTML que podem ser úteis mesmo em dev de games (em web)

 

Da uma olhada como os grandes FW-Css fazem...pPode ser de grande ajuda.

https://v4-alpha.getbootstrap.com/layout/grid/

http://materializecss.com/grid.html

 

 

  • +1 1

Share this post


Link to post
Share on other sites
Em 15/05/2017 at 20:53, gabrieldarezzo disse:

Eu tentaria pegar dinamicamente a largura pelo JS...

 

Algo +/- assim:

http://www.html5gamedevs.com/topic/1638-changing-game-size-to-fit-page/

 

 

Já q trabalhar (pelo menos no inicio) apenas com % pode ser problemático.

Faz mas sentido você fazer os cálculos necessários pensando em pixel e esticar essa imagem.

 

 

Da uma lida sobre box-model, grid-system, tabless.

 

Pode ajudar a você pegar alguns conceitos de CSS/HTML que podem ser úteis.

 

Da uma olhada como os grandes FW-Css fazem:

https://v4-alpha.getbootstrap.com/layout/grid/

http://materializecss.com/grid.html

 

Pode ser ajudar.

Obrigado, era isso que eu queria. Algo pra estudar para poder conseguir fazer o game ficar responsivo. Obrigado

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) {$vativochk = "checked";} else {$vativochk = "";} echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo ' </tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
      //funcoes do grid dos graficos function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.