Saya tidak ada hubungannya, jadi saya juga menulis javascript untuk Lianliankan. Komentarnya relatif lengkap. Teman-teman yang ingin belajar harus membacanya.
Bagian tersulit dari Lian Lian Kan mungkin adalah pencarian jalur, yaitu melihat apakah ada jalur yang bisa dilewati antara dua titik yang diklik mouse. Saya melihat metode penulisan rekursif seseorang, dan saya merasa gatal, jadi saya mencari tahu dan menemukan bahwa tidak terlalu sulit tanpa rekursi.
Pencarian jalur dianalisis dari yang sederhana hingga yang sulit. Pertama menganalisis apakah suatu garis lurus dapat dihubungkan dalam suatu garis lurus, kemudian menganalisis apakah dua titik pada suatu garis lurus dapat dihubungkan dengan memutar dua putaran, dan terakhir menganalisis keadaan bila tidak ada garis lurus. pada garis lurus.
Diuji di bawah IE6, IE8, firefox3.0.3.
Copy kode kodenya sebagai berikut:
<html>
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>Kode sumber JS Lianliankan versi beranotasi sempurna</title>
</kepala>
<gaya>
meja{
keruntuhan perbatasan: keruntuhan;
}
td{
batas: padat #ccc 1px;
tinggi: 36 piksel;
lebar: 36 piksel;
kursor: penunjuk;
}
td gambar{
tinggi: 30 piksel;
lebar: 30 piksel;
batas: padat #fff 3px;
/*
filter: alfa(opasitas=80);
-moz-opasitas: 0,8;
opacity: 0,8;
*/
}
</gaya>
<skrip>
//Bagian selanjutnya adalah bagian algoritma pencarian jalur dan tidak ada hubungannya dengan lapisan presentasi
//variabel global
var X = 16; //Jumlah total baris
var Y = 14; //Jumlah total kolom
tipe var = 15;//Tipe grafis
//matriks tata letak
//Untuk kenyamanan algoritma, baris pertama, kolom pertama, baris terakhir dan kolom terakhir dari matriks semuanya ditandai sebagai 0, yang merupakan jalur alami.
var arr = Array baru(Y);
var tbl;//Menampilkan elemen tabel tata letak
var p1 = null;//Koordinat titik pertama yang digunakan dalam jalur pencarian
var p2 = null;//Koordinat titik kedua yang digunakan dalam jalur pencarian
var e1 = null;//Elemen yang sesuai dengan poin pertama
var e2 = null;//Elemen yang sesuai dengan poin kedua
//Pencarian jalur, jika diberi dua titik, cari jalur
//Jalur diwakili oleh titik-titik yang dapat dihubungkan
fungsi getPath(p1, p2){
//Urutkan p1 dan p2 sebelum memulai pencarian sehingga p2 berada sejauh mungkin di kanan bawah p1.
//Ini dapat menyederhanakan algoritma
jika(p1.x>p2.x){
var t = p1;
hal1 = hal2;
p2 = t;
}
lain jika(p1.x==p2.x){
jika(p1.y>p2.y){
var t = p1;
hal1 = hal2;
p2 = t;
}
}
//Dengan menganalisis hubungan posisi antara dua titik di Lianliankan, kami menganalisis setiap jenis secara bertahap dari yang sederhana hingga yang sulit.
//Jenis pertama, apakah dua titik berada pada satu garis lurus, dan apakah kedua titik tersebut dapat dihubungkan oleh garis lurus
if((onlineY(p1, p2)||onlineX(p1, p2)) && hasLine(p1, p2)){
status = 'tipe 1';
kembali [p1,p2];
}
//Tipe kedua, jika salah satu dari dua titik dikelilingi seluruhnya, maka tidak akan berfungsi.
if( !isEmpty({x:p1.x, y:p1.y+1}) && !isEmpty({x:p1.x, y:p1.y-1}) && !isEmpty({x:p1. x-1, y:p1.y}) && !isEmpty({x:p1.x+1, y:p1.y}) ){
status = 'tipe 2';
kembalikan nol;
}
if( !isEmpty({x:p2.x, y:p2.y+1}) && !isEmpty({x:p2.x, y:p2.y-1}) && !isEmpty({x:p2. x-1, y:p2.y}) && !isEmpty({x:p2.x+1, y:p2.y}) ){
status = 'tipe 2';
kembalikan nol;
}
//Tipe ketiga, dua titik berada pada satu garis lurus, namun tidak dapat dihubungkan dengan garis lurus
var pt0, pt1, pt2, pt3;
//Jika semuanya berada pada sumbu x, pindai kemungkinan jalur dari kiri ke kanan,
//Bangun 4 simpul pt0, pt1, pt2, pt3 setiap kali, lalu periksa apakah keduanya terhubung satu sama lain
jika(onlineX(p1, p2)){
untuk(var i=0; i<Y; i++){
jika(i==p1.y){
melanjutkan;
}
pt0 = hal1;
pt1 = {x: p1.x, y: i};
pt2 = {x: p2.x, y: i};
pt3 = hal2;
//Jika titik puncak tidak kosong, jalan diblokir.
if(!isEmpty(pt1) || !isEmpty(pt2)){
melanjutkan;
}
if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){
status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')' ;
kembali [pt0, pt1, pt2, pt3];
}
}
}
//Jika semuanya berada pada sumbu y, pindai kemungkinan jalur dari atas ke bawah,
//Bangun 4 simpul pt0, pt1, pt2, pt3 setiap kali, lalu periksa apakah keduanya terhubung satu sama lain
jika(onlineY(p1, p2)){
untuk(var j=0; j<X; j++){
jika(j==p1.x){
melanjutkan;
}
pt0 = hal1;
pt1 = {x:j, y:p1.y};
pt2 = {x:j, y:p2.y};
pt3 = hal2;
//Jika titik puncak tidak kosong, jalan diblokir.
if(!isEmpty(pt1) || !isEmpty(pt2)){
melanjutkan;
}
if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){
status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')' ;
kembali [pt0, pt1, pt2, pt3];
}
}
}
//Tipe keempat, kedua titiknya tidak berada pada satu garis lurus.
//Pindai kemungkinan jalur secara vertikal terlebih dahulu
//Demikian pula, buatlah 4 simpul setiap kali untuk melihat apakah simpul tersebut dapat dilewati
untuk(var k=0; k<Y; k++){
pt0 = hal1;
pt1 = {x:p1.x, y:k};
pt2 = {x:p2.x, y:k};
pt3 = hal2;
status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')' ;
//Kasus khusus, jika pt0 dan pt1 bertepatan
jika(sama(pt0,pt1)){
//Jika pt2 tidak kosong, jalur ini diblokir
jika(!isEmpty(pt2)){
melanjutkan;
}
jika( hasLine(pt1, pt2) && hasLine(pt2, pt3) ){
kembali [pt1, pt2, pt3];
}
kalau tidak{
melanjutkan;
}
}
//Kasus khusus, jika pt2 dan pt3 tumpang tindih
lain jika(sama(pt2,pt3)){
//Jika pt1 tidak kosong, jalur ini diblokir
jika(!isEmpty(pt1)){
melanjutkan;
}
jika( hasLine(pt0, pt1) && hasLine(pt1, pt2) ){
kembali [pt0, pt1, pt2];
}
kalau tidak{
melanjutkan;
}
}
//Jika pt1 atau pt2 tidak kosong, maka tidak akan berfungsi.
if(!isEmpty(pt1) || !isEmpty(pt2)){
melanjutkan;
}
if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){
kembali [pt0, pt1, pt2, pt3];
}
}
//Pindai kemungkinan jalur secara horizontal
untuk(var k=0; k<X; k++){
pt0 = hal1;
pt1 = {x:k, y:p1.y};
pt2 = {x:k, y:p2.y};
pt3 = hal2;
status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')' ;
jika(sama(pt0,pt1)){
jika(!isEmpty(pt2)){
melanjutkan;
}
jika( hasLine(pt1, pt2) && hasLine(pt2, pt3) ){
kembali [pt1, pt2, pt3];
}
}
jika(sama(pt2,pt3)){
jika(!isEmpty(pt1)){
melanjutkan;
}
jika( hasLine(pt0, pt1) && hasLine(pt1, pt2) ){
kembali [pt0, pt1, pt2];
}
}
if(!isEmpty(pt1) || !isEmpty(pt2)){
melanjutkan;
}
if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){
kembali [pt0, pt1, pt2, pt3];
}
}
//status='tipe4';
kembalikan nol;
/************ tipe akhir 4 **************/
}
fungsi sama(p1, p2){
kembali ((p1.x==p2.x)&&(p1.y==p2.y));
}
fungsi onlineX(p1, p2){
kembalikan p1.y==p2.y;
}
fungsi onlineY(p1, p2){
kembali p1.x==p2.x;
}
fungsi kosong(p){
kembali (arr[py][px]==0);
}
fungsi hasLine(p1, p2){
jika(p1.x==p2.x&&p1.y==p2.y){
kembali benar;
}
jika(onlineY(p1, p2)){
var i = p1.y>p2.y?p2.y:p1.y;
saya = saya+1;
var max = p1.y>p2.y?p1.y:p2.y;
untuk(; saya<maks; saya++){
var p = {x: p1.x, y: i};
jika(!adalahKosong(p)){
merusak
}
}
jika(i==maks){
kembali benar;
}
kembali salah;
}
lain jika(onlineX(p1, p2)){
var j = p1.x>p2.x?p2.x:p1.x;
j = j+1;
var max = p1.x>p2.x?p1.x:p2.x;
untuk(; j<maks; j++){
var p = {x: j, y: p1.y};
jika(!adalahKosong(p)){
merusak
}
}
jika(j==maks){
kembali benar;
}
kembali salah;
}
}
//Bagian selanjutnya adalah bagian layer presentasi, termasuk menggambar, menginisialisasi matriks, mengikat event mouse...
fungsi $(id){kembalikan dokumen.getElementById(id)}
var t1, t2;//untuk pengujian
//Jalur dasar gambar
var IMG_PATH = '//www.VeVB.COM';
//inisialisasi
fungsi init(){
//Bangun perpustakaan gambar
var imgs = Array baru(30);
untuk(var i=1; i<=30; i++){
imgs[i] = 'r_' + i + '.gif';
}
tbl = $('tbl');
//Membangun tabel
untuk(var baris=0;baris<Y-2;baris++){
var tr=tbl.insertRow(-1);
untuk(var col=0;col<X-2;col++) {
var td=tr.insertCell(-1);
}
}
//Membangun matriks
untuk(var i=0; i<Y; i++){
arr[i] = Array baru(X);
untuk(var j=0; j<X; j++){
arr[i][j] = 0;
}
}
var total = (X-2)*(Y-2);
var tmp = new Array(total);//Digunakan untuk menghasilkan posisi acak
untuk(var i=0; i<total; i++){
tmp[i] = 0;
}
untuk(var i=0; i<total; i++){
jika(tmp[i]==0){
var t = Matematika.lantai(Matematika.acak()*tipe) + 1;
tmp[i] = t;
sementara(benar){
var c = Matematika.lantai(Matematika.acak()*(total-i)) + i;
jika(tmp[c]==0){
tmp[c] = t;
merusak;
}
}
}
}
var c = 0;
untuk(var i=1; i<Y-1; i++){
untuk(var j=1; j<X-1; j++){
arr[i][j] = tmp[c++];
tbl.rows[i-1].cells[j-1].innerHTML = '<img src="' + IMG_PATH + imgs[arr[i][j]] + '" />';
}
}
//Mengikat event mouse
var img1, img2;
dokumen.body.onclick = function(e){
var el = document.all?event.srcElement:e.target;
if(el.parentNode.tagName!='TD'){
kembali;
}
jika(!img1){
img1 =el;
}
kalau tidak{
img2 =el;
}
el.style.border = 'padat #3399FF 3px';
el = el.parentNode;
if(el.innerHTML==''){
p1 = p2 = e1 = e2 = nol;
}
var r = el.parentNode.rowIndex +1;
var c = el.cellIndex +1;
jika(p1==nol){
//el.childNodes[0].style.border = 'solid #ccc 3px';
p1 = {x:c, y:r};
e1 = el;
}
kalau tidak{
p2 = {x:c, y:r};
e2 = el;
if(!equal(p1, p2)&&e1.innerHTML==el.innerHTML){
var jalur = getPath(p1, p2);
jika(jalur!=null){
e1.innerHTML = e2.innerHTML = '';
arr[p1.y][p1.x] = arr[p2.y][p2.x] = 0;
}
}
if(t1){t1.style.backgroundColor = '';}
t1 = e1;
if(t2){t2.style.backgroundColor = '';}
t2 = e2;
img1.style.border = 'padat #fff 3px';
img2.style.border = 'padat #fff 3px';
p1 = p2 = e1 = e2 = img1 = img2 = nol;
t1.style.backgroundColor = t2.style.backgroundColor = 'lightpink';
}
}
}
</skrip>
<tubuh onload="init();">
js Lianliankan versi beranotasi sempurna<br />
<tabel id="tbl" cellpacing="0" cellpadding="0">
</tabel>
</tubuh>
</html>