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 Adriano Costa
      Fala galera!!!
      Eu sou novo na programação e estou precisando de uma ajuda, estou tentando fazer um for dentro dos scriplets mas esta dando erro. É a parte do read do meu crud. Quando eu aço o for através da camada controller ele funciona, mas na pagina jsp ele da um erro.
       
      <%@ page language="java" contentType="text/html; charset=utf-8"
          pageEncoding="utf-8"%>
      <%@page import="model.JavaBeans"%>
      <%@page import="java.util.ArrayList"%>  
      <%
          ArrayList<JavaBeans> lista = (ArrayList<JavaBeans>)request.getAttribute("contatos");
          for (int i = 0; i < lista.size(); i++){
              out.print(lista.get(i).getIdlista());
          }
      %>
       
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Lista de Tarefas</title>
      <link rel="stylesheet" href="css/styles.css">
      </head>
      <body>
          <div id= "login-container">
              <h1>Lista de Tarefas</h1>
              <table>
                  <thead>
                      <tr>
                          <th>Código</th>
                          <th>Titulo</th>
                          <th>Descrição</th>
                          <th>Data</th>
                          <th>Status</th>
                          <th>Prioridade</th>
                      </tr>
                  </thead>
                  <tbody>
                      
                  </tbody>
              </table>
              <form name="frmContato" action="listarTarefa">
                  
                  <input type="submit" value="Cadastrar" onclick="validar()">
              </form>
              
          </div>
          <script src="scripts/validador.js"></script>    
      </body>
      </html>
       
      E esse é o erro
       
      HTTP Status 500 – Internal Server Error
      Type Exception Report
      Message An exception occurred processing [/listaTarefas.jsp] at line [8]
      Description The server encountered an unexpected condition that prevented it from fulfilling the request.
      Exception
      org.apache.jasper.JasperException: An exception occurred processing [/listaTarefas.jsp] at line [8] 5: 6: <% 7: ArrayList<JavaBeans> lista = (ArrayList<JavaBeans>)request.getAttribute("contatos"); 8: for (int i = 0; i < lista.size(); i++){ 9: out.print(lista.get(i).getIdlista()); 10: } 11: %> Stacktrace: org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:611) org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:500) org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:378) org.apache.jasper.servlet.JspServlet.service(JspServlet.java:326) javax.servlet.http.HttpServlet.service(HttpServlet.java:733) org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53) Root Cause
      java.lang.NullPointerException org.apache.jsp.listaTarefas_jsp._jspService(listaTarefas_jsp.java:126) org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:71) javax.servlet.http.HttpServlet.service(HttpServlet.java:733) org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:467) org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:378) org.apache.jasper.servlet.JspServlet.service(JspServlet.java:326) javax.servlet.http.HttpServlet.service(HttpServlet.java:733) org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53) Note A pilha de erros completa da causa principal está disponível nos logs do servidor.
       
       
      esse é o Medoto
       
      // Listar tarefa
              protected void tarefas(HttpServletRequest request, HttpServletResponse response)
                      throws ServletException, IOException {
                  //Criando um objeto que irá receber os dados do JavaBeans
                  ArrayList<JavaBeans> lista = dao.listarTarefa();
                  
                  request.setAttribute("tarefas", lista);
                  RequestDispatcher rd = request.getRequestDispatcher("listaTarefas.jsp");
                  rd.forward(request, response);
                  
                  //Teste de recebimento da lista
                  for(int i = 0; i<lista.size(); i++) {
                      System.out.println(lista.get(i).getIdcon());
                      System.out.println(lista.get(i).getTitulo());
                      System.out.println(lista.get(i).getDescricao());
                      System.out.println(lista.get(i).getData());
                      System.out.println(lista.get(i).getStatus());
                      System.out.println(lista.get(i).getPrioridade());
                  }
              }
          
    • By Leandro T.
      $.ajax({
             
           url: 'ajaxfile2.php?xis=<?php echo $PerguntasRow["pergunta_id"];?>&resx=<?php echo $_SESSION["respon"]; ?>', 
           type: 'POST',
           data: form_data2<?php echo $PerguntasRow["pergunta_id"];?>, 
           dataType: 'json',
           contentType: false,
           processData: false,
             
           success: function (data)  {  }
            }); 
               
              
      }
                       Pessoal, boa tarde! não estou conseguindo fazer o ajaxfile2.php receber os parâmetros deste ajax
       
       
    • By violin101
      Caros Amigos,
       
      saudações...
       
      Desculpa a recorrer ao auxílio dos amigos, mas estou com um pequeno problema que não estou conseguindo entender.
       
      A página inicial do meu Sistema tem um CAROUSEL com um SLIDER que deveria iniciar junto com a página. 
      INFELIZMENTE algumas vezes não inicia e para EXECUTAR o o Slider deve pressionar F5.
       
      Algumas vezes quando o Slider inicia depois de um período para o LOOP, não entendo isso.
       
      Abaixo o código do SLIDER.
      /*----------------------------------------*/ /* 01. Main Slider Ativação e Velocidade do Slide /* /* Como consigo resolver esse problema para o Slider INICIAR com um LOOP infinito /* sem ter que ficar atualizando a página ? /* /*----------------------------------------*/ $(".slider_active").owlCarousel({ loop: true, margin: 0, nav: true, autoplay: true, infinite: true, items: 1, autoplayTimeout: 10000, navText: ["<i class='fa fa-caret-left'></i>", "<i class='fa fa-caret-right'></i>"], dots: true, autoHeight: true, lazyLoad: true });  
      Grato,
       
      Cesar
    • By Person
      Estou fazendo um protótipo de e-commerce com aps clássico e sql server, na parte de administração, o usuário administrativo pode alterar o status do pedido,  para isso ele clica no botão de alterar na pagina principal e é redirecionado para um formulário onde tenho as options, para que ele mude o status, coloquei um botão para que ele passe os parâmetros  (id_pedido e id_status_pedido) para a pagina de manutenção, onde é feito o update e o envio de e-mail com as atualizações. Mas quero retirar esse botão e fazer com que, assim que eu clique em uma opção, ele altere, sem eu precisar ser redirecionado para a tela de manutenção, isso com o Ajax se possível.
       
      <body> <% call Abredb() cod = Request.QueryString("cod") evt = Request.QueryString("evt") if cod <> "" then cod = cint(cod) end if if ucase(evt) = "ALT" then sql = "exec SP_TR32_status_frm_SEL" 'Response.Write(sql) 'Response.End() set rs = dbWeb.execute(sql) estrato = rs("id_status_pedido") bot = "Alterar" end if %> <div class="container"> <div class="titulo">Formulario</div> <form action="manu_pedido.asp" method="post" enctype="multipart/form-data"> <div class="detalhes-formulario"> <div class="input-box"> <span class="detalhes">status</span> <select class="form-control" name = "status"> <% do while not rs.eof%> <option value="<%=rs("id_status_pedido")%>"><%=rs("descricao")%></option> <% rs.movenext loop rs.close set rs = nothing %> </select> </div> </div> <button><a href="/treinamento/Thau/mini_mercado/adm/manu_pedido.asp?evt=alt&cod="<%=cod%>"&estrato="<%rs("id_status_pedido")%> </form> </div> <br> </body> <%call Fechadb()%> </html> Abaixo está o código da minha pagina de manutenção, no qual acontece a alteração do status
      <% Function ZerosEsquerda(Num,tam) Dim Zero Num = Trim(Num) Zero = "" For i = Len(Num) To tam - 1 Zero = "0" & Zero Next ZerosEsquerda = Trim(Zero & Num) End Function byteCount = Request.TotalBytes RequestBin = Request.BinaryRead(byteCount) Set UploadRequest = CreateObject("Scripting.Dictionary") BuildUploadRequest RequestBin 'opc = request.QueryString("opc") 'if opc = "" then 'cod = UploadRequest.Item("hfcod").Item("Value") 'botao = UploadRequest.Item("botao").Item("Value") 'estrato = UploadRequest.Item("estrato").Item("Value") 'end if session.LCID = 1046 call Abredb() if botao = "Alterar" then ' ALTERANDO OS DADOS RECEBIDOS NA TABELA sql = "exec SP_TR32_pedido_UPD "&cod&", '"&estrato&"'" 'response.write sql 'response.end dbWeb.execute(sql) str_html = "" str_html = str_html & "<HTML><BODY BGCOLOR=#0000FF>" str_html = str_html & "<h1>produtos</h1>" sql ="SP_TR32_email__itens_sel "&cod&"" set rs = dbWeb.execute(sql) str_html = str_html & "<table>" str_html = str_html & "<thead>" str_html = str_html & " <tr>" str_html = str_html & "<th>Produtos</th>" str_html = str_html & "<th>quantidade</th>" str_html = str_html & " <th>Total</th>" str_html = str_html & "</tr>" str_html = str_html & " </thead>" str_html = str_html & "<tbody>" do while not rs.eof str_html = str_html & "<tr>" str_html = str_html & "<td >"&rs("produto")&"</td>" str_html = str_html & "<td >"&rs("quantidade")&"</td>" str_html = str_html & "<td >"&rs("total")&"</td>" str_html = str_html & "</tr>" rs.movenext loop rs.close set rs = nothing str_html = str_html & " </tbody>" str_html = str_html & "</table>" str_html = str_html & "</BODY></HTML>" sql = "SP_TR32_email_sel "&cod&"" set rs = dbWeb.execute(sql) if estrato<>"" then Set ObjMail = Server.CreateObject("Cdonts.Newmail") objMail.Subject = "Atualização de pedido" objMail.From = "Porto Dourado <contato@email.websupply.com.br>" objMail.To = "request("email")" objMail.BodyFormat = 0 objMail.MailFormat = 0 objMail.Body = "Olá"&" "&rs("nome")&" "&rs("sobrenome")&", </br> Houve uma atualização em seu pedido pedido: "&rs("id_pedido")&" </br> o status mudou para: "&rs("descricao")&" </br> endereço de entrega: "&rs("cep")&", "&rs("rua")&", "&rs("bairro")&", "&rs("numero")&", "&rs("cidade")&", "&rs("Uf")&" </br>Total pedido: "&rs("total_pedido")&" </br> "& str_html &" </br></br>"&" Atentamente,"&" </br> "&"Equipe Porto dourado"&" </br></br> "&"Para entrar em contato com a equipe de suporte, entre em contato com o email ou ligue para nossa central no numero " objMail.Send Set objMail = nothing envio = true %> <script> alert('email com alteração enviado com sucesso!'); </script> <% end if if estrato = 6 then sql = "exec SP_TR32_adm_data_envio_UPD "&cod&"" dbWeb.execute(sql) end if if estrato = 4 then sql = "exec SP_TR32_adm_data_entregue_UPD "&cod&"" dbWeb.execute(sql) end if %> <script> alert("Dados alterado com sucesso!") parent.location = "cst_pedido.asp" </script> <% end if %> <%call Fechadb()%>  
    • By srs1999_
      Tópico
       
      Site em Código
      Sobre desenvolver sites sem o wordpress que ja tá tudo ali feito que seja um site dinâmico ou seja com banco de dados , APIs de pagamento, Painel para o usuário ,  além de todas  as funções que tem no wordpress e você teria propriedade pra explicar sobre detalhes mais técnicos da produção onde no wordpress só quem entende de progrqmação explicaria algum detalhe técnico 
      Então usando basicamente : 
      FRONT END 
      HTML 
       CSS 
      JAVASCRIPT 
      ALGUMA DE BACKEND COMO PHP E BANCO DE DADOS
      Pode se criar sites/sistemas tão bons ou melhores que no wordpress
       
      Fato : o proprio wordpress é feito em php e ate o proprio facebook tbm em php
      Fato 2 :  cerca de 70% dos sites são feitos em Wordpress
       
      Acho esse lance de procurar o caminho mais fácil limita muito a pessoa por exemplo é facil editar imagens no paint bem intuitivo , agora para editar no photoshop com muitas outras possibilidades  acaba sendo importante ir explorando essa elaboração mais difícil  com um mesmo objetivo. No caso do exemplo ( editar imagens )  
       
      Reflexão:
      Vale a pena se dedicar a trabalhar com a ferramenta Wordpress apenas por ser um meio rápido de ganhar dinheiro ?
      Ou trabalhar sem wordpress  usando tudo que exigido pra criar coisas originais mais que não seria tão rápido a produção. Mas creio que além dos sites feitos também geraria a possibildade de vender o sistema web criado para o cliente personalizar .
       
      Você Desenvolveria de que forma :
       Wordpress apenas ?
       
      Conhecer programação pra trabalhar 
      com  Wordpress ?
       
      Produzir tudo só com programação totalmente dinâmico sem  Wordpress?
×

Important Information

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