Home >Web Front-end >JS Tutorial >Use non-html5 to implement js board Lianliankan game sample code_javascript skills
Use non-html5 to implement js board Lianliankan game sample code_javascript skills
- WBOYOriginal
- 2016-05-16 17:21:541272browse
Let me share with you how to implement the js version of the Lianliankan game, as shown in the figure below:
First look at the html layout in the index.html file:
Copy code The code is as follows:
< ;div id="gamePanel" tabindex="0">
score
0
0
< /body>
The index.css file in 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, piece Each .js source file corresponds to a class. This game uses the game class to manipulate map and picture piece objects:
The game.js code is as follows:
Copy code The 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: [],
//The picture list does not contain pictures
pieceImgList: [],
// The picture random number list
randomList: [],
// Track list
trackList: [],
// Whether the game starts
isGameBigin: false,
// Whether the game ends
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;
},
// Add 150 randomly generated 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();
}
},
// Initialize the random table
initRandomList: function() {
// Get the random number sequence, appearing in pairs
for (var i = 0; i < 75; i ) {
var random = parseInt(Math.random()*22*10000, 10);
var number = random#;
this.randomList.push(number);
this.randomList.push(number);
}
},
// Disrupt 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 are arranged horizontally
this.x = 0;
// Pictures are arranged vertically
this.y = 0;
// Picture flashing 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");
} ,
//Initialize 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 picture
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;
},
// Whether it is the same object
equal : function(piece) {
return (this.x == piece.x && this.y == piece.y);
},
// Whether it is 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;
},
// 直线
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;
},
//Score increase
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;
}
},
// Determine whether
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.
The first and simplest thing to implement the search path algorithm in js is to judge 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;
// along the y-axis Direction search
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;
}
}
}
// Along the x-axis Direction search
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 roundabout 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 search function, which is also the most complicated. The two-turn search will also call the function of one-turn search.
Copy code The code is as follows:
// 拐两次弯搜索
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;
},
该函数以点击的图片为中心分别沿x轴,y轴展开搜索。
以上是本游戏代码的全部内容。具体游戏源码请到CSDN中zhangjinpeng66的资源里下载。
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
Previous article：HTML js realizes dynamic display of local time_javascript skillsNext article：HTML js realizes dynamic display of local time_javascript skills
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills