HTML5 Canvas-2. Machen Sie ein kleines Spiel mit Briefen mit Leinwand

Heute werden wir Leinwand verwenden, um ein kleines Spiel von Ratenbriefen zu erstellen, und lassen Sie uns zunächst die Renderings zeichnen.

Das Spieldesign ist sehr einfach. Das System wählt zufällig einen der 26 Buchstaben von AZ aus und speichert es. Wenn Sie einen Buchstaben auf der Tastatur eingeben, fordert das System auf, ob die richtigen Zeichen kleiner oder größer sind als der von Ihnen gelegte Buchstaben, und das Spiel endet erst, wenn Sie die richtigen Buchstaben eingeben.

Im Folgenden werden einige Variablen eingeführt, die im JS -Code und deren Bedeutungen verwendet werden müssen. Das System initialisiert diese Variablen zu Beginn.

Vermutungen: Die Häufigkeit, mit der der Benutzer den Brief erraten;

Nachricht: Anweisungen zum Spielen Spielern beim Spielen des Spiels.

Briefe: Speichern Sie eine Reihe von 26 englischen Buchstaben;

Heute: Die aktuelle Zeit;

LetterToguess: Die vom System ausgewählten Buchstaben, dh die Buchstaben, die Sie erraten müssen;

HigherOrlower: fordert den Benutzer auf, ob der derzeit eingegebene Brief größer oder kleiner als die Antwort ist.

LettersGued: Briefe, die der Benutzer vermutet hat;

GameOver: Ob das Spiel vorbei ist.

var mutes = 0;

var message = "Erraten Sie den Buchstaben von a (niedriger) bis z (höher)";

var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "R", "S", "T", ",", "

var heute = neuer Datum ();

var LetterToguess = "";

var HigherOrlower = "";

var lettersgued;

var gameover = false;

Im Folgenden stellen wir das Ereignis vor, das auf das Tastaturpop-up reagiert, mit dem festgestellt wird, ob die vom Benutzer eingegebenen Buchstaben die richtige Antwort sind:

$ (Fenster) .bind ('keyUp', EventKeyPressed);

Funktion EventKeyPressed (e) {

// Bestimmen Sie zuerst, ob das Spiel vorbei ist

if (! gameover) {

// Eingabebriefe abrufen

var LetterPressed = String.fromCharCode (E.KeyCode);

// Verarbeitung von Kleinbuchstaben durchführen

LetterPressed = Letterpresse.tolowerCase ();

// 1 Spielnummer hinzufügen

Vermutungen ++;

// Speichern Sie die Eingabebuchstaben in dem erratenen Buchstabenarray

lettersgued.push (Buchstabenpresse);

// Beurteile, ob die Eingabebriefe und die Antwort konsistent sind. Wenn das Spiel endet, wenn das gleiche ist, wird das Spiel vorbei sein

if (Letterpressed == LetterToguess) {

gameover = true;

} anders {

// Erhalten Sie die Antwortposition im alphabetischen Array

var letterIndex = letters.indexof (LetterToguess);

// Holen Sie sich die Position des Eingabebuchers im alphabetischen Array

var GuessIndex = letters.indexof (Buchstabenpresse);

Debugger.log (GuessIndex);

// Richtergröße

if (GuessIndex <0) {

HigherOrlower = "Das ist kein Buchstaben";

} else if (messenIndex> letterIndex) {

HigherOrlower = "Brief ist niedriger als Sie eingegeben haben";

} anders {

HigherOrlower = "Brief ist höher als Sie eingegeben haben";

}

}

// Leinwand neu streichen

Drawscreen ();

}

}

Eine Sache, die hier zu beachten ist, ist, dass das gesamte Canvas -Objekt im Allgemeinen neu gestrichen wird, wenn wir das Bild in Leinwand ändern müssen. Jedes Mal, wenn wir den Brief erraten, werden wir Drawscreen ausführen, um alle Objekte auf die gesamte Leinwand zu zeichnen.

Mal sehen, was Drawscreen tut.

Funktion Drawscreen () {

//Hintergrund

context.fillStyle = '#ffffa';

Context.FillRect (0, 0, 500, 300);

//Kasten

context.strokestyle = '#000000';

Kontext.Strokerect (5, 5, 490, 290);

context.textbaseline = 'top';

//Datum

context.fillStyle = '#00000';

context.font = '10px_sans';

Context.FillText (heute, 150, 20);

//Nachricht

context.fillStyle = '#ff0000';

context.font = '14px_sans';

context.FillText (Nachricht, 125, 40);

// Vermutungen

context.fillStyle = '#109910';

context.font = '16px_sans';

context.FillText ('Ratees:' + Ratees, 215, 60);

// höher oder niedriger

context.fillStyle = '#00000';

context.font = '16px_sans';

context.FillText ('höher oder niedriger:' + HigherOrlower, 150, 125);

// Briefe erraten

context.fillStyle = '#ff0000';

context.font = '16px_sans';

context.fillText ('letters erraten:' + lettersgued.toString (), 10, 260);

if (gameover) {

context.fillstyle = "#ff0000";

context.font = "40px _sans";

context.filltext ("Du hast es!", 150, 180);

}

}

Der Code ist sehr einfach, es soll die Hintergrund- und Textinformationen zeichnen. Im Folgenden stellen wir die Funktion des Importierens von Bildern vor. Wenn wir auf die Schaltfläche "Canvas -Bild exportieren" klicken, wird eine neue Seite geöffnet, um das aktuelle Bild anzuzeigen. Achten Sie auf die Todataurl () -Methode, die eine 64-Bit-PNG-Bilddaten zurückgibt.

$ ('#createImagedata'). Click (function () {

window.open (thecanvas.todataurl (), 'canvasimage', 'links = 0, top = 0, width =' + thecanvas.width + ', height =' + thecanvas.height + ', Symbolleiste = 0, resizab le = 0');

});

Jeder sollte die Demo direkt durchführen, um den endgültigen Effekt zu erkennen. Demo -Download -Adresse: html5/"> html5canvas.guesshetter.zip