Native JavaScript implements Lianliankan game (with source code)_javascript skills

I recommend a native JavaScript version of Lianliankan game to everyone, source code download, the homepage is as shown below:

First, take a look at the html layout in the index.html file:

Copy code The code is as follows:

>





< div id="whole">

score

0

time

0

< ;/div>

The index.css file under the css folder is as follows:

Copy code The code is as follows: body {

font-size : 16px;

font-weight : bold ;
color : gray;
}
#whole {
border : 1px double #999999;
border-width : 5px;
width : 800px;
height : 505px ;
position : relative;
}
#gamePanel {
margin: 1px 1px 1px 1px;
width : 602px;
height : 502px;
background : url(. ./img/background.gif) repeat;
position : absolute;
}
#pieces {
margin-top : 35px;
border : 1px solid #999999;
width : 546px;
height : 434px;
position: relative;
}
#pieces .piece {
width : 32px;
height : 36px;
position : relative;
cursor : pointer;
float : left;
}
#pieces .track {
width : 32px;
height : 36px;
position : relative;
float : left;
}
#pieces .track2 {
width : 32px;
height : 36px;
position : relative;
float : left;
background : red ;
}
#gameLogo {
margin-top : 60px;
border : 1px solid #999999;
left : 607px;
width : 187px;
height : 73px ;
background : url(../img/logo.gif);
position: absolute;
}
#scorePanel {
border : 1px solid #999999;
left : 607px;
top : 200px;
width : 187px;
height : 30px;
position : absolute;
}
#score {
border : 1px solid #999999;
left : 607px;
top : 240px;
width : 187px;
height : 30px;
position : absolute;
}
#timePanel {
border : 1px solid #999999;
left : 607px;
top : 300px;
width : 187px;
height : 30px;
position : absolute;
}
#time {
border : 1px solid #999999;
left : 607px;
top : 340px;
width : 187px;
height : 30px;
position : absolute;
}
#button {
border : 1px solid #999999;
left : 607px;
top : 400px;
width : 187px;
height : 30px;
position : absolute;
}


Let’s take a look at the core js part implementation code. The js part is divided into three source files, namely game.js, map.js, and piece.js. The file corresponds to a class, in which this game uses the game class to manipulate map and picture piece objects:
The game.js code is as follows:

Copy codeThe code is as follows:

// Game control class
var Game = {
// Game background
gamePanel: null,
// Score
score: 0,
// Time
time: 0,
// Picture mapping table
pieceMap: null,
// Picture list
pieceList: [],
// Picture list does not contain pictures
pieceImgList: [],
// Picture random number list
randomList: [],
// Track list
trackList: [],
// Whether the game starts
isGameBigin : false,
// Whether the game is over
isGameOver: false,
// Whether the game is reset
isGameReset: false,
// Whether the picture element is clicked for the first time
isFirstClick : true,
//Start the game
start : function() {
document.getElementById("start").disabled = true;
document.getElementById("reset").disabled = false ;
if (this.isGameReset) {
this.isGameOver = false;
this.startTime();
return;
} else if (this.isGameBegin) {
return ;
} else {
this.init();
return;
}
},
reset : function() {
document.getElementById("start") .disabled = false;
document.getElementById("reset").disabled = true;
this.clear();
this.initPieces();
this.initImgPieces();
this.time = 0;
document.getElementById("time").innerHTML = 0;
this.score = 0;
document.getElementById("score").innerHTML = 0;
this.isGameReset = true;
this.isGameBegin = true;
},
// Initialization
init: function() {
if (this.isGameBegin) {
return ;
}
this.pieceMap = new Map();
var _this = this;
this.time = 0;
this.startTime();
this.gamePanel = document.getElementById("pieces");
this.initPieces();
this.initImgPieces();
this.isGameBegin = true;
},
// Will randomly generate Add 150 pictures to the canvas
initPieces: function() {
var _this = this;
this.initRandomList();
// Disrupt the random list sorting
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, piece);
piece.setPosition(x, y);
this.gamePanel.appendChild(piece.dom);
if (x == 0 || x == 16 || y == 0 || y == 11) {
piece.track = document .createElement("div");
piece.track.className = "track";
piece.dom.appendChild(piece.track);
piece.isTracked = true;
continue;
} else {
if (x == 1 || x == 15 || y == 1 || y == 10) {
piece.setAtEdge(true);
}
this.pieceImgList.push(piece);
}
}
},
// Initialize pictures
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);
// Execute image click event
this.pieceImgList[i].onClick( ; i < 75; i ) {
var random = parseInt(Math.random()*22*10000, 10);
var number = random#;
this.randomList.push(number);
this.randomList.push(number);
}
},
//Shuffle the random table
messRandomList: function() {
for (var i = 0; i < this.randomList.length; i ) {
var random = parseInt(Math.random()*15*10000, 10);
var number = random 0;
var temp;
temp = this.randomList[i];
this.randomList[i] = this.randomList[number];
this.randomList[number] = temp;
}
},
//Start timing
startTime : function() {
var _this = this;
if (this.isGameOver) {
return;
} else {
this.time;
document.getElementById("time").innerHTML = this.time;
this.isGameBegin = true;
setTimeout(function() {_this.startTime();}, 1000);
}
},
// Clear
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;
}
// Game start entry
function Start() {
Game.start();
}
// Game reset entry
function Reset() {
Game.reset();
}


