اليوم سنستخدم القماش لإنشاء لعبة صغيرة من رسائل التخمين ، ودعونا نرسم أولاً العروض.
تصميم اللعبة بسيط للغاية. سيختار النظام بشكل عشوائي واحد من 26 حرفًا من AZ وحفظه. عند إدخال حرف على لوحة المفاتيح ، سيطالبك النظام بما إذا كانت الأحرف الصحيحة أصغر أو أكبر من الحرف الذي تدخله حاليًا ، ولن تنتهي اللعبة حتى تدخل الأحرف الصحيحة.
يقدم ما يلي بعض المتغيرات التي تحتاج إلى استخدام في رمز JS ومعانيها. سيقوم النظام بتهيئة هذه المتغيرات في البداية.
التخمينات: عدد مرات تخمين المستخدم للحرف ؛
الرسالة: تعليمات لمساعدة اللاعبين على لعب اللعبة ؛
الرسائل: حفظ مجموعة من 26 رسالة إنجليزية ؛
اليوم: الوقت الحالي ؛
Lettertoguess: الحروف التي يحددها النظام ، أي الحروف التي تحتاج إلى تخمينها ؛
LOVERORLOWER: يطالب المستخدم بما إذا كان الحرف الذي تم إدخاله حاليًا أكبر أو أصغر من الإجابة ؛
Lettersuged: رسائل خمنها المستخدم ؛
Gameover: ما إذا كانت اللعبة قد انتهت.
var التخمين = 0 ؛
var message = "خمن الحرف من (أقل) إلى z (أعلى)" ؛
var stels = ["a" ، "b" ، "c" ، "d" ، "e" ، "f" ، "g" ، "h" ، "i" ، "j" ، "k" ، "l" ، "m" ، "n" ، "o" ، "p" ،
var اليوم = تاريخ جديد () ؛
var lettertoguess = "" ؛
var lightorlower = "" ؛
var lettersugnged ؛
var gameover = false ؛
نقدم أدناه الحدث الذي يستجيب إلى لوحة المفاتيح المنبثقة ، والذي يتم استخدامه لتحديد ما إذا كانت الحروف التي أدخلها المستخدم هي الإجابة الصحيحة:
$ (window) .bind ('keyup' ، eventKeypressed) ؛
وظيفة EventKeypressed (e) {
// أولاً حدد ما إذا كانت اللعبة قد انتهت
إذا (! gameover) {
// الحصول على رسائل الإدخال
var letterpressed = string.fromcharcode (e.KeyCode) ؛
// القيام بمعالجة صغيرة
letterpressed = letterpressed.toLowerCase () ؛
// إضافة رقم لعبة
تخمينات ++ ؛
// احفظ رسائل الإدخال إلى صفيف الحرف الممتاز
Lettersuged.push (letterpressed) ؛
// تحكم على ما إذا كانت رسائل الإدخال والإجابة متسقة ، إذا انتهت اللعبة إذا كانت الشيء نفسه صحيحًا ، فستنتهي اللعبة
if (letterpressed == LetterToguess) {
GameOver = صحيح ؛
} آخر {
// احصل على موقف الإجابة في الصفيف الأبجدي
var letterIndex = letters.indexof (LetterToguess) ؛
// احصل على موضع خطاب الإدخال في الصفيف الأبجدي
var guessIndex = letters.indexof (letterpressed) ؛
debugger.log (GuettIndex) ؛
// القاضي حجم
if (mustIndex <0) {
LightorLower = "هذا ليس رسالة" ؛
} آخر إذا (mustIndex> letterIndex) {
LightorLower = "الحرف أقل مما أدخلته" ؛
} آخر {
LightorLower = "الحرف أعلى مما أدخلته" ؛
}
}
// closaint canvas
شاشة السحب () ؛
}
}
شيء واحد يجب ملاحظته هنا هو أنه عندما نحتاج إلى تعديل الصورة في قماش ، سيتم إعادة طلاء كائن القماش بأكمله عمومًا. لذلك في كل مرة نخمن فيها الحرف ، سنقوم بتنفيذ شاشة السحب لرسم جميع الكائنات على القماش بأكمله.
دعونا نرى ما الذي يفعله الشاشة.
وظيفة السحب () {
//خلفية
context.fillStyle = '#ffffa' ؛
context.fillRect (0 ، 0 ، 500 ، 300) ؛
//صندوق
context.strokestyle = '#000000' ؛
Context.StrokEct (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 ('أعلى أو أقل:' + lightorlower ، 150 ، 125) ؛
// رسائل خمن
context.fillStyle = '#ff0000' ؛
context.font = '16px_sans' ؛
context.filltext ('Letters ugned:' + lettersguite.toString () ، 10 ، 260) ؛
إذا (GameOver) {
context.fillStyle = "#ff0000" ؛
context.font = "40px _sans" ؛
context.fillText ("لقد حصلت عليه!" ، 150 ، 180) ؛
}
}
الكود بسيط للغاية ، وهو رسم المعلومات الخلفية والنص. أدناه نقدم وظيفة استيراد الصور. عند النقر فوق الزر "تصدير Canvas" ، سيتم فتح صفحة جديدة لعرض الصورة الحالية. انتبه إلى طريقة Todataurl () ، والتي ستعيد بيانات صورة PNG 64 بت.
$ ('#createimagedata'). انقر فوق (function () {
window.open (thecanvas.todataurl () ، 'canvasimage' ، 'left = 0 ، top = 0 ، width =' + thecanvas.width + '، height =' + thecanvas.height + '، شريط الأدوات = 0 ، resizab le = 0') ؛
}) ؛
يجب على الجميع تشغيل العرض التوضيحي مباشرة لرؤية التأثير النهائي. عنوان التنزيل التجريبي: html5/"> html5canvas.guessTheletter.zip