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

저는 Lianliankan 게임의 기본 JavaScript 버전을 모든 사람에게 추천합니다. 소스 코드 다운로드, 홈페이지는 아래와 같습니다.

먼저 색인의 html 레이아웃을 살펴보세요. .html 파일:

코드 복사 코드는 다음과 같습니다.

< div id="whole">

점수 >

0

0

;input id="reset" type="button" onclick="Reset();"value="Reset">
< ;/div>

>



;



css 폴더 아래 index.css 파일은 다음과 같습니다.




코드 복사


코드는 다음과 같습니다.


body {
font-size : 16px; 🎜>}
#전체 {
테두리: 1px double #999999;

테두리 너비: 5px;
높이: 505px ; 🎜>}
#gamePanel {

여백: 1px 1px 1px 1px; 폭: 602px; 높이: 502px; 배경: url(. ./img/Background.gif) ; 위치: 절대; } 여백: 35px;

테두리: 1px #999999; 너비: 546px; ;

위치: 상대;
}
#pieces .piece {
너비: 32px;
위치: 상대
float: 왼쪽;
#pieces .track {
너비: 32px;
위치: 상대
; 🎜>#pieces .track2 {
너비 : 32px;
위치 : 상대
배경 : 빨간색
} gameLogo {
여백: 60px;
테두리: 1px #999999; 왼쪽: 607px;
높이: 73px ; ./img/logo.gif);
위치: 절대;
}
#scorePanel {
테두리: 1px #999999; 왼쪽: 607px
위쪽: 200px;
너비: 187px;
높이: 30px;
위치: 절대값;
}
#score {
테두리: 1px #999999; 왼쪽: 607px; >상단: 240px;
너비: 187px;
높이: 30px;
위치: 절대;
}
테두리: 1px 솔리드
: 607px;
상단: 300px;
높이: 30px;
위치: 절대값;
#time {
테두리: 1px ;
왼쪽: 607px;
폭: 187px;
위치: 절대
} : 1픽셀 #999999; 왼쪽: 607px;
너비: 187px;
위치: 절대값; >
js의 핵심 부분 구현 코드를 살펴보겠습니다. js 부분은 game.js, map.js, Piece.js라는 세 가지 소스 파일로 나누어져 있습니다. 파일은 다음과 같은 클래스에 해당합니다. game은 게임 클래스를 사용하여 지도와 그림 조각 개체를 조작합니다.
game.js 코드는 다음과 같습니다.




코드 복사


코드는 다음과 같습니다.

