Gioco della Ragnatela da inserire nel blog per Halloween.

Come installare un gioco interattivo in cui si deve spostare con il mouse il ragno dalla sua ragnatela.

In un post di pochi giorni fa ho pubblicato tutta una serie di effetti per abbellire il blog per la Festa di Halloween che voglio integrare con un effetto che però è anche un gioco scoperto su Ciudad Blogger. Si tratta di una sorta di divertissement pubblicato su Sub Protocol con il nome di Verlet Spiderweb. In sostanza si potrà inserire una ragnatela con al suo interno il ragno che si muoverà in modo casuale. La ragnatela è stata creata mediante funzioni sinusoidali e la particolarità sta nel fatto che il visitatore della pagina web potrà interagire con la ragnatela e con il ragno tentando di portarlo fuori dalla ragnatela. 

Questo gioco può essere incollato in qualsiasi pagina web e si basa su due file javascript che ho caricato su Google Drive ottenendone il link diretto.

Per l'installazione su Blogger si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<script src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/ragnatela1.js' type='text/javascript'></script>
<canvas id='scratch' style='width: 580px; height: 400px; margin-left: -40px; margin-top: -30px; margin-bottom: 20px;'></canvas>
<script src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/ragnatela2.js' type='text/javascript'></script>

Si salva l'elemento pagina e si posiziona con il cursore. Mediante la modifica dei parametri in rosso si possono settare le dimensioni della ragnatela e il suo posizionamento operando sui margini. Si può anche decidere di mostrare la ragnatela in modo fluttuante all'inizio della pagina aggiungendo subito dopo quello precedente questo nuovo codice

<style>
#scratch {
position: fixed;
top: 0px;
left: 0px;
}
</style>

Potete provare a giocare aprendo questa pagina di demo



Si può decidere di mostrare la ragnatela interattiva solo in una data pagina usando i tag condizionali.