html5 Canvas-2. Canvas を使用して文字を推測する小さなゲームを作成する_html5 チュートリアル スキル

今日はキャンバスを使用して小さな文字当てゲームを作成します。まずレンダリングを見てみましょう。

ゲームのデザインは非常にシンプルで、キーボードで文字を入力すると、システムは a ～ z の 26 文字から 1 つをランダムに選択して保存します。現在入力している文字より小さいか大きいです。正しい文字を入力するまでゲームは終了しません。
以下では、js コードで使用する必要があるいくつかの変数とその意味を紹介します。システムは最初にこれらの変数を初期化します。
推測: ユーザーが文字を推測した回数。
メッセージ: プレイヤーがゲームをプレイするための指示。
文字: 26 個の英語の文字を保存する配列。
今日: 現在の時刻。
letterToGuess: システムによって選択された文字は、推測する必要がある文字です。
higherOrLower: 現在入力されている文字が答えより大きいか小さいかをユーザーにプロンプ​​トします。
lettersGuessed: ユーザーが持っている文字。すでに推測されています。
gameOver: ゲームが終了したかどうか。

コードをコピーします

コードは次のとおりです。

varguess = 0; 🎜>var message = "a (下位) から z (上位) までの文字を推測します";
var 文字 = ["a", "b", "c", "d", "e", "f"; "、" g"、"h"、"i"、"j"、"k"、"l"、"m"、"n"、"o"、"p"、"q"、"r"、 「s」、「t」、「u」、「v」、「w」、「x」、「y」、「z」];
var today = new Date(); "";
var heightOrLower = "";
var tagsGuessed;


以下に、キーボードのポップアップに応答するイベントを紹介します。ユーザーが入力した文字が正しいかどうか:

コードをコピーします

コードは次のとおりです:

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

コードをコピーします。 >

コードは次のとおりです。 function eventsKeyPressed(e) {

//まずゲームが終了したかどうかを判断します

if (!gameOver) {

//入力文字を取得します
var LetterPressed = String.fromCharCode(e .keyCode);
//小文字処理を行います
letterPressed = LetterPressed.toLowerCase(); of games by 1
guess;
//入力された文字を推測された文字に保存します Array
lettersGuessed.push(letterPressed); //入力された文字と答えが一致するかどうかを判断します。一致している場合、ゲームは終了します
if (letterPressed == LetterToGuess) {
gameOver = true;
} else {
//文字配列内の答えの位置を取得します
var LetterIndex = Letters.indexOf(letterToGuess);
//文字配列内の入力文字の位置を取得します。
Debugger.log(guessIndex); 🎜>// サイズを判断します
if (guessIndex < 0) {
higherOrLower = "それは文字ではありません";
} else if (guessIndex > LetterIndex) {
higherOrLower = "文字が入力した値よりも低いです";
} else {
higherOrLower = "文字が入力したより高いです";
}
}
//キャンバスを再描画
drawScreen();
}
}


ここで注意すべき点は、キャンバス内の画像を変更する必要がある場合、通常、キャンバス オブジェクト全体が再描画されることです。したがって、文字を推測するたびに、drawScreen が実行されて、キャンバス全体にすべてのオブジェクトが描画されます。
drawScreen が何をするのか見てみましょう。

コードをコピーします


コードは次のとおりです:

functiondrawScreen() {
//背景
context.fillStyle = '#ffffaa';
context.fillRect(0, 0, 500, 300);
//ボックス
context.ストロークスタイル = '#000000';
context.ストロークRect(5, 5, 490, 290);
context.textBaseLine = 'トップ';
//日付
context.fillStyle = '#000000';
context.font = '10px_sans';
context.fillText(今日、150、20);
//メッセージ
context.fillStyle = '#ff0000';
context.font = '14px_sans';
context.fillText(メッセージ, 125, 40);
//推測
context.fillStyle = '#109910';
context.font = '16px_sans';
context.fillText('推測:' 推測, 215, 60);
//より高いか、より低い
context.fillStyle = '#000000';
context.font = '16px_sans';
context.fillText('上位または下位:' 上位または下位, 150, 125);
//文字は推測されました
context.fillStyle = '#ff0000';
context.font = '16px_sans';
context.fillText('文字の推測:'lettersGuessed.toString(), 10, 260);
if (gameOver) {
context.fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText("わかりました!", 150, 180);
}
}

は、完全な背景であり、文字情報も含まれています。 toDataURL() メソッドを使用すると、新しいページが開かれ、現在の画像が表示されます。

🎜>代码如下:

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


大家もデモを直接実行し、最終的な効果を確認します。デモのダウンロード場所:

html5canvas.guessTheLetter.zip