html5 Canvas-2. Verwenden Sie Canvas, um ein kleines Spiel zum Erraten von Buchstaben zu erstellen

Heute werden wir mit Canvas ein kleines Buchstaben-Ratespiel erstellen. Schauen wir uns zunächst die Darstellungen an.

Das Spieldesign ist sehr einfach. Das System wählt zufällig einen der 26 Buchstaben von a-z aus und speichert ihn. Wenn Sie einen Buchstaben auf der Tastatur eingeben, werden Sie vom System gefragt, ob es sich um das richtige Zeichen handelt kleiner oder größer ist als der Buchstabe, den Sie gerade eingeben. Das Spiel endet erst, wenn Sie den richtigen Buchstaben eingegeben haben.
Im Folgenden werden einige Variablen vorgestellt, die im JS-Code verwendet werden müssen, und ihre Bedeutung. Das System initialisiert diese Variablen zu Beginn.
Vermutungen: die Häufigkeit, mit der der Benutzer Buchstaben erraten hat;
Nachricht: Anweisungen, die den Spielern beim Spielen helfen
Buchstaben: ein Array, das 26 englische Buchstaben speichert;
letterToGuess: Die vom System ausgewählten Buchstaben sind die Buchstaben, die Sie erraten müssen;
higherOrLower: fragt den Benutzer, ob der aktuell eingegebene Buchstabe größer oder kleiner als die Antwort ist;
lettersGuessed: die Buchstaben, die der Benutzer hat bereits erraten;
gameOver: ob das Spiel beendet ist.

Code kopierenDer Code lautet wie folgt:

Var Guess = 0
var message = „Erraten Sie den Buchstaben von a (niedriger) bis z (höher)“; „, „ g“, „h“, „i“, „j“, „k“, „l“, „m“, „n“, „o“, „p“, „q“, „r“, „s“, „t“, „u“, „v“, „w“, „x“, „y“, „z“]
var today = new Date(); „“; ob die vom Benutzer eingegebenen Buchstaben die richtige Antwort sind:





Kopieren Sie den Code

Der Code lautet wie folgt:

$(window).bind('keyup', eventKeyPressed);

Code kopieren

Der Code lautet wie folgt:

function eventKeyPressed(e) {

//Bestimmen Sie zunächst, ob das Spiel vorbei istif (!gameOver) { //Eingabebuchstaben abrufenvar letterPressed = String.fromCharCode(e .keyCode); von Spielen um 1 gueses;

//Speichern Sie die eingegebenen Buchstaben im Array mit den erratenen Buchstaben

lettersGuessed.push(letterPressed);

//Bestimmen Sie, ob der eingegebene Buchstabe und die Antwort konsistent sind Sie sind konsistent, das Spiel ist vorbei
if (letterPressed == letterToGuess) {
gameOver = true; var letterIndex = letters.indexOf(letterToGuess);
/Ermitteln Sie die Position des Eingabebuchstabens im Buchstabenarray 🎜>//Beurteilen Sie die Größe
if (guessIndex < 0) {
higherOrLower = "Das ist kein Buchstabe";
} else if (guessIndex > letterIndex) {
higherOrLower = " Der Buchstabe ist niedriger als Sie eingegeben haben";
} else {
higherOrLower = "Der Buchstabe ist höher als Sie eingegeben haben";
}
}
//Leinwand neu zeichnen
drawScreen();
}
}


Hier ist Folgendes zu beachten: Wenn wir das Bild auf der Leinwand ändern müssen, wird im Allgemeinen das gesamte Leinwandobjekt neu gezeichnet. Jedes Mal, wenn wir einen Buchstaben erraten, wird drawScreen ausgeführt, um alle Objekte auf der gesamten Leinwand zu zeichnen.
Sehen wir uns an, was drawScreen macht.





Code kopieren


Der Code lautet wie folgt:

function drawScreen() {
//background
context.fillStyle = '#ffffaa';
context.fillRect(0, 0, 500, 300);
//box
context.StrokeStyle = '#000000';
context.StrokeRect(5, 5, 490, 290);
context.textBaseLine = 'top';
//Datum
context.fillStyle = '#000000';
context.font = '10px_sans';
context.fillText(heute, 150, 20);
//message
context.fillStyle = '#ff0000';
context.font = '14px_sans';
context.fillText(message, 125, 40);
//guesses
context.fillStyle = '#109910';
context.font = '16px_sans';
context.fillText('Ratschläge:' Vermutungen, 215, 60);
//höher oder niedriger
context.fillStyle = '#000000';
context.font = '16px_sans';
context.fillText('Higher or Lower:'higherOrLower, 150, 125);
//Buchstaben erraten
context.fillStyle = '#ff0000';
context.font = '16px_sans';
context.fillText('Buchstaben erraten:' BuchstabenGuessed.toString(), 10, 260);
if (gameOver) {
context.fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText("Du hast es verstanden!", 150, 180);
}
}

代码很简单,就是绘制背景,还有文字信息.下面我们介绍导入图像的功能，当我们点击„Export Canvas Image“按钮的时候,会打开一个新的页面，显示当前的图像。注意toDataURL()方法,他会返回一个64位的png图片数据。

复制代码

代码如下:

$('#createImageData').click(function () {
window.open(theCanvas.toDataURL(), 'canvasImage' , 'left=0,top=0,width=' theCanvas.width ',height=' theCanvas.height ',toolbar=0,resizable=0');

大家还是直接运行demo，查看最终效果吧。demo下载地址：
html5canvas.guessTheLetter.zip