ネイティブ JavaScript で連聯館ゲームを実装 (ソース コード付き)_JavaScript スキル

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; track
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 = "ピース";
this.selected = document.createElement("img");
// 初期化イメージ
initImg: function() {
this.img = document.createElement("img");
this.dom.appendChild(this.img); ,
// アルゴリズムを満たした後にトラック要素を初期化します
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"; appendChild(this.track);
},
// ビットイメージ設定ソース
setImgSrc: function(src) {
this.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: 関数(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("同じ画像")
this.searchTrack(this); .game.pieceList[i]);
} else {
this.game.pieceList[i] ].stopFlash();
this.game.pieceList[i].onClicked = false; >this.onClicked = false;
return false;
}
return;
}
return false; >},
// 同じオブジェクトですか?
equal: function(piece) {
return (this.x == Piece.x && this.y == Piece.y); >},
// 同じ画像ですか?
equalImage: function(piece) {
return this.src == Piece.src;
},
// 検索パス
searchTrack: function(ピース) {
if (this.isNear(ピース)) {
this.linkTrack (ピース);
return
}
if (this.isReach(ピース) || this.isReach2(ピース)) {
this.linkTrack(ピース);
},
// 隣接する
が近いかどうか: function(ピース) {
var a = (Math.abs(ピース.x - this.x) == 1) && (ピース.y == this.y)
|(Math.abs(ピース.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;
// 沿方向轴方向搜索
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 == ピース.x: " ピース.x "," i);
if (this.game.pieceMap.get(piece.x "," i).isPass()) {
a = true;
this.game.trackList.push(this.game.pieceMap.get(piece.x "," i));
続き;
} else {
a = false;
this.game.trackList = [];
戻り値;
}
}
}
// 沿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 == ピース.y: " i "," ピース.y);
if (this.game.pieceMap.get(i "," Piece.y).isPass()) {
b = true;
this.game.trackList.push(this.game.pieceMap.get(i "," Piece.y));
続き;
} else {
b = false
this.game.trackList = [];
b を返します。
}
}
}
|| を返します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 "、"ピース.y);
this.game.trackList.push(corner_1);
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);
true を返します。
}
false を返します。
},
// 直接または途中で弯搜索
isReach : function(piece) {
var a = this.isStraightReach(piece);
var b = this.isReach1(個);
|| を返します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 = [];
休憩;
} 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));
true を返します。
}
}
// 沿x轴搜索
for (var i = this.x - 1; i >= 0; i --) {
if (!this. game.pieceMap.get(i "," this.y).isPass()) {
this.game.trackList = [];
休憩;
} 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));
true を返します。
}
}
// 沿線轴搜索
for (var i = this.y - 1; i >= 0; i --) {
if (!this. game.pieceMap.get(this.x "," i).isPass()) {
this.game.trackList = [];
休憩;
} 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));
true を返します。
}
}
// 沿方向轴正向搜索
for (var i = this.y 1; i if (!this.game. PieceMap.get(this.x "," i).isPass()) {
this.game.trackList = [];
休憩;
} 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));
true を返します。
}
}
false を返します。
},
// 路径接続
linkTrack : function(piece) {
this.initTrack();
ピース.initTrack();
this.changeScore();
this.showTrack(ピース);
},
// 显示足迹
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 = "トラック";
}
this.game.trackList = [];
this.track.className = "トラック";
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;
}
}

// 直線
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, ピース.y) 1; i
//alert("this.x == ピース.x ", " i);
if (this.game .pieceMap.get(piece.x "," i).isPass()) {
a = true;
this.game.trackList.push(this .game.pieceMap.get(piece.x ", " i));
続行;
} else {
this.game.trackList = []; return a;
}
}
}
// x 軸方向に沿って検索
if (this.y == Piece.y) {
//alert(" !!!!!!!!!!!!");
for (var i = this.min(this.x, Piece.x) 1; 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)); ;
} else {
b = false
this.game.trackList = [];
return b;
}
}
return a || b;
},


この関数は、2 つの画像が接続条件を満たしているかどうかを判断する Lianliankan の最も単純なステップを実装し、24 時間検索を実行します。

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()) {
//アラート(" コーナー_2: " ピース.x "," this.y);
this.game.trackList.push(corner_2);
戻り false; },


直接検索関数は、1 回回して検索する関数で呼び出されます。同様に、最も複雑な 2 回回して検索する関数も 1 回回って検索します。




コードをコピー


コードは次のとおりです:

this.game.trackList.push( this.game .pieceMap.get(i "," this.y));
return true
}
}
// x 軸に沿って検索します。
= 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)); 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 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)); 🎜> true を返す; }
}
false を返す
},


クリックした画像を中心にX軸、Y軸に沿って検索を開始する機能です。
上記がこのゲームコードの全内容です。 CSDN の zhangjinpeng66 のリソースから特定のゲームのソース コードをダウンロードしてください。