html5 canvas-2. Gunakan kanvas untuk mencipta permainan kecil meneka huruf_html5 kemahiran tutorial

Hari ini kita akan menggunakan kanvas untuk membuat permainan meneka huruf kecil Mari kita lihat rendering dahulu.

Reka bentuk permainan sangat mudah Sistem akan memilih secara rawak satu daripada 26 huruf dari a-z dan menyimpannya Apabila anda memasukkan huruf pada papan kekunci, sistem akan meminta anda sama ada aksara yang betul adalah lebih kecil atau lebih besar daripada huruf yang sedang anda masukkan Permainan ini tidak akan tamat sehingga anda memasukkan huruf yang betul.
Yang berikut memperkenalkan beberapa pembolehubah yang perlu digunakan dalam kod js dan maknanya Sistem akan memulakan pembolehubah ini pada permulaan.
tekaan: bilangan kali pengguna meneka huruf;
mesej: arahan untuk membantu pemain bermain permainan
surat: susunan yang menyimpan 26 huruf Inggeris hari ini;
letterToGuess: Huruf yang dipilih oleh sistem adalah huruf yang anda perlu teka;
higherOrLower: menggesa pengguna sama ada huruf yang dimasukkan pada masa ini lebih tinggi atau lebih kecil daripada jawapan
huruf yang ditebak oleh pengguna sudah meneka;
gameOver: sama ada permainan itu Selesai.

Salin kodKodnya adalah seperti berikut:

var tekaan = 0; 🎜>var message = "Teka Huruf Dari a (bawah) ke z (lebih tinggi)";
huruf 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 higherOrLower = "";
var lettersGuessed; sama ada huruf yang dimasukkan oleh pengguna adalah jawapan yang betul:

Salin kod


Kod adalah seperti berikut:

$(tetingkap). >Kodnya adalah seperti berikut:

fungsi eventKeyPressed(e) {

//Tentukan dahulu sama ada permainan telah tamat
jika (!gameOver) {
//Dapatkan huruf input

var letterPressed = String.fromCharCode(e .keyCode);
//Lakukan pemprosesan huruf kecil
letterPressed = letterPressed.toLowerCase(); daripada permainan dengan 1

teka;

//Simpan huruf yang dimasukkan ke Array huruf yang ditebakhurufTebak.push(letterPressed);//Tentukan sama ada huruf input dan jawapan adalah konsisten mereka konsisten, permainan tamatjika (letterPressed == letterToGuess) { gameOver = true; } else {

//Dapatkan kedudukan jawapan dalam susunan huruf

var letterIndex = letters.indexOf(letterToGuess);

//Dapatkan kedudukan huruf input dalam susunan huruf
var guessIndex = huruf
Debugger.log(guessIndex); 🎜>//Nilai saiz
jika (guessIndex < 0) {
higherOrLower = "Itu bukan huruf"; jika tidak (guessIndex > letterIndex) {
higherOrLower = " Letter is Lower than you entered";
} else {
higherOrLower = "Letter is Higher than you entered";
}
}
//Lukis semula kanvas
drawScreen();
}
}


Satu perkara yang perlu diperhatikan di sini ialah apabila kita perlu mengubah suai imej dalam kanvas Apabila, keseluruhan objek kanvas biasanya dilukis semula. Jadi setiap kali kita meneka huruf, drawScreen akan dilaksanakan untuk melukis semua objek pada keseluruhan kanvas.
Mari kita lihat apa yang drawScreen lakukan.





Salin kod


Kod tersebut adalah seperti berikut:

fungsi drawScreen() {
//latar belakang
context.fillStyle = '#ffffaa';
context.fillRect(0, 0, 500, 300);
//kotak
context.strokeStyle = '#000000';
context.strokeRect(5, 5, 490, 290);
context.textBaseLine = 'atas';
//tarikh
context.fillStyle = '#000000';
context.font = '10px_sans';
context.fillText(hari ini, 150, 20);
//mesej
context.fillStyle = '#ff0000';
context.font = '14px_sans';
context.fillText(mesej, 125, 40);
//teka
context.fillStyle = '#109910';
context.font = '16px_sans';
context.fillText('Tekaan:' tekaan, 215, 60);
//lebih tinggi atau lebih rendah
context.fillStyle = '#000000';
context.font = '16px_sans';
context.fillText('Higher or Lower:' higherOrLower, 150, 125);
//huruf diteka
context.fillStyle = '#ff0000';
context.font = '16px_sans';
context.fillText('Letters Guessed:' lettersGuessed.toString(), 10, 260);
jika (gameOver) {
context.fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText("Anda Dapat!", 150, 180);
}
}

代码很简单，就是绘制背景，还有文字信息。下面我很单，就是绘制背景，还有文字信息。下面我们廬城，当我们点击“Eksport Imej Kanvas”按钮的时候，会打开一个新的页面，显示当前的图像。注意toDataURL()方法，他会返回一个64位的png>

复制代码

代码如下: $('#createImageData').klik(function () {

window.open(theCanvas.toDataURL(), 'canvasImage' , 'left=0,top=0,width=' theCanvas.width ',height=' theCanvas.height ',toolbar=0,resizab le=0');

大家还是直接运行demo，查看最终效果吧。demo下载地址：
html5canvas.zips