HTML5 Canvas-2. Buat permainan kecil menebak surat dengan kanvas

Hari ini kita akan menggunakan kanvas untuk membuat permainan kecil menebak huruf, dan mari kita pertama kali menggambar rendering.

Desain game sangat sederhana. Sistem akan secara acak memilih salah satu dari 26 huruf AZ dan menyimpannya. Saat Anda memasukkan huruf di keyboard, sistem akan meminta Anda apakah karakter yang benar lebih kecil atau lebih besar dari huruf yang Anda masukkan saat ini, dan permainan tidak akan berakhir sampai Anda memasukkan huruf yang benar.

Berikut ini memperkenalkan beberapa variabel yang perlu digunakan dalam kode JS dan artinya. Sistem akan menginisialisasi variabel -variabel ini di awal.

tebak: berapa kali pengguna menebak surat itu;

Pesan: Instruksi untuk membantu pemain memainkan permainan;

Surat: Simpan serangkaian 26 surat bahasa Inggris;

Hari ini: waktu saat ini;

Lettertoguess: huruf yang dipilih oleh sistem, yaitu huruf yang perlu Anda tebak;

Higherorlower: meminta pengguna apakah surat yang saat ini dimasukkan lebih besar atau lebih kecil dari jawabannya;

Letterguessed: huruf yang sudah duga pengguna;

Gameover: Apakah game sudah berakhir.

var tebakan = 0;

var message = "Tebak surat dari A (lebih rendah) ke z (lebih tinggi)";

var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "" v "," v "

var hari ini = tanggal baru ();

var lettertoguess = "";

var higherorlower = "";

var letterguessed;

var gameover = false;

Di bawah ini kami memperkenalkan acara yang menanggapi pop-up keyboard, yang digunakan untuk menentukan apakah huruf yang dimasukkan oleh pengguna adalah jawaban yang benar:

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

function eventkeypressed (e) {

// Pertama tentukan apakah game sudah berakhir

if (! Gameover) {

// Dapatkan huruf input

var letterpressed = string.fromCharCode (e.keycode);

// Lakukan pemrosesan kecil

letterpressed = letterpressed.tolowercase ();

// tambahkan 1 nomor game

tebak ++;

// Simpan surat input ke array huruf yang ditebak

letterguessed.push (letterpressed);

// menilai apakah surat input dan jawabannya konsisten, jika permainan berakhir jika hal yang sama benar, permainan akan berakhir

if (letterpressed == lettertoguess) {

Gameover = true;

} kalau tidak {

// Dapatkan posisi jawaban dalam array abjad

var letterIndex = letter.indexof (lettertoguess);

// Dapatkan posisi huruf input dalam array alfabet

var guestIndex = letters.indexof (letterpressed);

Debugger.log (GuessIndex);

// Ukuran Hakim

if (GuessIndex <0) {

Higherorlower = "Itu bukan surat";

} lain if (guessIndex> letterIndex) {

Higherorlower = "huruf lebih rendah dari yang Anda masukkan";

} kalau tidak {

Higherorlower = "Surat lebih tinggi dari yang Anda masukkan";

}

}

// Cat ulang kanvas

drawscreen ();

}

}

Satu hal yang perlu diperhatikan di sini adalah bahwa ketika kita perlu memodifikasi gambar di kanvas, seluruh objek Canvas umumnya akan dicat ulang. Jadi setiap kali kami menebak surat itu, kami akan menjalankan drawscreen untuk menggambar semua objek di seluruh kanvas.

Mari kita lihat apa yang dilakukan drawscreen.

function drawScreen () {

//latar belakang

context.fillstyle = '#FFFFFA';

Context.Fillrect (0, 0, 500, 300);

//kotak

context.strokestyle = '#000000';

Context.Strokerect (5, 5, 490, 290);

context.textBaseline = 'top';

//tanggal

context.fillstyle = '#00000';

context.font = '10px_sans';

Context.FillText (hari ini, 150, 20);

//pesan

context.fillstyle = '#ff0000';

context.font = '14px_sans';

context.filltext (pesan, 125, 40);

// tebak

context.fillstyle = '#109910';

context.font = '16px_sans';

context.filltext ('tebak:' + tebak, 215, 60);

// Lebih tinggi atau lebih rendah

context.fillstyle = '#00000';

context.font = '16px_sans';

context.filltext ('lebih tinggi atau lebih rendah:' + lebih tinggi, 150, 125);

// Surat -surat yang ditebak

context.fillstyle = '#ff0000';

context.font = '16px_sans';

Context.FillText ('Letters ditebak:' + letterguessed.toString (), 10, 260);

if (gameover) {

context.fillstyle = "#ff0000";

context.font = "40px _sans";

Context.FillText ("You Got It!", 150, 180);

}

}

Kode ini sangat sederhana, ini adalah untuk menggambar informasi latar belakang dan teks. Di bawah ini kami memperkenalkan fungsi mengimpor gambar. Ketika kami mengklik tombol gambar Export Canvas, halaman baru akan dibuka untuk menampilkan gambar saat ini. Perhatikan metode Todataurl (), yang akan mengembalikan data gambar PNG 64-bit.

$ ('#createMagedata'). Klik (function () {

window.open (thecanvas.todataurl (), 'canvasimage', 'left = 0, top = 0, width =' + thecanvas.width + ', height =' + thecanvas.height + ', toolbar = 0, resizab le = 0');

});

Setiap orang harus menjalankan demo secara langsung untuk melihat efek akhir. Alamat unduhan demo: html5/"> html5canvas.guesstheletter.zip