วันนี้เราจะใช้ผ้าใบเพื่อสร้างเกมเล็ก ๆ ของการคาดเดาตัวอักษรและให้วาดการเรนเดอร์ก่อน
การออกแบบเกมนั้นง่ายมาก ระบบจะสุ่มเลือกหนึ่งใน 26 ตัวอักษรของ AZ และบันทึก เมื่อคุณป้อนตัวอักษรบนแป้นพิมพ์ระบบจะแจ้งให้คุณทราบว่าอักขระที่ถูกต้องนั้นเล็กกว่าหรือใหญ่กว่าตัวอักษรที่คุณป้อนในปัจจุบันและเกมจะไม่สิ้นสุดจนกว่าคุณจะป้อนตัวอักษรที่ถูกต้อง
ต่อไปนี้แนะนำตัวแปรบางอย่างที่ต้องใช้ในรหัส JS และความหมายของพวกเขา ระบบจะเริ่มต้นตัวแปรเหล่านี้ที่จุดเริ่มต้น
เดา: จำนวนครั้งที่ผู้ใช้คาดเดาจดหมาย;
ข้อความ: คำแนะนำในการช่วยผู้เล่นเล่นเกม
ตัวอักษร: บันทึกอาร์เรย์ของ 26 ตัวอักษรภาษาอังกฤษ;
วันนี้: เวลาปัจจุบัน;
Lettertoguess: ตัวอักษรที่เลือกโดยระบบนั่นคือตัวอักษรที่คุณต้องเดา
Holerorlower: แจ้งให้ผู้ใช้ทราบว่าจดหมายที่ป้อนในปัจจุบันมีขนาดใหญ่กว่าหรือเล็กกว่าคำตอบ
ตัวอักษร: ตัวอักษรที่ผู้ใช้เดาได้
GameOver: เกมจบลงหรือไม่
var guesses = 0;
message var = "เดาตัวอักษรจาก (ล่าง) ถึง z (สูงกว่า)";
ตัวอักษร var = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "q", "r"
var วันนี้ = วันที่ใหม่ ();
var lettertoguess = "";
var higherorlower = "";
ตัวอักษร var;
var gameover = false;
ด้านล่างเราแนะนำเหตุการณ์ที่ตอบสนองต่อป๊อปอัพแป้นพิมพ์ซึ่งใช้เพื่อพิจารณาว่าตัวอักษรที่ป้อนโดยผู้ใช้เป็นคำตอบที่ถูกต้องหรือไม่:
$ (หน้าต่าง). -bind ('keyup', eventkeypressed);
ฟังก์ชั่น EventKeyPressed (E) {
// ก่อนอื่นตรวจสอบว่าเกมจบลงหรือไม่
if (! gameover) {
// รับจดหมายป้อนข้อมูล
var letterpressed = string.fromCharcode (e.keyCode);
// ทำการประมวลผลตัวพิมพ์เล็ก
ตัวอักษร = letterpressed.ToLowerCase ();
// เพิ่ม 1 หมายเลขเกม
เดา ++;
// บันทึกตัวอักษรอินพุตไปยังอาร์เรย์จดหมายที่เดาได้
lettersguess.push (ตัวอักษรพิมพ์);
// ตัดสินว่าตัวอักษรอินพุตและคำตอบนั้นสอดคล้องกันหรือไม่หากเกมสิ้นสุดลงหากเกมเดียวกันนั้นเป็นจริงเกมจะจบลง
if (letterpressed == lettertoguess) {
gameover = true;
} อื่น {
// รับตำแหน่งคำตอบในอาร์เรย์ตามตัวอักษร
var letterIndex = letters.indexof (lettertoguess);
// รับตำแหน่งของตัวอักษรอินพุตในอาร์เรย์ตัวอักษร
var guessIndex = letters.indexof (ตัวอักษรพิมพ์);
debugger.log (GuessIndex);
// ขนาดผู้พิพากษา
ถ้า (GuessIndex <0) {
HolerorLower = "นั่นไม่ใช่ตัวอักษร";
} อื่นถ้า (GuessIndex> LetterIndex) {
HigherOrlower = "ตัวอักษรต่ำกว่าที่คุณป้อน";
} อื่น {
holerorlower = "ตัวอักษรสูงกว่าที่คุณป้อน";
-
-
// ทาสีผ้าใบ
Drawscreen ();
-
-
สิ่งหนึ่งที่ควรทราบที่นี่คือเมื่อเราจำเป็นต้องแก้ไขภาพในผืนผ้าใบวัตถุทั้งหมดของผ้าใบจะถูกทาสีใหม่โดยทั่วไป ดังนั้นทุกครั้งที่เราเดาจดหมายเราจะดำเนินการ Drawscreen เพื่อวาดวัตถุทั้งหมดบนผืนผ้าใบทั้งหมด
มาดูกันว่า Drawscreen ทำอะไร
ฟังก์ชั่น 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 (ข้อความ, 125, 40);
// เดา
context.fillstyle = '#109910';
context.font = '16px_sans';
Context.fillText ('Guesses:' + Guesses, 215, 60);
// สูงกว่าหรือต่ำกว่า
context.fillstyle = '#00000';
context.font = '16px_sans';
Context.fillText ('สูงขึ้นหรือต่ำกว่า:' + Higherorlower, 150, 125);
// ตัวอักษรเดา
context.fillstyle = '#ff0000';
context.font = '16px_sans';
Context.fillText ('ตัวอักษรเดา:' + LettersGuessed.toString (), 10, 260);
ถ้า (gameover) {
Context.FillStyle = "#FF0000";
context.font = "40px _sans";
Context.fillText ("คุณเข้าใจแล้ว!", 150, 180);
-
-
รหัสนั้นง่ายมากคือการวาดพื้นหลังและข้อมูลข้อความ ด้านล่างเราแนะนำฟังก์ชั่นของการนำเข้าภาพ เมื่อเราคลิกปุ่มภาพการส่งออก Canvas หน้าใหม่จะเปิดขึ้นเพื่อแสดงภาพปัจจุบัน ให้ความสนใจกับวิธี Todataurl () ซึ่งจะส่งคืนข้อมูลภาพ PNG 64 บิต
$ ('#createimagedata') คลิก (ฟังก์ชัน () {
window.open (thecanvas.todataurl (), 'canvasimage', 'ซ้าย = 0, top = 0, width =' + thecanvas.width + ', ความสูง =' + thecanvas.height + ', toolbar = 0, resizab le = 0');
-
ทุกคนควรเรียกใช้การสาธิตโดยตรงเพื่อดูเอฟเฟกต์สุดท้าย ที่อยู่ดาวน์โหลดตัวอย่าง: html5/"> html5canvas.guesstheletter.zip