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 violin101
      Caros amigos, saudações...
       
      Estou com uma pequena dúvida para apresentar ao usuário uma Mensagem de ERRO após consulta de CEP.
       
      Quando o usuário digita um CEP válido o sistema demonstra em uma TABELA os valores respectivos de FRETE de acordo com os CEP.
      -----[ até aqui tudo bem ]-----
       
      Meu problema é quando o usuário digita um CEP não válido. Nesta parte gostaria de Limpar a Tabela e mostrar uma TBODY de mensagem.
       
      <div class="col-md-12" id="divCity" style="display:none; margin-top:5px; margin-left:-23px;"> <div class="col-md-12"> <div class="input-group"> <label for="cidadeUf" class="lblCitys">Cidade:</label> <input type="text" name="cidadeUf" id="cidadeUf" class="form-control" style="margin-top:-17px; background:#ffffff; border: 0 solid #ffffff;" disabled /> </div> </div> <br/> <div class="col-md-12" style="margin-top:-10px; margin-left:10px;"> <div class="table-responsive"> <table class="table tableList" id="tborden"> <thead> <tr> <th colspan="3" style="text-align:left;">Prazo de Entrega para:</th> </tr> </thead> <tbody> <tr class="message"> <td colspan="3" class="text-center">O CEP informado não foi encontrado.</td> </tr> </tbody> </table> </div> </div> <div class="col-md-12" style="margin-top:-10px; margin-left:10px;"> <span class="infprz"> <i class='fa fa-caret-right'></i>&nbsp; Os prazos de Entrega e para Retirar na Loja, iniciam-se no 1º dia útil após a data da confirmação do pagamento. </span> </div> </div>  
       
      O JavaScript está assim:
       
      //Função para Buscar Cidade e Estado Via CEPs. $(function(){ $("#btn_consulta").click(function(){ var cep = $('#cepOrg').val(); if (cep == '') { alert('Informe o CEP antes de continuar'); document.getElementById("divCity").style.display = "none"; $('#cepOrg').focus(); return false; } //Muda o Status do Button $('#btn_consulta').html('Aguarde...'); $.ajax({ url: "<?php echo base_url();?>site/produtos/consulta", type: "POST", dataType:"json", data:{cep: cep}, success:function(data){ if (data.hasOwnProperty('erro')) { /* * Caso o usuário digita um CEP não válido o sistema apresenta um ALERT. * nessa parte gostaria de mostrar a LINHA criada na Tabela anteriormente */ alert('CEP não encontrado'); document.getElementById("divCity").style.display = "none"; $('#cepOrg').val(''); $('#cidadeUf').val(''); $('#cepOrg').focus(); $('#btn_consulta').html('Consultar'); return false; } else { //Exibe os Dados Recebidos $('#cidadeUf').val(data.localidade+'/'+data.uf); //Chama a Função para Exibir a DIV oculta statusDIV(); //Chama a Função Monta Tabela, passando a Variável de Busca montaTable(cep); //Muda o Status do Button $('#btn_consulta').html('Consultar'); } } });//Fim - ajax CEP });//Fim - function button });//Fim - 1º.function function montaTable(cep){ $.ajax({ url: "<?php echo base_url();?>site/produtos/getByCep", type: "POST", dataType:"json", data:{ cep: cep}, success:function(data){ //Remove Mensagem da Tabela $("#tborden tbody tr.message").remove(); var lin = ""; for (var i = 0; i < data.length; i++) { lin += "<tr>"; lin += "<td width='30%' style='text-align:left; font-size:16px;'>" + data[i].cepRegiao + "</td>"; lin += "<td width='21%' style='text-align:left; font-size:16px;'>" + data[i].frtEntreg + "</td>"; if (data[i].vlrFrete != null && data[i].vlrFrete != 0) { lin += "<td width='20%' style='text-align:right; font-size:16px; font-weight:bold; color:#19198F;'>" + mskVlr(data[i].vlrFrete) + "</td>"; } else { lin += "<td width='20%' style='text-align:right; font-size:16px; font-weight:bold; color:#137A13;'>Frete Grátis</td>"; } lin += "</tr>"; } //Atualiza a Tabela $("#tborden tbody").empty(); //Adiciona os Itens a Tabela $("#tborden tbody").append(lin); } });//Fim - ajax Valor Frete }  
       
      Como consigo executar essa mensagem ?
       
      Grato,
       
      Cesar
    • By Felper
      É possível fazer uma imagem .png mover-se por uma tela de Canvas (esquerda, direita, cima, baixo)? Poderiam mostrar um exemplo caso seja possível. É que estou tentando fazer um jogo, onde o jogador se move em um labirinto. O jogador seria uma imagem. Agradeço desde já!
    • By violin101
      Olá amigos, saudações...
       
      Feliz 2022 para todos nós.
       
      Amigos estou com um problema de Slider, o sistema começa o Carousel de depois de algum tempo o Slider para, mesmo colocando com LOOP infinito.
       
      Alguém por favor, poderia me ajudar a entender onde está o problema e como consigo resolver ?
       
      O JS está assim:
      $(".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 Jack Oliveira
      Ola pessoal tarde ou boa noite 
       
      É o seguinte tenho mais de 10 mil registro no banco de dados, no DATATABLE esta demorando um pouco para fazer o carregamento destas informações
      o tempo varia entre 16 á 20, 25 segundos para obter uma resposta.
       
      Queria que esta resposta pudessem ser mais rápida, se teria como claro ela ser mais rápida possível...
       
      Fiz um novo teste quantidade de arquivos 1mil arquivos a resposta é bem rapida não demora nem 3 segundo 
       
      Estou usando via ajax e json
       
      <script type="text/javascript"> $(function () { $("#DataTableAjaxDT").DataTable({ "pageLength": 20, "paging": true, "lengthChange": true, "ajax": "ajax/registros.php", "searching": true, "aLengthMenu": [ [5, 10, 15, 20, 25, 30, 35, -1], [5, 10, 15, 20, 25, 30, 35, "Todos"] ], "ordering": true, "info": true, "autoWidth": true, "columnDefs": [{ "targets": 'no-sort', "orderable": false, }], "language": { "sEmptyTable": "Nenhum registro encontrado", "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros", "sInfoEmpty": "Mostrando 0 até 0 de 0 registros", "sInfoFiltered": "(Filtrados de _MAX_ registros)", "sInfoPostFix": "", "sInfoThousands": ".", "sLengthMenu": "Mostrar _MENU_ resultados por página", "sLoadingRecords": "Carregando...", "sProcessing": "Processando...", "sZeroRecords": "Nenhum registro encontrado", "sSearch": "Pesquisar", "oPaginate": { "sNext": "Próximo", "sPrevious": "Anterior", "sFirst": "Primeiro", "sLast": "Último" }, "oAria": { "sSortAscending": ": Ordenar colunas de forma ascendente", "sSortDescending": ": Ordenar colunas de forma descendente" } } }); }); </script>  
       
       
       
    • By Jack Oliveira
      Ola pessoal boa tarde preciso de um favor de vocês se assim for possível!!
       
      Seguinte  tenho uma página que ela esta em apenas em HTML porem preciso pegar umas informações do banco de dados e não sabendo como trazer os
      dados das tabelas para esta página canais.html, talvez sej ate simples em fazer isso. Mais eu não estou sabendo de como trazer estas informações ai
       
      OBS: esta página de html precisa manter da forma que esta o codigo ai apenas usar uma forma de usar as informações nela 
      bom espero que tenha entendo o que preciso aqui...
       
      segue o código 
       
      Pagina canais.html
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="language" content="pt-BR"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="{{ favicon }}"> {{ google_analytics }} <title>{{ title }}</title> <link rel="canonical" href="{{ url }}"> <meta name="description" content="{{ description }}"> <meta property="og:site_name" content="{{ site_name }}"> <meta property="og:title" content="{{ title }}"> <meta property="og:type" content="Website"> <meta property="og:url" content="{{ url }}"> <meta property="og:description" content="{{ description }}"> <meta property="og:image" content="{{ image }}"> <meta name="twitter:title" content="{{ title }}"> <meta name="twitter:url" content="{{ url }}"> <meta name="twitter:description" content="{{ description }}"> <meta name="twitter:site" content="{{ app_url }}"> <meta name="twitter:image" content="{{ image }}"> <meta itemprop="title" content="{{ title }}"> <meta itemprop="name" content="{{ name }}"> <meta itemprop="url" content="{{ url }}"> <meta itemprop="description" content="{{ description }}"> <meta itemprop="image" content="{{ image }}"> <meta property="fb:app_id" content="{{ fb_app_id }}"> <meta name="og:image:width" content="590"> <meta name="og:image:height" content="auto"> <link rel="stylesheet" href="{{ url }}assets/css/app_style.css"> <link rel="stylesheet" href="{{ url }}assets/style.css"> <!-- Pensei em chamar atraves de um script --> <script type="application/javascript" src="{{ url }}assets/js/script.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> #container-wrapper-1 {background-size:cover;background-position:left top;background-image : url('images/{{ bg2 }}?v=1gr61cu');} #container-wrapper-2 {background-size:cover;background-position:left top;background-image : url('images/{{ bg3 }}?v=1gr61cu');} #container-wrapper-3 {background-size:cover;background-position:center top;background-image : url('images/{{ bg4 }}?v=1gr673m');} div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: white no-repeat center center; } .btn-800 { background-color: {{ background_color1 }}; border-color: {{ border_color1 }}; color: {{ color1 }}; font-size:25px!important; margin: 10px; } .btn-800:hover { color: {{ color2 }}; background-color: {{ background_color2 }}; border-color: {{ border_color2 }}; margin: 10px; } .solucion { background-color: {{ background_color }}; border-color: {{ border_color }}; color: {{ color }}; width: 236px; font-size:25px!important; margin: 10px; display: block; text-align: center; } .solucion:hover { color: #fff; background-color: {{ background_color }}; border-color: {{ border_color }}; width: 236px; margin: 10px; display: block; text-align: center; } </style> </head> <body> <div class="card"> <div class="card-header white"> <strong> {{ titulo_informacao }} </strong> <p> {{ resumo }} </p> </div> <p style="text-align: center; line-height: 2.05;"> <span style="font-size: 20px;">{{ canais }}</span> </p> <p style="text-align: center; line-height: 2.05;"> <strong> <span style="font-size: 30px;">{{ play }}</span> </strong> </p> </div> </body> </html> Então seria isso ai, 
      só mais uma obs: toda vez que ser inserido ou atualizado os dados no banco que as informações seja atualizada tbm...
       
       
      Desde de já fico no aguardo
       
×

Important Information

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