Native JavaScript implementation repeatedly watch game (with source code) _javascript Tips

Source: Internet
Author: User
Tags abs shuffle
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.