Versi lengkap JavaScript Snake sepenuhnya dijelaskan dan berorientasi objek
Copy kode kodenya sebagai berikut:
<html>
<kepala>
<title>Ular v2.4</title>
<gaya>
tubuh{
ukuran font:9pt;
}
meja{
keruntuhan perbatasan: keruntuhan;
batas:padat #333 1 piksel;
}
td{
tinggi: 10 piksel;
lebar: 10 piksel;
ukuran font: 0px;
}
.dipenuhi{
warna latar belakang: biru;
}
</gaya>
</kepala>
<skrip>
fungsi $(id){return document.getElementById(id);}
/****************************************************** ***** *************
*javascript ular v2.4<br />
* v2.4 mengoreksi warna tubuh ular agar bergerak seiring dengan gerakan ular ke depan
******************************************************* * ************/
//Ular serakah
var Ular = {
tbl: batal,
/**
* badan: badan ular, setiap bagian ular ditempatkan dalam susunan,
* Struktur data {x:x0, y:y0, warna:warna0},
* x, y melambangkan koordinat, warna melambangkan warna
**/
tubuh: [],
//Arah pergerakan saat ini, nilai 0, 1, 2, 3 masing-masing mewakili atas, kanan, bawah, kiri, tekan tombol arah keyboard untuk mengubahnya
arah: 0,
// pengatur waktu
pengatur waktu: nol,
//kecepatan
kecepatan: 250,
//Apakah sudah dijeda
dijeda: benar,
//jumlah baris
jumlah baris: 30,
//Jumlah kolom
jumlah kolom: 30,
//inisialisasi
init: fungsi(){
var warna = ['merah','oranye','kuning','hijau','biru','ungu','#ccc'];
this.tbl = $("utama");
var x = 0;
var y = 0;
var indeks warna = 0;
//Hasilkan arah gerakan awal
this.direction = Matematika.lantai(Matematika.acak()*4);
//Membangun tabel
for(var baris=0;baris<ini.jumlah baris;baris++){
var tr=ini.tbl.insertRow(-1);
for(var col=0;col<ini.colCount;col++) {
var td=tr.insertCell(-1);
}
}
//Hasilkan 20 node longgar
untuk(var i=0; saya<10; i++){
x = Matematika.lantai(Matematika.acak()*ini.colCount);
y = Matematika.lantai(Matematika.acak()*ini.jumlah baris);
colorIndex = Matematika.lantai(Matematika.acak()*7);
if(!ini.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = warna[colorIndex];
}
}
//hasilkan kepala ular
sementara(benar){
x = Matematika.lantai(Matematika.acak()*ini.colCount);
y = Matematika.lantai(Matematika.acak()*ini.jumlah baris);
if(!ini.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = "hitam";
this.body.push({x:x,y:y,color:'black'});
merusak;
}
}
this.paused = benar;
//Tambahkan acara keyboard
dokumen.onkeydown= fungsi(e){
if (!e)e=window.event;
switch(e.keyCode | e.which | e.charCode){
kasus 13: {
if(Ular.dijeda){
Ular.bergerak();
Snake.paused = salah;
}
kalau tidak{
//Jika tidak ada jeda, berhentilah bergerak
Ular.jeda();
Snake.paused = benar;
}
merusak;
}
kasus 37:{//kiri
//Hentikan ular itu agar tidak berjalan mundur
if(Ular.arah==1){
merusak;
}
Ular.arah = 3;
merusak;
}
kasus 38:{//up
//Tombol pintasan berfungsi di sini
if(acara.ctrlKey){
Ular.speedUp(-20);
merusak;
}
if(Snake.direction==2){//Mencegah ular berjalan mundur
merusak;
}
Ular.arah = 0;
merusak;
}
kasus 39:{//kanan
if(Snake.direction==3){//Mencegah ular berjalan mundur
merusak;
}
Ular.arah = 1;
merusak;
}
kasus 40:{//down
if(acara.ctrlKey){
Ular.speedUp(20);
merusak;
}
if(Snake.direction==0){//Mencegah ular berjalan mundur
merusak;
}
Ular.arah = 2;
merusak;
}
}
}
},
//bergerak
pindah: fungsi(){
this.timer = setInterval(fungsi(){
Ular.erase();
Ular.moveOneStep();
Ular.cat();
}, ini.kecepatan);
},
//Pindahkan satu bagian tubuh
moveOneStep: fungsi(){
if(ini.checkNextStep()==-1){
clearInterval(ini.timer);
alert("Permainan selesai!/nTekan Restart untuk melanjutkan.");
kembali;
}
if(ini.checkNextStep()==1){
var _point = ini.getNextPos();
var _x = _point.x;
var _y = _point.y;
var _warna = ini.getColor(_x,_y);
this.body.unshift({x:_x,y:_y,color:_color});
//Karena satu makanan dimakan, makanan lain dihasilkan
ini.generateDood();
kembali;
}
//window.status = ini.toString();
var point = ini.getNextPos();
//Pertahankan warna bagian pertama
var warna = ini.tubuh[0].warna;
//Warna bergerak maju
for(var i=0; i<ini.tubuh.panjang-1; i++){
ini.tubuh[i].warna = ini.tubuh[i+1].warna;
}
//Kurangi satu bagian dari ekor ular dan tambahkan satu bagian pada ekor ular untuk menunjukkan efek ular bergerak maju.
ini.tubuh.pop();
this.body.unshift({x:point.x,y:point.y,color:color});
//window.status = ini.toString();
},
//Jelajahi ke mana harus pergi selanjutnya
jeda: fungsi(){
clearInterval(Ular.timer);
ini.cat();
},
getNextPos: fungsi(){
var x = ini.tubuh[0].x;
var y = ini.tubuh[0].y;
var warna = ini.tubuh[0].warna;
//ke atas
if(arah.ini==0){
kamu--;
}
//Ke kanan
else if(arah.ini==1){
x++;
}
//turun
else if(arah.ini==2){
kamu++;
}
//kiri
kalau tidak{
X--;
}
//Kembalikan koordinat
kembalikan {x:x,y:y};
},
//Periksa apa langkah selanjutnya yang harus dilakukan
checkLangkah Berikutnya: fungsi(){
var point = ini.getNextPos();
var x = titik.x;
var y = titik.y;
if(x<0||x>=ini.colCount||y<0||y>=ini.rowCount){
return -1;//Saat batas disentuh, permainan berakhir
}
for(var i=0; i<ini.tubuh.panjang; i++){
if(tubuh.ini[i].x==x&&tubuh ini[i].y==y){
return -1;//Saat menyentuh tubuh Anda sendiri, permainan berakhir
}
}
if(ini.isCellFilled(x,y)){
kembali 1;//Ada sesuatu
}
kembalikan 0;//ruang terbuka
},
//Hapus tubuh ularnya
hapus: fungsi(){
for(var i=0; i<ini.tubuh.panjang; i++){
ini.eraseDot(ini.tubuh[i].x, ini.tubuh[i].y);
}
},
//Gambarlah tubuh ularnya
cat: fungsi(){
for(var i=0; i<ini.tubuh.panjang; i++){
this.paintDot(ini.tubuh[i].x, ini.tubuh[i].y,ini.tubuh[i].warna);
}
},
//Hapus suatu bagian
hapusTitik: fungsi(x,y){
this.tbl.rows[y].cells[x].style.backgroundColor = "";
},
paintDot: fungsi(x,y,warna){
this.tbl.rows[y].cells[x].style.backgroundColor = warna;
},
//Dapatkan warna pada koordinat
getColor: fungsi(x,y){
kembalikan this.tbl.rows[y].cells[x].style.backgroundColor;
},
//untuk proses debug
toString: fungsi(){
varstr = "";
for(var i=0; i<ini.tubuh.panjang; i++){
str += "x:" + ini.tubuh[i].x + " y:" + ini.tubuh[i].y + " warna:" + ini.tubuh[i].warna + " - ";
}
kembalikan str;
},
//Periksa apakah titik koordinat terisi
isCellFilled: fungsi(x,y){
if(ini.tbl.baris[y].sel[x].style.backgroundColor == ""){
kembali salah;
}
kembali benar;
},
//mulai ulang
mulai ulang: fungsi(){
if(timer ini){
clearInterval(ini.timer);
}
for(var i=0; i<ini.jumlah baris;i++){
this.tbl.deleteRow(0);
}
ini.tubuh = [];
ini.init();
ini.kecepatan = 250;
},
//mempercepat
speedUp: fungsi(waktu){
if(!ini.dijeda){
if(kecepatan+waktu ini<10||kecepatan+waktu ini>2000){
kembali;
}
this.kecepatan +=waktu;
ini.jeda();
ini.pindah();
}
},
//Menghasilkan makanan.
menghasilkanDood: fungsi(){
var warna = ['merah','oranye','kuning','hijau','biru','ungu','#ccc'];
var x = Matematika.lantai(Matematika.acak()*ini.colCount);
var y = Matematika.lantai(Matematika.acak()*ini.jumlah baris);
var colorIndex = Matematika.lantai(Matematika.acak()*7);
if(!ini.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = warna[colorIndex];
}
}
};
</skrip>
<body onload="Ular.init();">
/****************************************************** ***** ************<br />
*javascript ular v2.4<br />
******************************************************* * ************/<br />
<tabel id="main" cellpacing="0" cellpadding="0"></tabel>
<input type="button" id="btn" value="Start/Pause" />Klik tombol kiri atau tekan Enter untuk memulai/menjeda permainan<br />
<input type="button" id="reset" value="Mulai dari awal" /><br />
<input type="button" id="upSpeed" value="Accelerate" />Klik tombol kiri atau tekan Ctrl + ↑ untuk mempercepat<br />
<input type="button" id="downSpeed" value="Perlambat" />Klik tombol kiri atau tekan Ctrl + ↓ untuk memperlambat
<skrip>
$('btn').onclick = fungsi(){
if(Ular.dijeda){
Ular.bergerak();
Snake.paused = salah;
}
kalau tidak{
Ular.jeda();
Snake.paused = benar;
}
};
$("setel ulang").onclick = function(){
Ular.restart();
ini.blur();
};
$("upSpeed").onclick = fungsi(){
Ular.speedUp(-20);
};
$("downSpeed").onclick = fungsi(){
Ular.speedUp(20);
};
</skrip>
</tubuh>
</html>