‹ Voltar

Código HTML de um LIVRO-JOGO

Este código HTML, CSS e JavaScript serve como uma estrutura para um livro-jogo interativo, permitindo que o leitor faça escolhas que influenciam o enredo da história. O HTML define a estrutura da página, o CSS cuida do estilo visual, como fontes e cores, e o JavaScript gerencia a lógica do jogo, permitindo que cada escolha apresentada direcione o leitor para diferentes partes da narrativa. Com opções e parágrafos dinâmicos que mudam de acordo com as decisões tomadas, o projeto pode ser usado como base para criar histórias interativas. Ideal para quem deseja desenvolver ou editar um livro-jogo digital, o código é fácil de adaptar e expandir para novas opções e finais. Faça as edições necessárias nos locais indicados.

O código abaixo pode ser copiado e usado, lembrando de manter os devidos créditos:

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LIVRO-JOGO</title>  <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; text-align: justify; } .container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { margin-bottom: 20px; } .options { margin: 20px 0; } button { padding: 10px 20px; font-size: 16px; margin: 10px; cursor: pointer; } .back-button { margin-bottom: 20px; background-color: #007BFF; color: white; border: none; border-radius: 5px; } .hidden { display: none; } </style> </head> <body> <div class="container"> <button class="back-button hidden" id="backButton" onclick="goToStart()">VOLTAR AO INÍCIO</button> <h1 id="story-title">TÍTULO DO LIVRO-JOGO</h1> <div id="story-text"> <p>1º PARÁGRAFO.</p> <p>2º PARÁGRAFO.</p> </div> <div class="options"> <button id="option1" data-next="1" onclick="chooseOption(1)">OPÇÃO 01</button> <button id="option2" data-next="2" onclick="chooseOption(2)">OPÇÃO 02</button> </div> </div> <script> const storyData = { 1: { text: "<h1>TÍTULO DE OPÇÃO 01</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: { 1: "OPÇÃO 03", 2: "OPÇÃO 04" }, next: { 1: 3, 2: 4 } }, 2: { text: "<h1>TÍTULO DE OPÇÃO 02</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: { 1: "OPÇÃO 05", 2: "OPÇÃO 06" }, next: { 1: 5, 2: 6 } }, 3: { text: "<h1>TÍTULO DE OPÇÃO 03</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: { 1: "OPÇÃO 07", 2: "OPÇÃO 08" }, next: { 1: 7, 2: 8 } }, 4: { text: "<h1>TÍTULO DE OPÇÃO 04</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: { 1: "OPÇÃO 09", 2: "OPÇÃO 10" }, next: { 1: 9, 2: 10 } }, 5: { text: "<h1>TÍTULO DE OPÇÃO 05</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: { 1: "OPÇÃO 11", 2: "OPÇÃO 12" }, next: { 1: "final11", 2: "final12" } }, 6: { text: "<h1>TÍTULO DE OPÇÃO 06</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: { 1: "OPÇÃO 13", 2: "OPÇÃO 14" }, next: { 1: "final13", 2: "final14" } }, 7: { text: "<h1>TÍTULO DE OPÇÃO 07</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: { 1: "OPÇÃO 15", 2: "OPÇÃO 16" }, next: { 1: "final15", 2: "final16" } }, 8: { text: "<h1>TÍTULO DE OPÇÃO 08 - FIM</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: {}, next: {} }, 9: { text: "<h1>TÍTULO DE OPÇÃO 09 - FIM</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: {}, next: {} }, 10: { text: "<h1>TÍTULO DE OPÇÃO 10 - FIM</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: {}, next: {} }, final11: { text: "<h1>TÍTULO DE OPÇÃO 11 - FIM</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: {}, next: {} }, final12: { text: "<h1>TÍTULO DE OPÇÃO 12 - FIM</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: {}, next: {} }, final13: { text: "<h1>TÍTULO DE OPÇÃO 13 - FIM</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: {}, next: {} }, final14: { text: "<h1>TÍTULO DE OPÇÃO 14 - FIM</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: {}, next: {} }, final15: { text: "<h1>TÍTULO DE OPÇÃO 15 - FIM</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: {}, next: {} }, final16: { text: "<h1>TÍTULO DE OPÇÃO 16 - FIM</h1><p>1º PARÁGRAFO.</p><p>2º PARÁGRAFO.</p>", options: {}, next: {} } }; function chooseOption(option) { const storyId = document.getElementById('option' + option).getAttribute('data-next'); const story = storyData[storyId]; if (story) { document.getElementById('story-text').innerHTML = story.text; // Atualiza o texto // Verifica se chegou ao final if (Object.keys(story.options).length === 0) { document.getElementsByClassName('options')[0].style.display = 'none'; // Oculta as opções } // Mostra o botão "VOLTAR AO INÍCIO" se não estiver no primeiro texto document.getElementById('backButton').classList.toggle('hidden', storyId === "1"); if (story.options) { document.getElementById('option1').innerText = story.options[1]; document.getElementById('option2').innerText = story.options[2]; document.getElementById('option1').setAttribute('data-next', story.next[1]); document.getElementById('option2').setAttribute('data-next', story.next[2]); } } } function goToStart() { // Redireciona para a página inicial window.location.href = 'https://profrnsantos.ceducap.com.br/RPG.html'; } </script> </body> </html>

https://profrnsantos.ceducap.com.br/RPG.html

--- Compartilhar ---

+55 41 97400-8827

roberto.n.santos@outlook.com