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.

Related labels：

Native js

source：php.cn

Previous article：jquery ajax post submission data is garbled_jquery Next article：View large picture function code jquery version_jquery

Statement of this Website

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

Latest Articles by Author

• What is a NullPointerException, and how do I fix it?
  2024-10-22 09:46:29
• From Novice to Coder: Your Journey Begins with C Fundamentals
  2024-10-13 13:53:41
• Unlocking Web Development with PHP: A Beginner's Guide
  2024-10-12 12:15:51
• Demystifying C: A Clear and Simple Path for New Programmers
  2024-10-11 22:47:31
• Unlock Your Coding Potential: C Programming for Absolute Beginners
  2024-10-11 19:36:51
• Unleash Your Inner Programmer: C for Absolute Beginners
  2024-10-11 15:50:41
• Automate Your Life with C: Scripts and Tools for Beginners
  2024-10-11 15:07:41
• PHP Made Easy: Your First Steps in Web Development
  2024-10-11 14:21:21
• Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity
  2024-10-11 12:59:11
• The Key to Coding: Unlocking the Power of Python for Beginners
  2024-10-11 12:17:31

Latest Issues

Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...

From 2024-04-06 18:16:26

0

1

403

Generate default values ​​and CSS variables using SCSS I'm implementing website styling. For legacy support reasons, I need to support IE11, at l...

From 2024-04-06 17:46:54

0

1

355

Generating content using Ajax - scrolling to Id doesn't work I generate page content based on data obtained via ajax. The problem I'm having is that wh...

From 2024-04-04 09:29:39

0

1

397

The question is still the same, but the title is rewritten as follows: My Javascript random function fails to generate valid responses I'm making a simple random number generator game using JS and HTML. In this game you can s...

From 2024-04-03 22:03:14

0

1

275

ReactJs: My parent array gets updated after using map function I'm trying to insert new keys into an array that are basically extracted from the parent a...

From 2024-04-03 20:04:17

0

1

352

Related Topics

More>

• How to solve the problem that mysql link reports 10060
• How to solve garbled html page
• What should I do if the matching result of the vlookup function is N/A?
• Taobao password-free payment
• What are private clouds?
• What is the normal temperature of a laptop?
• How to use html for web navigation
• How to open csv format file