To recommend a native JavaScript version of the game, source download, the home page as shown in the following figure:
First look at how HTML is laid out in the index.html file:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> See </title>
<link rel= "stylesheet" type= "Text/css" href= "Css/index.css"/>
</head>
<body>
<center>
<div id= "whole" >
<div id= "Gamepanel" tabindex= "0" >
<div id= "Pieces" >
</div>
</div>
<div id= "Gamelogo" >
</div>
<div id= "Scorepanel" >
<span> score </span>
</div>
<div id= "Score" >
<span>0</span>
</div>
<div id= "Timepanel" >
<span> Time </span>
</div>
<div id= "Time" >
<span>0</span>
</div>
<div id= "button" >
<input id= "Start" type= "button" onclick= "Start" (); "Value=" Start ></input>
<input id= "Reset" type= "button" onclick= "Reset ();" value= "Reset" ></input>
</div>
</div>
</center>
<script type= "Text/javascript" src= "Js/map.js" ></script>
<script type= "Text/javascript" src= "Js/piece.js" ></script>
<script type= "Text/javascript" src= "Js/game.js" ></script>
</body>
</html>
The Index.css files under the CSS folder are as follows:
Copy Code code as follows:
Body {
font-size:16px;
Font-weight:bold;
Color:grey;
}
#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 most core JS part of the implementation code, JS section is divided into three source files namely Game.js, Map.js, piece.js each source file corresponding to a class, which this game through the game class to manipulate map and picture piece objects:
The Game.js code is as follows:
Copy Code code as follows:
Game Control class
var Game = {
Game background
Gamepanel:null,
Scores
score:0,
Time
time:0,
Picture mapping Table
Piecemap:null,
Picture List
Piecelist: [],
Picture List does not contain pictures
Pieceimglist: [],
Picture Random sequence Table
Randomlist: [],
Trajectory list
Tracklist: [],
Whether the game started
Isgamebigin:false,
Whether the game is over
Isgameover:false,
Whether the game is reset
Isgamereset:false,
is the picture element 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;
},
Class
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 randomly generated 150 pictures to the canvas
Initpieces:function () {
var _this = this;
This.initrandomlist ();
Shuffle Random list sort
This.messrandomlist ();
for (var i = 0; i < 204 i + +) {
var piece = new Piece (this);
This.pieceList.push (piece);
var x = (i%17);
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 = = | | 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 = = | | | y = 1 | | y = = 10) {
Piece.setatedge (TRUE);
}
This.pieceImgList.push (piece);
}
}
},
Initializing a picture
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);
Perform a Picture Click event
This.pieceimglist[i].onclick ();
}
},
Initializing random tables
Initrandomlist:function () {
Get a random sequence, appear in pairs
for (var i = 0; i < i + +) {
var random = parseint (Math.random () *22*10000, 10);
var number = random%23;
This.randomList.push (number);
This.randomList.push (number);
}
},
Shuffle random Tables
Messrandomlist:function () {
for (var i = 0; i < this.randomList.length i + +) {
var random = parseint (Math.random () *15*10000, 10);
var number = random%150;
var temp;
temp = This.randomlist[i];
This.randomlist[i] = This.randomlist[number];
This.randomlist[number] = temp;
}
},
Start the timer.
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 Entrance
function Start () {
Game.start ();
}
Game Reset Entrance
function Reset () {
Game.reset ();
}
Custom JS version of the mapping structure map.js source files are as follows:
Copy Code code 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;
}
}
Picture class Piece.js source files are as follows:
Copy Code code as follows:
var Piece = function (game) {
Game objects
This.game = game;
is an edge element
This.isedge = false;
is next to the edge element
This.atedge = false;
Picture DOM elements
This.dom = null;
Picture elements
This.img = null;
Picture element Source
THIS.SRC = null;
Trajectory elements
This.track = null;
Whether it can be used as a trajectory
this.istracked = false;
check mark Element
this.selected = null;
Picture is arranged horizontally
this.x = 0;
Picture portrait arrangement
This.y = 0;
Picture Flicker ID
This.flashid = null;
Whether the picture is clicked
this.onclicked = false;
Number of flashes
This.flashcount = 0;
This.init ();
}
Piece.prototype = {
Class
Init:function () {
This.dom = document.createelement ("div");
This.dom.className = "piece";
this.selected = document.createelement ("img");
},
Initializing a picture
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 picture settings 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 selected elements for a picture
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 an edge element
Setedge:function (Isedge) {
This.isedge = Isedge;
},
setting 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 that the object is selected
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 to see if 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 the same object
Equal:function (piece) {
return (this.x = = piece.x && This.y = = piece.y);
},
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;
},
Linear
Isstraightreach:function (piece) {
Alert ("Isstraightreach");
if (This.isnear (piece)) {
return true;
}
var a = false;
var B = false;
Search along the y axis
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
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
},
Turn a corner search
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;
},
Direct or turn a bend search
Isreach:function (piece) {
var a = This.isstraightreach (piece);
var B = this.isreach1 (piece);
Return a | | b
},
Turn two times the bend search
Isreach2:function (piece) {
Forward search along the x axis
for (var i = this.x + 1; i < 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;
}
}
Forward search along the y axis
for (var i = this.y + 1; i < 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;
},
Path connection
Linktrack:function (piece) {
This.inittrack ();
Piece.inittrack ();
This.changescore ();
This.showtrack (piece);
},
Show Footprints
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);
},
Hidden footprints
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;
}
},
Judge whether or not to pass
Ispass:function () {
return this.track!= null;
}
}
The above is the source file code, the specific implementation code please pay attention to csdn zhangjinpeng66 download. Here is a look at the game's core parts, JS implementation search path.
JS implementation of the search path algorithm first of all, the simplest is to determine whether two pictures can line to the function code as follows:
Copy Code code as follows:
Linear
Isstraightreach:function (piece) {
Alert ("Isstraightreach");
if (This.isnear (piece)) {
return true;
}
var a = false;
var B = false;
Search along the y axis
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
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
},
The function realizes the simplest step of judging whether two pictures meet the connection conditions, and then turns the search on a bend.
Copy Code code as follows:
Turn a corner search
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 function of direct search is invoked in the function of a bend search, and the same most complex two-bend search invokes a function that turns a bend search.
Copy Code code as follows:
Turn two times the bend search
Isreach2:function (piece) {
Forward search along the x axis
for (var i = this.x + 1; i < 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;
}
}
Forward search along the y axis
for (var i = this.y + 1; i < 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 expands the search along the x axis and Y axis, centered on the clicked picture.
The above is the entire contents of this game code. Specific game source please go to csdn zhangjinpeng66 resources to download.
