February 27
Molti basate su browser giochi per computer disponibili online vengono creati utilizzando Adobe Flash, un costoso ambiente di authoring di proprietà a disposizione quasi esclusivamente ai professionisti. Fortunatamente, c'è un'alternativa a Flash che permette agli utenti meno esperti possono creare giochi basati su browser senza alcun costo. È possibile creare giochi dinamici e unici basati su browser inserendo codice JavaScript in ordinarie pagine web HTML.
1 Utilizzare elementi del modulo HTML per creare interfacce utente semplici per il vostro gioco. È possibile creare pulsanti, campi di testo, caselle di controllo, menu e pulsanti di opzione in un modulo HTML (vedi Bibliografia 1, sezione 17.4.1). Ad esempio, i seguenti 10 righe di codice HTML rendono una semplice interfaccia per raccogliere il nome di un giocatore:
<Html>
<Body>
Congratulazioni, avete stabilito un nuovo record!
<Form name = "hsform">
Per favore inserisci il tuo nome:
<Input type = "text" name = "hsname">
<Input type = valore "pulsante" = "Invia">
</ Form>
</ Body>
</ Html>
2 Fare riferimento a elementi HTML modulo in codice JavaScript incorporato utilizzando il Document Object Model (vedi Bibliografia 2, capitolo 8). Ad esempio, la seguente funzione JavaScript recupera il nome del giocatore dal campo di testo creato nel passaggio 1. Inserire questo codice tra le prime e seconde linee di codice dal passo 1.
<Head>
<Script language = "JavaScript">
funzione di risposta ()
{
alert ( "Grazie," + document.hsform.hsname.value);
}
</ Script>
</ Head>
3 Chiamare funzioni JavaScript in risposta a un'azione dell'utente in una forma utilizzando attributi speciali del tag <input>. Ad esempio, per rendere il pulsante "Invia" creato nel passaggio 1 chiamata la funzione JavaScript aggiunto nel passaggio 2, modificare il codice HTML del pulsante al seguente:
<Input type = valore "pulsante" = "Invia" onclick = "rispondere ()">
4 Utilizzare questo codice, un esempio modificato dalla sorgente JavaScript, per determinare le coordinate del cursore del mouse dell'utente nella finestra del browser (vedi riferimenti 3):
<Script language = "JavaScript">
var Coords = new Array (2);
var IE = document.all vero:? false;
if (! IE) document.captureEvents (Event.MOUSEMOVE)
document.onmousemove = updateCoords;
var tempX = 0;
var tempY = 0;
updateCoords funzione (e) {
if (IE) {// afferrare le pos.s xy se il browser è IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {// afferrare i pos.s xy se il browser è NS
tempX = e.pageX;
tempY = e.pageY;
}
}
getCoords function ()
{
Coords [0] = tempX;
Coords [1] = tempY;
tornare Coords;
}
</ Script>
5 Utilizzare elementi del modulo per fornire un feedback per l'utente così come la ricezione di input. Ad esempio, la seguente riga di codice JavaScript utilizza l'elemento di input di testo creato nella sezione "User ingresso" per l'output testuale:
document.hsform.hsname.value = "Grazie per giocare!"
6 Nascondere e mostrare immagini o altri elementi in documenti HTML facendo riferimento la loro proprietà di stile nel DOM, come in questo pagina di esempio tratto dal di Goodman "JavaScript e DHTML Cookbook" (vedi Bibliografia 2, pagina 361):
<Html>
<Head>
<Script language = "JavaScript">
Funzione OnOff ()
{
. Var state = document.getElementById ( "immagine") style.visibility;
se (== stato "nascosto")
{
Stato = "visible";
}altro{
Stato = "hidden";
}
. Document.getElementById ( "immagine") style.visibility = Stato;
}
</ Script>
</ Head>
<Body>
<Img id = "image">
<Form> <input type = valore "pulsante" = "On / Off" onclick = "OnOff ()"> </ form>
</ Body>
</ Html>
7 Manipolare molti altri elementi della finestra del browser con i riferimenti DOM nel codice JavaScript. Ad esempio, è possibile modificare le dimensioni dei telai, causare la pagina per scorrere, cambiare il colore di sfondo, e visualizzare le finestre di dialogo di avviso come si è visto nella sezione "Input utente". Vedere la sezione Risorse per un elenco di esempi di codice che dimostrano l'ampio spettro di influenza si può affermare su browser di un utente con JavaScript.
8 Utilizzare i riferimenti DOM, speciali meccanismi di temporizzazione JavaScript e proprietà di stile CSS per animare agevolmente immagini o altri oggetti HTML attraverso la finestra del browser. Sostituire il <script> </ script> blocco nel codice di esempio dal passaggio 2 con il seguente per creare una semplice animazione, come adattato dal JavaScript e DHTML Cookbook (vedi riferimenti 2, pagina 417):
<Style>
img {position: absolute; top: 100px; sinistra: 0px;}
</ Style>
<Script language = "JavaScript">
var imgX = 0, muoversi;
Funzione OnOff ()
{
mossa = setInterval (animare, 100);
}
la funzione animate ()
{
. Document.getElementById ( "immagine") style.left = imgX + 'px';
imgX = imgX + 10;
if (imgX> 500) {clearInterval (mossa);}
}
</ Script>
9 Unire le funzioni di ingresso e di uscita nel codice JavaScript con una funzione principale che controlla l'esecuzione del gioco.
10 eseguire automaticamente la funzione principale non appena la pagina viene caricata utilizzando la seguente riga di JavaScript posizionati subito dopo la funzione principale all'interno del <script> </ script> Blocco:
window.onload = mainFunctionName;
11 Utilizzare la funzione alert () in JavaScript per aiutare il debug del gioco come lo si crea. È sufficiente posizionare diversi avvisi in punti diversi nel codice, quindi aprire la pagina e seguire l'esecuzione dall'ordine delle segnalazioni. È inoltre possibile visualizzare i dati di debug utile in ogni finestra di avviso, come ad esempio il valore di un contatore loop o altra variabile.
12 Pubblica il tuo documento HTML e le immagini a un sito web, e invitare le persone a giocare il vostro gioco, senza Flash richiesto il plug-in.