네이티브 JavaScript로 Lianliankan 게임 구현(소스 코드 포함)_javascript 기술

var Piece = function(game) {
// 게임 객체
this.game = game
// 엣지 요소인지 여부
this.isEdge = false;
// 가장자리 요소 옆에 있는지 여부
this.atEdge = false
// 이미지 dom 요소
this.dom = null
// 이미지 요소
this; .img = null;
// 이미지 요소 소스
this.src = null
// 추적 요소
this.track = null
// track
this.isTracked = false ;
// 표시 요소 확인
this.selected = null
// 가로로 정렬된 그림
this.x = 0; 세로로 배열됨
this.y = 0;
// 이미지 플래시 ID
this.flashId = null
// 이미지 클릭 여부
this.onClicked = false; // 플래시 횟수
this.flashCount = 0;
this.init();
}
Piece.prototype = {
// 초기화
init: function() {
this.dom = document.createElement(" div");
this.dom.className = "piece"
this.selected = document.createElement("img")
},
// 초기화 이미지
initImg: function() {
this.img = document.createElement("img")
this.dom.appendChild(this.img)
} ,
// 알고리즘 만족 후 트랙 요소 초기화
initTrack : function() {
if (this.flashId != null) {
// 깜박임 중지
this.stopFlash( );
}
//alert(" initTrack middle");
if (this.track != null) {
return;
}
this.onClicked = false;
this.dom.removeChild(this.img);
this.track = document.createElement("div");
this.track.className = "track"
this.dom. appendChild(this.track);
},
// 비트 이미지 설정 소스
setImgSrc: function(src) {
this.src = src; 이미지의 2차원 배열 위치 설정
setPosition: function( x, y) {
this.x = x
this.y = y;
// 이미지에 대해 선택한 요소를 설정합니다.
setSelected: function() {
if (this.flashCount % 2 == 0) {
//this.dom.removeChild(this.img)
//this.selected.src = "img/selected.gif";
//this.dom.appendChild(this.selected)
this.img.src = "img/pieces/flash.gif" ;
} else {
//if (this.selected != null) {
// this.dom.removeChild(this.selected)
//}
this.img .src = this.src;
//this.dom.appendChild(this .img);
}
},
// 엣지 요소인지 설정
setEdge: function (isEdge) {
this.isEdge = isEdge;
},
// edge 요소 옆에 있는지 설정
setAtEdge : function(atEdge) {
this.atEdge = atEdge ;
},
// 플래싱 시작
flash : function() {
var _this = this;
this.flashId = setInterval(function() {_this.setSelected();} , 500);
},
// 깜박임 중지
stopFlash : function() {
clearInterval(this.flashId)
if (this.flashCount % 2 == 1) {
//if (this.selected != null) {
// this.dom.removeChild(this.selected)
//}
this.img.src = this.src;
//this.dom.appendChild(this.img);
}
} ,
//선택한 객체의 내부 함수
onClick: function() {
if (this.onClicked) {
return;
}
var _this = this;
this.img.onclick = function() {
if (!document.getElementById("start") .disabled) {
return;
}
if (_this.onClicked) {
return
}
if (_this.checkPiece()) {
return; 🎜>}
_this.flash();
_this.onClicked = true;
} ;
},
// 클릭한 사진이 있는지 확인
checkPiece: function( ) {
for (var i = 0; i < this.game.pieceList.length; i ) {
if (this.game.pieceList[i].onClicked && !this.game.pieceList[i ].equal(this)) {
if (this.game.pieceList[i].equalImage(this )) {
//alert("같은 이미지")
this.searchTrack(this .game.pieceList[i]);
} else {
this.game.pieceList[i] ].stopFlash()
this.game.pieceList[i].onClicked = false; >this.onClicked = false;
false를 반환합니다.
} else {
continue;
}
false를 반환합니다. >},
// 동일한 객체인가요?
equal: function(piece) {
return (this.x == Piece.x && this.y == Piece.y); >},
// 같은 사진인가요?
equalImage: function(piece) {
return this.src == Piece.src;
},
// 검색 경로
searchTrack: function(조각) {
if (this.isNear(조각)) {
this.linkTrack (조각)
return
}
if (this.isReach( 조각) || this.isReach2(조각)) {
this.linkTrack(piece);
return;
}
},
// 인접 여부
함수( 조각) {
var a = (Math.abs(piece.x - this.x) == 1) && (piece.y == this.y)
|| - this.y) == 1) && (piece.x == this.x);
return a;
},
// 직선
isStraightReach: function(piece) {
//alert("isStraightReach");
if (this.isNear(piece)) {
return true;
var a = false;
var b = false;
// 沿y轴方向搜索
if (this.x == Piece.x) {
//alert("!!!!!!!!!!!!");
for (var i = this.min(this.y, Piece.y) 1; i < this.max(this.y, Piece.y); i ) {
//alert("this .x == 조각.x: " 조각.x "," i);
if (this.game.pieceMap.get(piece.x "," i).isPass()) {
a = true;
this.game.trackList.push(this.game.pieceMap.get(piece.x "," i));
계속;
} else {
a = false;
this.game.trackList = [];
반환;
}
}
}
// 沿x轴方向搜索
if (this.y == Piece.y) {
//alert("!!!!! !!!!!!");
for (var i = this.min(this.x, Piece.x) 1; i < this.max(this.x, Piece.x); i ) {
//alert("this .y == 조각.y: "i"," 조각.y);
if (this.game.pieceMap.get(i "," Piece.y).isPass()) {
b = true;
this.game.trackList.push(this.game.pieceMap.get(i "," Piece.y));
계속;
} else {
b = false
this.game.trackList = [];
b를 돌려주세요;
}
}
}
||를 반환합니다. 비;
},
// 拐一次弯搜索
isReach1 : function(piece) {
//alert("isReach1");
var Corner_1 = this.game.pieceMap.get(this.x "," Piece.y);
var Corner_2 = this.game.pieceMap.get(piece.x "," this.y);
var _this = this;
if ((_this.isStraightReach(corner_1))
&& (corner_1.isStraightReach(piece))
&& Corner_1.isPass()) {
//alert("corner_1: " this.x "," 조각.y);
this.game.trackList.push(corner_1);
참을 반환합니다.
}
if ((_this.isStraightReach(corner_2))
&& (corner_2.isStraightReach(piece))
&& Corner_2.isPass()) {
//alert("corner_2: " 조각.x "," this.y);
this.game.trackList.push(corner_2);
참을 반환합니다.
}
false를 반환합니다.
},
// 直接或拐一次弯搜索
isReach : function(piece) {
var a = this.isStraightReach(piece);
var b = this.isReach1(piece);
||를 반환합니다. 비;
},
// 拐两次弯搜索
isReach2 : function(piece) {
// 沿x轴正向搜索
for (var i = this.x 1; i < 17; i ) {
if (!this.game.pieceMap.get(i "," this.y).isPass()) {
this.game.trackList = [];
휴식;
} else if (this.game.pieceMap.get(i "," this.y).isReach(piece)
&& this.game.pieceMap.get(i "," this.y).isPass ()) {
this.game.trackList.push(this.game.pieceMap.get(i "," this.y));
참을 반환합니다.
}
}
// 沿x轴搜索
for (var i = this.x - 1; i >= 0; i --) {
if (!this. game.pieceMap.get(i "," this.y).isPass()) {
this.game.trackList = [];
휴식;
} else if (this.game.pieceMap.get(i "," this.y).isReach(piece)
&& this.game.pieceMap.get(i "," this.y).isPass ()) {
this.game.trackList.push(this.game.pieceMap.get(i "," this.y));
참을 반환합니다.
}
}
// 沿y轴搜索
for (var i = this.y - 1; i >= 0; i --) {
if (!this. game.pieceMap.get(this.x "," i).isPass()) {
this.game.trackList = [];
휴식;
} else if (this.game.pieceMap.get(this.x "," i).isReach(piece)
&& this.game.pieceMap.get(this.x "," i).isPass ()) {
this.game.trackList.push(this.game.pieceMap.get(this.x "," i));
참을 반환합니다.
}
}
// 沿y轴正向搜索
for (var i = this.y 1; i < 12; i ) {
if (!this.game. PieceMap.get(this.x "," i).isPass()) {
this.game.trackList = [];
휴식;
} else if (this.game.pieceMap.get(this.x "," i).isReach(piece)
&& this.game.pieceMap.get(this.x "," i).isPass ()) {
this.game.trackList.push(this.game.pieceMap.get(this.x "," i));
참을 반환합니다.
}
}
false를 반환합니다.
},
// 路径连接
linkTrack : function(piece) {
this.initTrack();
piece.initTrack();
this.changeScore();
this.showTrack(조각);
},
// 显示足迹
showTrack : function(piece) {
this.game.trackList.push(piece);
this.track.className = "트랙2";
for (var i = 0; i < this.game.trackList.length; i ) {
//alert(i);
this.game.trackList[i].track.className = "트랙2";
}
var _this = this;
setTimeout(function() {_this.hideTrack()}, 500);
},
// 隐匿足迹
hideTrack : function() {
for (var i = 0; i < this.game.trackList.length; i ) {
this. game.trackList[i].track.className = "트랙";
}
this.game.trackList = [];
this.track.className = "트랙";
this.isTracked = true;
},
// 分数增加
changeScore : function() {
this.game.score = 100;
document.getElementById("score").innerHTML = this.game.score;
},
min : function(a, b) {
if (a < b) {
return a;
} else {
b를 반환합니다.
}
},
max : function(a, b) {
if (a > b) {
return a;
} else {
b를 반환합니다.
}
},
// 判断是否통过
isPass : function() {
return this.track != null;
}
}

// 직선
isStraightReach: function(piece) {
//alert("isStraightReach")
if (this.isNear(piece)) {
return true;
}
var a = false;
var b = false
// y축 방향으로 검색
if (this.x == 조각.x ) {
//alert("!!!!!!!!!!!")
for (var i = this.min(this. y, 조각.y) 1; i < this .max(this.y, 조각.y) i ) {
//alert("this.x == 조각.x: " 조각.x ", " i);
if (this.game .pieceMap.get(piece.x "," i).isPass()) {
a = true;
this.game.trackList.push(this .game.pieceMap.get(piece.x ", " i));
계속
} else {
a = false;
return a;
}
}
}
// x축 방향으로 검색
if (this.y == Piece.y) {
//alert(" !!!!!!!!!!!!");
for (var i = this.min(this.x, 조각.x) 1; i < this.max(this.x, 조각. x); i ) {
//alert("this .y == 조각.y: " i "," 조각.y)
if (this.game.pieceMap.get(i "," Piece.y).isPass()) {
b = true;
this.game.trackList.push(this.game.pieceMap.get(i "," Piece.y))
계속 ;
} else {
b = false
this.game.trackList = [];
return b;
}
}
}
return a || b;
},

// 구석구석 검색
isReach1: 함수(조각) {
//alert("isReach1");
var Corner_1 = this.game.pieceMap.get(this.x "," Piece.y)
var Corner_2 = this.game .pieceMap.get(piece.x "," this.y)
var _this = this
if ((_this.isStraightReach(corner_1))
&& (corner_1.isStraightReach(piece) ))
&& Corner_1.isPass()) {
//alert("corner_1: " this.x "," Piece.y)
this.game.trackList.push(corner_1)
true 반환
}
if ((_this.isStraightReach(corner_2))
&& (corner_2.isStraightReach(piece))
&& Corner_2.isPass()) {
// Alert(" Corner_2: " Piece.x "," this.y);
this.game.trackList.push(corner_2)
return true;
}
return false; },


한 번 돌려서 검색하는 기능에서 직접 검색 기능이 호출됩니다. 마찬가지로 두 번 돌려서 검색하는 가장 복잡한 검색도 한 번 검색하는 기능을 호출합니다.

isReach2: function(piece) {
// x축을 따라 앞으로 검색
for (var i = this.x 1; i < 17; i ) {
if (!this.game. PieceMap.get (i "," this.y).isPass()) {
this.game.trackList = []
break
} else if (this.game.pieceMap.get( i ", " this.y).isReach(piece)
&& this.game.pieceMap.get(i "," this.y).isPass()) {
this.game.trackList.push( this.game .pieceMap.get(i "," this.y));
return true
}
}
// x축을 따라 검색
(var i = this.x - 1; i >= 0; i --) {
if (!this.game.pieceMap.get(i "," this.y).isPass()) {
this .game.trackList = [];
break;
} else if (this.game.pieceMap.get(i "," this.y).isReach(piece)
&& this.game.pieceMap .get(i " ," this.y).isPass()) {
this.game.trackList.push(this.game.pieceMap.get(i "," this.y))
return true;
}
}
// y축을 따라 검색
for (var i = this.y - 1; i >= 0; i --) {
if (!this.game.pieceMap .get(this.x "," i).isPass()) {
this.game.trackList = []
break
} else if (this. game.pieceMap.get(this .x "," i).isReach(piece)
&& this.game.pieceMap.get(this.x "," i).isPass()) {
this. game.trackList.push(this .game.pieceMap.get(this.x "," i));
return true
}
}
// y축을 따라 앞으로 검색
for (var i = this.y 1; i < 12; i ) {
if (!this.game.pieceMap.get(this.x "," i).isPass()) {
this.game.trackList = [];
break;
} else if (this.game.pieceMap.get(this.x "," i).isReach(piece)
&& this. game.pieceMap.get(this.x "," i).isPass()) {
this.game.trackList.push(this.game.pieceMap.get(this.x "," i))
true 반환
}
}
false 반환
},


클릭한 이미지를 중심으로 x축, y축을 따라 검색을 시작하는 기능입니다.
위 내용은 본 게임 코드의 전체 내용입니다. CSDN의 zhangjinpeng66 리소스에서 특정 게임 소스 코드를 다운로드하세요.