The customized js version mapping structure map.js source file is as follows :

Copy code

The code is as follows:

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 : function () {
return this.data.length;
}
}

The picture class piece.js source file is as follows:

Copy code The code is as follows:

var Piece = function(game) {
// Game object
this.game = game;
// Whether it is an edge element
this.isEdge = false;
// Whether it is next to the edge element
this.atEdge = false;
// Image dom element
this.dom = null;
// Image element
this.img = null;
// Image element source
this.src = null;
// Track element
this.track = null;
// Whether it can be used as a track
this.isTracked = false ;
// Check mark element
this.selected = null;
// Pictures arranged horizontally
this.x = 0;
// Pictures arranged vertically
this.y = 0;
// Image flash Id
this.flashId = null;
// Whether the image is clicked
this.onClicked = false;
// Number of flashes
this.flashCount = 0;
this.init();
}
Piece.prototype = {
// Initialization
init: function() {
this.dom = document.createElement(" div");
this.dom.className = "piece";
this.selected = document.createElement("img");
},
// Initialization image
initImg: function() {
this.img = document.createElement("img");
this.dom.appendChild(this.img);
},
// Initialize the track element after satisfying the algorithm
initTrack : function() {
if (this.flashId != null) {
// Stop flashing
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);
},
// Bit image setting source
setImgSrc: function(src) {
this.src = src;
},
// Set the two-dimensional arrangement position for the image
setPosition: function( x, y) {
this.x = x;
this.y = y;
},
// Set the selected element for the image
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);
}
},
// Set whether it is an edge element
setEdge: function(isEdge) {
this.isEdge = isEdge;
},
// Set whether it is next to the edge element
setAtEdge : function(atEdge) {
this.atEdge = atEdge;
},
// Start flashing
flash : function() {
var _this = this;
this.flashId = setInterval(function() {_this.setSelected();}, 500);
},
// Stop flashing
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);
}
} ,
//The internal function of the selected object
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;
} ;
},
// Check whether there is a clicked picture
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("The same Image");
this.searchTrack(this.game.pieceList[i]);
} else {
this.game.pieceList[i] ].stopFlash();
this.game.pieceList[i].onClicked = false;
this.onClicked = false;
return false;
}
return true;
} else {
continue;
}
}
return false;
},
// Is it the same object?
equal: function(piece) {
return (this.x == piece.x && this.y == piece.y);
},
// Is it the same picture?
equalImage: function(piece) {
return this.src == piece.src;
},
// Search path
searchTrack: function(piece) {
if (this.isNear(piece)) {
this.linkTrack (piece);
return;
}
if (this.isReach(piece) || this.isReach2(piece)) {
this.linkTrack(piece);
return;
}
},
// Whether adjacent
isNear: function(piece) {
var a = (Math.abs(piece.x - this.x) == 1) && (piece.y == this.y)
|| (Math.abs(piece.y - this.y) == 1) && (piece.x == this.x);
return a;
},
// Straight line
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 == piece.x: " piece.x "," i);
if (this.game.pieceMap.get(piece.x "," i).isPass()) {
a = true;
this.game.trackList.push(this.game.pieceMap.get(piece.x "," i));
continue;
} else {
a = false;
this.game.trackList = [];
return a;
}
}
}
// 沿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 == piece.y: " i "," piece.y);
if (this.game.pieceMap.get(i "," piece.y).isPass()) {
b = true;
this.game.trackList.push(this.game.pieceMap.get(i "," piece.y));
continue;
} else {
b = false
this.game.trackList = [];
return b;
}
}
}
return a || 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 "," piece.y);
this.game.trackList.push(corner_1);
return 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;
},
// 直接或拐一次弯搜索
isReach : function(piece) {
var a = this.isStraightReach(piece);
var b = this.isReach1(piece);
return a || b;
},
// 拐两次弯搜索
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轴搜索
for (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));
return true;
}
}
return false;
},
// 路径连接
linkTrack : function(piece) {
this.initTrack();
piece.initTrack();
this.changeScore();
this.showTrack(piece);
},
// 显示足迹
showTrack : function(piece) {
this.game.trackList.push(piece);
this.track.className = "track2";
for (var i = 0; i < this.game.trackList.length; i ) {
//alert(i);
this.game.trackList[i].track.className = "track2";
}
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 = "track";
}
this.game.trackList = [];
this.track.className = "track";
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 {
return b;
}
},
max : function(a, b) {
if (a > b) {
return a;
} else {
return b;
}
},
// 判断是否通过
isPass : function() {
return this.track != null;
}
}