// 게임 제어 클래스
var Game = {
// 게임 배경
gamePanel: null,
// 점수
점수: 0,
// 시간
time: 0,
// 그림 매핑 테이블
pieceMap: null,
// 그림 목록
pieceList: [],
// 그림 목록에 그림이 포함되어 있지 않습니다
pieceImgList: [],
// 그림 난수 목록
randomList: [],
// 트랙 목록
trackList: [],
// 게임 시작 여부
isGameBigin : false,
// 게임 종료 여부
isGameOver: false,
// 게임 재설정 여부
isGameReset: false,
// 그림 요소 클릭 여부 처음으로
isFirstClick : true,
//게임 시작
start : function() {
document.getElementById("start").disabled =
document.getElementById; ("reset").disabled = false ;
if (this.isGameReset) {
this.isGameOver = false
this.startTime()
return; this.isGameBegin) {
return ;
} else {
this.init()
return;
}
},
reset : function() {
document.getElementById("start") .disabled = false;
document.getElementById("reset").disabled = true;
this.clear();
>this.initImgPieces();
this.time = 0;
document.getElementById("time").innerHTML = 0;
this.score = 0
document.getElementById("score ").innerHTML = 0;
this.isGameReset = true;
this.isGameBegin = true;
},
// 초기화
init: function() {
if ( this.isGameBegin) {
return ;
}
this.pieceMap = new Map()
var _this = this.time = 0; );
this.gamePanel = document.getElementById("pieces");
this.initPieces();
this.isGameBegin = true; this.messRandomList() ;
for (var i = 0; i < 204; i ) {
var Piece = new Piece(this)
this.pieceList.push(piece) ;
var x = ( i );
var y = Math.floor(i/17);
this.pieceMap.put(x "," y, 조각); (x, y);
this.gamePanel.appendChild(piece.dom);
if (x == 0 || x == 16 || y == 0 || y == 11) 🎜>piece.track = 문서 .createElement("div");
piece.track.className = "track";
piece.dom.appendChild(piece.track)
piece.isTracked; ;
계속;
} else {
if (x == 1 || x == 15 || y == 1 || y == 10) {
piece.setAtEdge(true) ;
}
this.pieceImgList.push(piece);
}
}
},
// 사진 초기화
initImgPieces: function() {
for (var i = 0; i < this.pieceImgList.length; i ) {
this.pieceImgList[i].initImg()
this.pieceImgList[i].img.src = "img/pieces /" this.randomList[i ] ".gif"
this.pieceImgList[i].setImgSrc(this.pieceImgList[i].img.src);
// 이미지 클릭 이벤트 실행
this. PieceImgList[i].onClick( ; i < 75; i ) {
var random = parsInt(Math.random()*22*10000, 10)
var number = random#; .randomList.push(number);
this.randomList.push(number);
}
},
//랜덤 테이블 섞기
messRandomList: function() {
for (var i = 0; i < this.randomList.length; i ) {
var random = parsInt(Math.random()*15*10000, 10); var number = random 0; 🎜>var temp;
temp = this.randomList[i];
this.randomList[i] = this.randomList[number] = temp;
},
//시작 타이밍
startTime : function() {
var _this = this
if (this.isGameOver) {
return
} else {
this.time;
document.getElementById("time").innerHTML = this.time;
this.isGameBegin = true; , 1000);
}
},
// 지우기
clear : function() {
for (var i = 0; i < this.pieceList.length; i ) {
this.gamePanel.removeChild(this.pieceList[i].dom)
}
this.pieceList = [];
this.randomList =
this.pieceImgList = [];
this .isGameOver = true;
this.isGameBegin = false;
}
}
window.onload = function() {
document.getElementById("start" ).disabled = false;
document.getElementById("reset").disabled = true;
}
// 게임 시작 항목
function Start() {
Game.start() ;
}
// 게임 재설정 항목
function Reset() {
Game.reset()
}


맞춤형 js 버전 매핑 구조 맵 .js 소스 파일은 다음과 같습니다.




코드 복사


코드는 다음과 같습니다.

var Map = function(){
this.data = [];
}
Map.prototype = {
put : function(key, value) {
this.data[key] = value;
},
get : function(key) {
return this.data[key]
},
remove : function(key) {
this.data[key] = null;
},
isEmpty: function() {
return this.data.length == 0;
size: 함수 () {
return this.data.length;
}
}

그림 클래스 조각.js 소스 파일은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

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;
}
}

위는 소스 파일의 코드입니다. 구체적인 구현 코드는 CSDN의 zhangjinpeng66 다운로드에 주의하세요. Lianliankan 게임의 핵심 부분인 js에서 구현된 검색 경로에 대해 이야기해 보겠습니다.
검색 경로 알고리즘의 JS 구현은 다음과 같이 두 그림이 직선으로 함수 코드에 도달할 수 있는지 여부를 결정하는 가장 먼저 가장 간단합니다.

코드 복사 코드는 다음과 같습니다.

// 직선
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;
},

이 기능은 Lianliankan의 가장 간단한 단계를 구현하여 두 사진이 연결 조건을 충족하는지 확인한 후 24시간 검색을 수행합니다.

코드 복사 코드는 다음과 같습니다.

// 구석구석 검색
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 리소스에서 특정 게임 소스 코드를 다운로드하세요.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.