今日はキャンバスを使用して、手紙を推測する小さなゲームを作成し、まずレンダリングを描画しましょう。
ゲームのデザインは非常に簡単です。システムは、AZの26文字のいずれかをランダムに選択し、保存します。キーボードに文字を入力すると、システムは、正しい文字が現在入力した文字よりも小さいか大きいかを促し、正しい文字を入力するまでゲームは終了しません。
以下は、JSコードとその意味で使用する必要があるいくつかの変数を紹介します。システムは、最初にこれらの変数を初期化します。
推測：ユーザーが文字を推測する回数。
メッセージ：プレイヤーがゲームをプレイするのを支援するための指示。
手紙：26個の英語の手紙を保存します。
今日：現在の時刻。
LetterToguess：システムによって選択された文字、つまり、推測する必要がある文字。
Highorlower：現在入力されている文字が答えよりも大きいか小さいかどうかをユーザーに促します。
手紙の摂取：ユーザーが推測した手紙。
GameOver：ゲームが終わったかどうか。
var yesses = 0;
var message = "a（lower）からz（higher）への文字を推測します";
var letthes = ["a"、 "b"、 "c"、 "d"、 "e"、 "f"、 "g"、 "h"、 "i"、 "j"、 "k" "" "" l "、" m "、n"、 "o"、 "p"、 "q、" r "、" s "、" t "、" u
var today = new Date（）;
var letteToguess = "";
var Highorlower = "";
var lettersguessed;
var gameover = false;
以下に、キーボードポップアップに応答するイベントを紹介します。これは、ユーザーが入力した文字が正解であるかどうかを判断するために使用されます。
$（window）.bind（ 'keyup'、eventKeypressed）;
関数eventKeypressed（e）{
//最初にゲームが終了したかどうかを判断します
if（！gameover）{
//入力文字を取得します
var letthress = string.fromCharcode（E.Keycode）;
//小文字の処理を行います
LittlePressed = letterpresd.tolowercase（）;
// 1つのゲーム番号を追加します
推測++;
//推測された文字配列に入力文字を保存します
LetterSguessed.push（rettrepressing）;
//入力文字と答えが一貫しているかどうかを判断します。ゲームが終了した場合、ゲームが終了した場合、ゲームは終了します
if（rettrepressed == lettertoguess）{
GameOver = true;
} それ以外 {
//アルファベット配列で回答位置を取得します
var LetterIndex = letters.indexof（lettertoguess）;
//アルファベットアレイで入力文字の位置を取得します
var suessIndex = letters.indexof（retterpresding）;
debugger.log（suessindex）;
//裁判官サイズ
if（siessindex <0）{
highorlower = "それは文字ではありません";
} else if（buessindex> letteindex）{
Higherlower = "文字は入力したよりも低い";
} それ以外 {
Higherlower = "文字は入力したよりも高い";
}
}
//塗りキャンバス
drawScreen（）;
}
}
ここで注意すべきことの1つは、キャンバスの画像を変更する必要がある場合、キャンバスオブジェクト全体が一般的に塗装されることです。そのため、文字を推測するたびに、ドロースクリーンを実行して、キャンバス全体にすべてのオブジェクトを描画します。
ドロースクリーンが何をしているのか見てみましょう。
関数drawScreen（）{
//背景
context.fillstyle = '#ffffa';
Context.FillRect（0、0、500、300）;
//箱
Context.Strokestyle = '＃000000';
Context.Strokerect（5、5、490、290）;
Context.TextBaseLine = 'TOP';
//日付
context.fillstyle = '＃00000';
context.font = '10px_sans';
Context.FillText（今日、150、20）;
//メッセージ
context.fillstyle = '＃ff0000';
context.font = '14px_sans';
context.filltext（message、125、40）;
//推測
context.fillstyle = '＃109910';
context.font = '16px_sans';
context.filltext（ '推測：' +推測、215、60）;
//高以下
context.fillstyle = '＃00000';
context.font = '16px_sans';
context.filltext（ '高または低：' + Higherlower、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（ "you got it！"、150、180）;
}
}
コードは非常にシンプルで、背景とテキスト情報を描画することです。以下に、画像をインポートする機能を紹介します。 [エクスポートキャンバス画像]ボタンをクリックすると、現在の画像を表示する新しいページが開きます。 64ビットのPNG画像データを返すTodataurl（）メソッドに注意してください。
$（ '＃createimagedata'）。クリック（function（）{
window.open（thecanvas.todataurl（）、 'canvasimage'、 'left = 0、top = 0、width =' + thecanvas.width + '、height =' + thecanvas.height + '、toolbar = 0、resizab le = 0'）;
}）;
最終的な効果を確認するには、誰もがデモを直接実行する必要があります。デモのダウンロードアドレス：html5/"> html5canvas.guesstheletter.zip