The above is the code of the source file. For the specific implementation code, please pay attention to zhangjinpeng66 download in CSDN. Let’s talk about the core part of the Lianliankan game, the search path implemented in js.
JS implementation of the search path algorithm is first and simplest to determine whether two pictures can reach the function code in a straight line as follows:

Copy code The code is as follows:

// Straight line
isStraightReach: function(piece) {
//alert("isStraightReach");
if (this.isNear(piece)) {
return true;
}
var a = false;
var b = false;
// Search along the y-axis direction
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 == piece.x: " piece.x "," i);
if (this.game .pieceMap.get(piece.x "," i).isPass()) {
a = true;
this.game.trackList.push(this.game.pieceMap.get(piece.x ", " i));
continue;
} else {
a = false;
this.game.trackList = [];
return a;
}
}
}
// Search along the x-axis direction
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 == piece.y: " i "," piece.y);
if (this.game.pieceMap.get(i "," piece.y).isPass()) {
b = true;
this.game.trackList.push(this.game.pieceMap.get(i "," piece.y));
continue;
} else {
b = false
this.game.trackList = [];
return b;
}
}
}
return a || b;
},

This function implements the simplest step of Lianliankan to determine whether two pictures meet the connection conditions, and then performs a round-the-clock search.

Copy code The code is as follows:

// Search around a corner
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 "," piece.y);
this.game.trackList.push(corner_1);
return 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;
},

The direct search function is called in the function of turning once and searching. Similarly, the most complex search of turning twice will also call the function of searching once.

Copy code The code is as follows:

// Turn twice to search
isReach2: function(piece) {
// Search forward along the x-axis
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;
}
}
// Search along the x-axis
for (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;
}
}
// Search along the y-axis
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;
}
}
// Search forward along the y-axis
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));
return true;
}
}
return false;
},

This function starts the search along the x-axis and y-axis with the clicked image as the center.
The above is the entire content of this game code. Please download the specific game source code from zhangjinpeng66’s resources in CSDN.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn