Contoh -contoh dalam artikel ini berbagi kode yang relevan dari game JS Snake untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> game Snake </iteme> <tyle>*{margin: 0; padding: 0;} header {display: block; margin: 0 otomatis; Lebar: 500px; Text-Align: center;} header h1 {font-family: arial; font-weight: bold;} header #newgamebutton {display: block; Margin: 20px Auto; Lebar: 100px; padding: 10px 10px; Latar Belakang-Color: #8F7A66; Font-Family: Arial; Warna: Putih; Border-Radius: 10px; Text-Decoration: none;} header #newgamebutton: hover {background-color: #9f8b77;} header p {font-family: arial; Ukuran font: 25px; margin: 20px auto;} canvas {display: block; Perbatasan: Black ganda sedang; margin: 4px auto;} </tyle> </ head> <body> <teader> <h1> game ular </h1> <a href = "javascript: newgame ();" id = "newgamebutton"> Game baru </a> <p> Skor: <span id = "skor"> 0 </span> </p> </ header> <canvas id = "canvas"> browser Anda tidak mendukung elemen <code> Canvas </code>. </ Canvas> <script> var canvas = document.geteLementById ("canvas"); var ctx = canvas.getContext ("2d"); var snake = array baru (); // Simulasikan tubuh ular dengan antrian dir = "kanan"; // Gunakan untuk mengontrol arah ukuran kepala ular ukuran = 20; // Lebar tubuh ular var foodx = 0; // Koordinat x makanan var makanan = 0; // Koordinat y dari makanan var headx = 0; // Koordinat x kepala ular var heady = 0; // Koordinat Y dari kepala ular var maxwidth = 200; // ketinggian kanvas var maxheight = 200; // Lebar kanvas var waktu = 400; // kecepatan skor var ular = 0; // Hitung skor pemain interval var = null; Canvas.width = maxwidth; canvas.height = maxheight; window.onload = function () {newGame ();}; document.getElementById ("newgameButton"). Klik (function () {newGame ();}); function newgame () {snake = []; // Gunakan antrian untuk mensimulasikan tubuh ular dir = "kanan"; // Gunakan untuk mengontrol arah headx kepala ular = 0; // Koordinat x kepala ular heady = 0; // Koordinat y dari skor kepala ular = 0; window.clearinterval (interval); interval = null; // inisialisasi canvas ctx.clearrect (0, 0, maxwidth, maxheight); // gambar ular drawsnake (); // port makanan setfood (); // pindahkan interval ular = window.setInterval (pindahkan, waktu);} function move () {switch (dir) {case "up": heady = heady-size; break; case "kanan": headx = headx+ukuran; break; case "down": heady = heady+size; break; case "kiri": headx = headx-size; break; } if (headx> maxwidth-size || heady> maxheight-size || headx <0 || heady <0) {waspada ("skor Anda adalah:"+skor+"poin, tetap bekerja keras! Alasan kegagalan: Saya berlari ke dinding ......"); window.location.reload (); } untuk (var i = 1; i <snake.length; i ++) {if (snake [i] [0] == Snake [0] [0] && Snake [i] [1] == Snake [0] [1]) {waspada ("Skor Anda adalah:"+skor+"poin, tetap bekerja keras! Alasan untuk Kegagalan: Saya menabrak diri saya sendiri ..." window.location.reload (); }} if (snake.length == maxwidth *maxheight) {waspada ("sangat mengagumkan! ~"); window.location.reload (); } moving (headx, heady); // pindahkan satu kisi} document.onkeydown = function (e) {// Ubah arah ular var code = e.keycode - 37; sakelar (kode) {case 1: dir = "up"; break; // pada kasus 2: dir = "kanan"; break; // case kanan 3: dir = "down"; break; // down case 0: dir = "Left"; break; // kiri}} // ================================================================================================================================================ ============================================================== ================================================================ ============================================================== ================================================================ ================================================================ ================================================================ Snake.push ([headx, heady]); // Menggambar Snake Body Switch (dir) {case "up": drawbody (headx, heady + size, headx, heady + 2 * size); merusak; case "kanan": drawbody (headx - size, heady, headx - 2 * size, heady); merusak; case "down": drawbody (headx, heady - size, headx, heady - 2 * size); merusak; case "kiri": drawbody (headx + size, heady, headx + 2 * size, heady); merusak; }} function drawbody (x1, y1, x2, y2) {ctx.fillrect (x1, y1, ukuran, ukuran); Ctx.fillrect (x2, y2, ukuran, ukuran); Snake.push ([x1, y1]); Snake.push ([x2, y2]);} // ========================================================== =================================================================== =================================================================== =================================================================== =================================================================== =================================================================== =================================================================== =================================================================== Foody, size, size);} function foodinsnake () {for (var i = 0; i <snake.length; i ++) {if (foodx == snake [i] [0] && foody == ular [i] [1]) {return true; } } kembali false;} // ========================================================================================================================== ======================================================================================================================================================= ======================================================================================================================================================= ====================================================================================================================================================================== Ctx.fillrect (x, y, ukuran, ukuran); // Kembalikan kepala ular // tambahkan kepala ular baru ke array ular var newsnake = [[x, y]]; Snake = newsnake.concat (ular); if (false == eatfood ()) {// Jika Anda tidak makan makanan, kurangi satu tail ular var snaketail = snake.pop (); // dapatkan posisi tail ular ctx.clearrect (snaketail [0], snaketail [1], ukuran, ukuran);/ Ctx.fillstyle = "block"; Ctx.fillrect (foodx, makanan, ukuran, ukuran); setFood (); Skor ++; //$("#score").text(score); document.geteLementById ("skor"). innerHTML = skor; Kembali Benar; } return false;} </script> </html>Gambar reproduksi:
Ide:
fungsi newgame () {atur ulang data ular dan fraksi; interval yang jelas; inisialisasi kanvas; menggambar ular; tempatkan makanan; Gunakan timer (setInterval) untuk memindahkan ular (fungsi pindahkan); } function move () {Ubah posisi garis lintang berikutnya dari kepala ular sesuai dengan arah; Tentukan apakah permainan sudah berakhir dan alasan akhir (termasuk menang atau kalah); Snake menggerakkan satu lintang (fungsi Movin); } Pantau tombol arah keyboard, dan ubah nilai Dir variabel global (digunakan untuk menyimpan arah); function moveIn () {Tambahkan garis lintang ke garis lintang sebelumnya dari kepala ular sebagai kepala ular baru, dan tambahkan koordinat kepala ular sebagai elemen pertama ke array yang mewakili ular; if (tidak ada makanan yang dimakan) {hapus garis lintang ke ekor ular dan buat perubahan yang sesuai di kanvas; }}Perlu dicatat bahwa jika Anda perlu mengatur lebar dan tinggi di kanvas di JS, itu sedikit berbeda dari pengaturan properti CSS lainnya.
Canvas.width = maxwidth; canvas.height = maxheight;
Editor juga telah menyiapkan topik yang luar biasa untuk semua orang: ringkasan game javascript klasik
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.