Contoh -contoh dalam artikel ini berbagi dengan Anda demo game JS Snake, yang diselesaikan murni oleh JS dan CSS untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
<! Doctype html> <html> <meta charset = "utf-8"> <head> <tyle>*{margin: 0; padding: 0;} .content {position: absolute; Lebar: 500px; Tinggi: 500px; Latar Belakang-Color: #212121; } .colo {width: 48px; Tinggi: 48px; latar belakang-warna: #e6e6e6; Perbatasan: 1px Solid #466F85; float: kiri; } .head {/*latar belakang-warna: #49df85;*/latar belakang-gambar: url (./ img/22.jpg); Border-Radius: 10px; Ukuran latar belakang: 100%; Posisi: Absolute; Tinggi: 48px; Lebar: 48px; } .fruit {/*latar belakang-warna: #49df85;*/latar belakang-gambar: url (./ img/buah.jpg); Ukuran latar belakang: 100%; Posisi: Absolute; Tinggi: 48px; Lebar: 48px; } .score {font-family: 'Bold'; Kiri: 600px; Posisi: Absolute; Tinggi: 50px; Lebar: 200px; Latar Belakang-Color: #212121; Warna: #fff; } .newbody {position: absolute; Lebar: 48px; Tinggi: 48px; latar belakang-gambar: url (./ img/33.jpg); Ukuran latar belakang: 100%; } .btn {font-family: 'bold'; Kiri: 600px; Atas: 100px; Posisi: Absolute; Tinggi: 50px; Lebar: 100px; Latar Belakang: #1193ff; Warna: #fff; Teks-Align: tengah; Line-Height: 50px; font-size: 20px; kursor: pointer; Border-Radius: 15px; } </tyle> </head> <body> <v id = "content"> </div> <div id = "stop"> hentikan permainan </div> <div style = "Top: 180px" id = "start"> Mulailah game </div> <Div style = "Top: 380px" ID = "Gameway" Status Game: </Div> </Div> SCORE = "SCORE =" SCORE: "GAMEWAY"> SCORE </DIV> </DIV> SCORE = "SCORE =" SCORE: "GAMEWAY"> STATUS </DIV> </DIV> SCORE = "SCORE =" SCORE: "GAMEWAY" type = "text/javascript"> // tambahkan status var stop = document.geteLementById ('stop'); var start = document.geteLementById ("start"); var gameway = document.geteLementById ('gameway'); start.onClick = function () {head.value = '2'; insiden = setInterval (Move, 200);} stop.onClick = function () {clearInterval (insiden);} // var content = document.getElementById ("content"); untuk (var i = 0; i <100; i ++) {var div = document.createelement ("div"); div.classname = "colo"; Content.AppendChild (Div); } var scorid = document.geteLementById ("skor"); var scorenum = 0; var scorecon = document.createElement ("p"); // var scoretext = document.createTextNode (scorenum); // scorecon.appendchild (scoretext); scoreid.appendChild (scorecon); var head = null; // simpan kepala ular var buah = null; // simpan buah var dir = null; // simpan arah ular var body = array baru (); // simpan bagian tambahan dari tubuh ular var bodynum = 0; // Rekam berapa banyak badan yang dibuat // secara acak membuat kepala dan buah ke dalam fungsi konten createType (type) {if (type == 1) {// Buat nomor acak var row = parseInt (math.random () * 6 +2); var col = parseInt (math.random () * 6 +2); head = document.createelement ("div"); head.classname = "head"; head.style.top = baris*50+"px"; head.style.left = col*50+"px"; Content.AppendChild (head); // head.style.top =; // head.style.left =; } if (type == 2) {// Buat nomor acak var baris = parseInt (math.random () * 6 +2); var col = parseInt (math.random () * 6 +2); buah = document.createelement ("div"); buah.classname = "buah"; Fruit.Style.Width = "50"; Fruit.Style.height = "50"; Fruit.Style.BackgroundColor = "#EA2000"; buah.style.top = baris*50+"px"; buah. Content.AppendChild (Buah); }} // Panggil metode prop yang dibuat createType (1); createType (2); // fungsi gerakan kepala ular var arah = array baru; // Simpan arah setiap bodi yang baru dibuat // nomor konversi var numss = 0; // Pindah fungsi acara geser otomatis () {if (head.value! = "") {Switch (head.value) {case '1': head.style.top = head.offsettop-50+"px"; merusak; case '2': head.style.top = head.offsettop+50+"px"; merusak; case '3': head.style.left = head.offsetleft-50+"px"; merusak; case '4': head.style.left = head.offsetleft+50+"px"; merusak; }} console.log (head.offsettop); if (head.offsettop> 500) {alert ("melebihi batas! Harap replay"); } // if (head == null) {// if (head.style.top <0 || head.style.top> 500 || head.style.left <0 || head.style.Left> 500) {// waspada ("Exceed the Boundary! Harap replay"); //} if (body.length! = 0) {for (var i = body.length-1; i> = 0; i-) {if (i == 0) {body [0] .value = head.value; } else {body [i] .value = body [i-1] .value; }}} // Konversi arah // Jika peristiwa setelah buah berhasil dimakan jika (head.style.top == fruit.style.top && head.style.left == fruit.style.left) {var row = parseInt (math.random () * 6 +2); var col = parseInt (math.random () * 6 +2); buah.style.top = baris*50+"px"; buah. // Rekor scorenum = scorenum+1; document.getElementsbyTagname ('p') [0] .innerText = ""; document.getElementsbyTagname ('p') [0] .innertext = scorenum; // Buat bagian tubuh bodyadd (head.style.top, head.style.left, head.value); } // Kontrol tubuh untuk mengikuti bagian gerakan kepala // Ketika Anda memiliki tubuh, Anda harus secara dinamis mengubah nilai tubuh jika (body.length> 0) {var body01 = document.geteLementById ('body01'); body01.style.top = head.offsettop+"px"; body01.style.left = head.offsetleft+"px"; switch (head.value) {case '1': body01.style.top = head.offsettop+50+"px"; body01.style.left = head.offsetleft+"px"; merusak; case '2': body01.style.top = head.offsettop-50+"px"; body01.style.left = head.offsetleft+"px"; merusak; case '3': body01.style.left = head.offsetleft+50+"px"; body01.style.top = head.offsettop+"px"; merusak; case '4': body01.style.left = head.offsetleft-50+"px"; body01.style.top = head.offsettop+"px"; merusak; }} if (body.length> 1) {body [bodynum-1] .value = body [bodynum-2] .value; untuk (var i = 1; i <body.length; i ++) {var nu = i+1; var bodyid = document.geteLementById ('body0'+nu); var body_id = document.geteLementById ('body0'+i); bodyid.style.top = body_id.offsettop+"px"; bodyid.style.left = body_id.offsetleft+"px"; sakelar (body [bodynum- (body.length-i)]. value) {case '1': bodyid.style.top = body_id.offsettop+50+"px"; bodyid.style.left = body_id.offsetleft+"px"; merusak; case '2': bodyid.style.top = body_id.offsettop-50+"px"; bodyid.style.left = body_id.offsetleft+"px"; merusak; case '3': bodyid.style.left = body_id.offsetleft+50+"px"; bodyid.style.top = body_id.offsettop+"px"; merusak; case '4': bodyid.style.left = body_id.offsetleft-50+"px"; bodyid.style.top = body_id.offsettop+"px"; merusak; }}}} // Buat tombol waktu document.onkeyDown = function () {var code = event.keycode; sakelar (kode) {// Up case 38: head.value = '1'; merusak; // Kasing Down 40: head.Value = '2'; merusak; // Kasing kiri 37: head.Value = '3'; merusak; // case 39 ke kanan: head.value = '4'; merusak; console.log (head.value); }} // tubuh meningkatkan fungsi acara bodyadd (atas, kiri, dir) {if (dir! = "") {Dir = dir; } else {dir = head.value; } // Buat badan untuk pertama kalinya jika (bodynum == 0) {var newbody = document.createelement ('div'); newbody.classname = "newbody"; newbody.id = "body01"; switch (dir) {case '1': newbody.style.top = head.offsettop-50+'px'; newbody.style.left = head.offsetleft+"px"; merusak; case '2': newbody.style.top = head.offsettop+50+'px'; newbody.style.left = head.offsetleft+"px"; merusak; case '3': newbody.style.left = head.offsetleft-50+'px'; newbody.style.top = head.offsettop+"px"; merusak; case '4': newbody.style.left = head.offsetleft+50+'px'; newbody.style.top = head.offsettop+"px"; merusak; } content.AppendChild (Newbody); bodynum = bodynum+1; body.push (newbody); } else {// buat var newbody = document.createelement ('div'); newbody.classname = "newbody"; newbody.id = "body0"+(body.length+1); switch (dir) {case '1': newbody.style.top = body [body.length-1] .offsettop-50+'px'; newbody.style.left = body [body.length-1] .offsetleft+"px"; merusak; case '2': newbody.style.top = body [body.length-1] .offsettop+50+'px'; newbody.style.left = body [body.length-1] .offsetleft+"px"; merusak; case '3': newbody.style.left = body [body.length-1] .offsetleft-50+'px'; newbody.style.top = body [body.length-1] .offsettop+"px"; merusak; case '4': newbody.style.left = body [body.length-1] .offsetleft+50+'px'; newbody.style.top = body [body.length-1] .offsettop+"px"; merusak; } content.AppendChild (Newbody); bodynum = bodynum+1; body.push (newbody); } // body.push (konten);} // melebihi batas, atur ulang fungsi acara informasi inisialisasi () {// atur ulang buah var baris = parseInt (math.random () * 6 +2); var col = parseInt (math.random () * 6 +2); buah.style.top = baris*50+"px"; buah. // Rekam skor document.getElementsbyTagname ('p') [0] .innertext = ""; // Setel ulang insiden ular rakus} var; Inscident = SetInterval (Move, 200); // Tambahkan Operasi // Var Btn = Document.GetElementById ('btn'); // btn.onClick = function () {// clearInterval (insiden); //} // </script> </body> </html>Ini masih ditingkatkan, dan saya harap ini akan membantu untuk belajar semua orang.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.