Harry Harrison's HTML Playbook

Olá pessoal! Desde meus tempos de escola, eu realmente amo ficção científica. Naqueles primeiros dias, meu favorito era o ciclo de romances de Harry Garrison sobre o Rato de Aço. Um dia resolvi levar para casa da biblioteca da escola um fichário da revista "If" para o fim de semana. Olhando as revistas, encontrei numa delas um livro-jogo do referido escritor de ficção científica. A obra se chama "Torne-se um rato de aço" e é uma busca de texto em que o leitor, no decorrer da trama, deve escolher as opções de ação a partir das propostas. Foi especialmente interessante vagar pelo labirinto. Não havia necessidade de ir para lá sem caderno e lápis!

Não faz muito tempo, eu me perguntava se existiam variantes da implementação deste jogo em alguma linguagem de programação na Internet. Pesquisando na web, encontrei este site . No site você pode ver um script que gera um arquivo html pronto com um livro. O link para a fonte no script não leva a lugar nenhum. O recurso está bloqueado. Não estava interessado no roteiro, mas em seu produto e no que poderia ser melhorado neste produto. Abaixo do roteiro, nos comentários, existem dois links. Um jogo pronto é aberto sobre eles. Usando as ferramentas do navegador, você pode visualizar o código-fonte.

Aparência

A versão original é parecida com esta:

Muito chato. Decidi adicionar uma imagem de fundo, mudar a cor de fundo do texto, tamanho da fonte e algumas outras mudanças. Os detalhes estarão abaixo. Ficou assim:

, . .

. , . , .

. . :

. css-:

i {
	cursor: pointer;
	background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAEBAQEBAQEBAQECAQECAgMCAgICAgQDAwIDBQQFBQUEB	QUFBggHBQYHBgUFBwkHBwgICQkJBQcKCgoICggJCQj/wgALCAAtACwBAREA/8QAGwAAAgMBAQEAAAAAAAAAAAAABgcEBQgCAwn/2gAIAQEAAAAB+zdD	Wxyy5FAAc4AtfBIfe0adbXjDJ+UuXGa9nRF1ti8ReInBsko//8QAHhAAAgMBAQADAQAAAAAAAAAABAUBAgMABhESExT/2gAIAQEAAQUC23rhXT9LxNx46Cv	ykUyhMdGn2s2IYV6qi9uJ0MBHqwNDJGIzLHpMQOyy23J5nWJFMr9aeTcUoBiw/lC1YyTAZND7mD5cbNddfEAVaLfTLZwpnlr8w0/DPW55FSxt22y1eMqA5340I	mWXp26ojyqc/wBNZSmXJBu//8QANRAAAgECAwQFCgcAAAAAAAAAAQIDAAQRITEFEhNBEBRRYaEiJDJSU3GBkbHhBkJDcsHC0f/aAAgBAQAGPwLFgWY5Ko1Y	1vXU5iX2cRw8dayt9/vbWsUZ4+4tvCsNJBqOiW7bPMpEOwff/KgjsVXiyEgyyejF8OdFrnat3PMeYmKD5LSx8TrGeAkbWo7tZmYqccCcjUNzFnG67wq0jGixL9K2	YqjzdZDLIfcMAPHw6Ix+YvRq4tZv0Z9we4qrf2q2jnUvcRebS9zrl4jA0E4W7HiDrnkcanS3Q70Z3W54HCg7XflgeguYrhKcF1Y9g5mr7ahUxxz3bsgPYFVfqpq/2r	aw8VpFTirjpun0vkT8qZYCt2VALKh8oD3ULYR8FPUAwxP81iIuqwevJ5K/eoPw/sKUvdSk9bm9ggOp9XuGpyq02bZpuW0KCNR0SX1lOdnXAXQDeTly5acjTWnX	7iXBeHiLhlGOWeHw8a6xcbae1XcCtw48ZGH7mJw05Cuq7Ot+ChO87E4tI3ax5no//8QAIxABAAEDBAICAwAAAAAAAAAAAREAITFBUWGBEHGRobHh8P/aAAgB	AQABPyEqxIGdgVfUsJ+Ru6gr73E/JlqZ5yH4hx1FNLcYbJueByIk0WF7E+qLSPukAzuOhxQ2XA7eIgpxNKh4mzFl5qU2VaGpHNMPBcE6UzklnNtQPJc6r2mfg/LyD0	H78Qb26cP5Kq0e745LoKYNx4vQZaYpG8I4IGJ9NXxDiMb26dNGYrOxr/B4cCmRDpTYK7Qdh4c0owRRcCOuIS+KSNRXOjKpqXev7Yaz9CWrIs9hBjaZWuCSLV6n	FkGfbmvunXUnUitIcWA4oVjEQY3zu1o9mPoOicwXIG9RPIIHstu274//2gAIAQEAAAAQ2dRilY//xAAhEAEBAAICAgMAAwAAAAAAAAABEQAhMUFRYRBxgZGhwf/	aAAgBAQABPxCWwNoyhKHSqoAKoFyNtZF/Ggp5TeHJYaOLr3/oYqGcsVdn0/b3llDWp5X2cUdi76XCLvgQuH7VnJHWMFrCpmiO1uCq5PGT7rUN6R+3ASpkpRBA	DZpsNi1wp72Lwl4AKM6c5+K8UCqnY0fY5YWk9kv6TGNaoB9kOE+G/lT8LF/k4NnJgUQ3s0thUGxBwMpLQDQaLlWnddQSJsOnKgTTCGICgXiXGrMihvNBj7PI4Kk	PKg1HoC/1zjTHn2P0ezQTkwAlegiHQE2iKtFDBaAq17SIHaW6x4rugOBoqKtKub+vSsjRplWzSnRjAnKRqMeUdR0AB+C0A61Tsq9riCIgEiJRMMifRjYvlnAnk5eelvIr	ZUqRz3rYO3LAmNdBkFRMXKK4ZalhVTlfj//Z');
	display: block;
	width: 44px; height: 45px;
	margin-top: 10px;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

<i onclick="Coin([32,118])" title=""></i>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , :

Coin



:

function coin(n) {
	location.hash = '#a' + n[Math.floor(Math.random() * n.length)];
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. , img



:

<img src="images/coin.png" onclick="coin([190,277])" title=""></img>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

img {
	cursor: pointer;
	display: block;
	width: 55px; height: 55px;
	margin-top: 10px;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

html {
	background: url(images/background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

body {
	background: #EDDDB5; 
	color: black;
	font: 20px/1.4em Helvetica, 'Trebuchet MS', Arial, sans-serif;
	padding: 20px;
	margin: 100px;
}

header {
	font-size: 25px;
	margin: 0 0 20px;
	padding: 0 0 5px;
	border-bottom: 2px solid #ccc;
	color: #DD5F5F;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

html {
	background: white;
}

body {
	background: #eee; 
  color: black;
	font: 14px/1.4em Helvetica, 'Trebuchet MS', Arial, sans-serif;
	padding: 20px;
	margin: 100px;
}

header {
	font-size: 25px;
	margin: 0 0 20px;
	padding: 0 0 5px;
	border-bottom: 2px solid #ccc;
	color: #ccc;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . , . :

<i onclick="Coin([80])" title=""></i>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

 ? [<a href="#a80">80</a>]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

html- , .

, . !