非html 5を使用してjsボードのゲームサンプルコードを連続的に見ることを実現

27955 ワード

次の図に示すように、js版の連続視聴を実現する方法を共有します.
まずhtmlのレイアウトを見てindex.htmlファイル:
 
  



















0





0













cssフォルダの のindex.cssファイルは のとおりです.
 
  
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;


}

に、 も なjs コードを てみましょう.js は3つのソースファイルであるgameに かれています.js、map.js、piece.js ソースファイルはクラスに し、このゲームはgameクラスを じてmapとピクチャpieceオブジェクトを します.
game.jsコードは の りです.
 
  
//
var Game = {

//
gamePanel : null,

//
score : 0,

//
time : 0,

//
pieceMap : null,

//
pieceList : [],

//
pieceImgList : [],

//
randomList : [],

//
trackList : [],

//
isGameBigin : false,

//
isGameOver : false,

//
isGameReset : false,

//
isFirstClick : true,

//
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;

},

//
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;

},

// 150
initPieces : function() {

var _this = this;

this.initRandomList();

//
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 == 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);

}

}

},

//
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);

//
this.pieceImgList[i].onClick();

}

},

//
initRandomList : function() {

// ,
for (var i = 0; i < 75; i ++) {

var random = parseInt(Math.random()*22*10000, 10);
var number = random%23;
this.randomList.push(number);
this.randomList.push(number);

}

},

//
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;

}

},

//
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 : 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;

}

//
function Start() {

Game.start();

}

//
function Reset() {

Game.reset();

}

カスタムjs マッピング map.jsソースファイルは のとおりです.
 
  
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;
}

}

piece.jsソースファイルは のとおりです.
 
  
var Piece = function(game) {

//
this.game = game;

//
this.isEdge = false;

//
this.atEdge = false;

// dom
this.dom = null;

//
this.img = null;

//
this.src = null;

//
this.track = null;

//
this.isTracked = false;

//
this.selected = null;

//
this.x = 0;

//
this.y = 0;

// Id
this.flashId = null;

//
this.onClicked = false;

//
this.flashCount = 0;

this.init();

}

Piece.prototype = {

//
init : function() {

this.dom = document.createElement("div");
this.dom.className = "piece";

this.selected = document.createElement("img");

},

//
initImg : function() {

this.img = document.createElement("img");

this.dom.appendChild(this.img);

},

// track
initTrack : function() {

if (this.flashId != null) {

//
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);

},

//
setImgSrc : function(src) {

this.src = src;

},

//
setPosition : function(x, y) {

this.x = x;
this.y = y;

},

//
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);

}

},

//
setEdge : function(isEdge) {

this.isEdge = isEdge;

},

//
setAtEdge : function(atEdge) {

this.atEdge = atEdge;

},

//
flash : function() {

var _this = this;
this.flashId = setInterval(function() {_this.setSelected();}, 500);

},

//
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);

}

},

//
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;

};

},

//
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;

},

//
equal : function(piece) {

return (this.x == piece.x && this.y == piece.y);

},

//
equalImage : function(piece) {

return this.src == piece.src;

},

//
searchTrack : function(piece) {

if (this.isNear(piece)) {

this.linkTrack(piece);

return;
}

if (this.isReach(piece) || this.isReach2(piece)) {

this.linkTrack(piece);

return;
}

},

//
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;

},

//
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;
}

}

はソースファイルのコードですが、 な コードはCSDNのzhangjinpeng 66ダウンロードに してください. に、ゲームの も な を に て、jsは パスを します.
js アルゴリズムはまず、2つのピクチャが コードに に できるかどうかを することが も である.
 
  
//
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;
},

この は,2つのピクチャが に するか かを に する も なステップを し, いで1 のベンド を した.
 
  
//
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;
},

1 のベンド の で する が び され、 じように も なベンド2 のベンド でも1 のベンド の が び されます.
 
  
//
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のzhangjinpeng 66のリソースからダウンロードしてください.