Artikel ini memperkenalkan kanvas H5 untuk mencapai permainan ular serakah, membagikannya kepada semua orang, sebagai berikut:
Efeknya adalah sebagai berikut Ide Implementasi:PS: Ini hanya berpikir.
1. Gambar ular dulu <! </head> <body> <canvas id = width canvas = 800 tinggi = 500> </body> </body> <script> var canvas = document.getElementById ('canvas'); (2d '); Color = Color;} // Metode menggambar blok rect.prototype.draw = function () {context.beginpath (); W, This.h); // Gambarlah empat blok persegi, diatur ke abu -abu untuk (var i = 0; i <4; i ++) {var rect = rect baru (i*20,0,20,20, abu -abu); menggunakan dorongan (plus nanti) untuk membuat kepala ular muncul di posisi pertama dari array snakearray.splice (0,0, rect);} // head = snakearray [0]; Hal -hal yang biasa digunakan setelah dua ditetapkan sebagai atribut, sehingga kemudian memanggil ini. SnakeArray [0]; (dengan panah kanan keycode) this.direction = 39;} // Metode lukisan ular snake.prototype.draw = function () {for (var i = 0; i <this.snakearray.length; i ++) { this.snakeArray [i] .draw ();} // Metode gerakan ular snake.prototype.move = function () {// Ini adalah bagian inti, metode gerakan ular // 1. Gambar kotak abu -abu, tumpang tindih posisi dengan kepala ular // 2. Masukkan blok ini ke posisi di belakang kepala ular di array // 3. Potong ujung ujung // 4. Pindahkan kepala ular ke arah arah pengaturan Satu grid var rect = rect baru (this.head.x, this.head.y, this.head.w, this.head.h, abu -abu); / Tentukan apakah akan makan makanan, fungsi penentuan iseat ditulis pada akhir // Saat Anda memakannya, makanan akan diberikan posisi itu lagi. getRandomFood ();} else {this.snakearray.pop ();} // Atur arah gerakan kepala ular, 37 kiri, 38, 39 kanan, 40 jahitan (ini. arah) {case 37: this.head. x- = this.head.w break; .y += this.head.h break; .y> Canvas.height || I = 1; (Timer);}}} // Gambarlah ular awal snake = snake baru () snake.draw (); {Context.Clearrect (0,0, Canvas.width, Canvas.head); Buat ular tidak dapat langsung beralih ke document.onkeydown = function (e) {var ev = e || window.event; Snake.direction = 37;} break;} case 38: {if (snake.direction! == 40) {snake.direction = 38;} break;} case 39: {if.direction! arah = 39;} break;} case 40: {if (snake.direction! == 38) {snake.direction = 40;} Bream; var range = max-min; var r = math.random (); Itu berat, lalu kembali dengan varitativeNake = true; Pernyataan tidak akan mengeksekusi pernyataan berikut ISSNAKE = FALSE; 20, 20, hijau); untuk (var i = 0; i <snake.snakearray.length; i ++) {if (snake.snakearay [i]. X == rect.x && snake.snakearay [i]. y == rect.y) {// Jika penentuan diulang kembali, atur ke true, sehingga nomor acak adalah re -to isonsnake = true; Object Food memiliki metode draw return rect;} // menentukan bahwa makan makanan, yaitu, koordinat kepala ular dan koordinat makanan fungsi adalah () {if (snake.head.x == food.x && ular .. head.y == food.y) {return true;} else {return false;} </script> </html>Di atas adalah semua isi artikel ini.