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

ネイティブ JavaScript バージョンの Lianliankan ゲームを皆さんにお勧めします。ソースコードのダウンロード、ホームページは以下のとおりです:
ネイティブ JavaScript で連聯館ゲームを実装 (ソースコード付き)_JavaScript スキル
まず、インデックスの HTML レイアウトを見てください。 .html ファイル:

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

連聯館

<

id="ゲームロゴ">

<スパン>/span>

;time

;input id="reset" type="button" onclick="Reset();"value="Reset">

>

;

css フォルダー内のindex.css ファイルは次のとおりです:

コードをコピーします。 >

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

body {
font-size : 16px;
font-weight : 太字
color : grey; 🎜>}
#whole {
ボーダー : 1px double #999999;
幅 : 800px;
位置 : 相対; 🎜>}

#gamePanel {
マージン: 1px 1px 1px 1px;
幅 : 602px;

背景 : url(. ./img/background.gif); ; 位置:絶対; } #個 { マージントップ: 35px; 幅: 546px; 高さ: 434px ;

位置: 相対;

#個 .piece {
幅 : 36px;
位置 : 相対; >浮動小数点:左;
#個 .track {
幅 : 32px;
高さ : 36px;
浮動小数点 : 左; 🎜>#個 .track2 {
幅 : 32px;
高さ : 36px;
浮動小数点 : 左;
#ゲームロゴ {
マージントップ : 60px;
ボーダー : 1px ソリッド #999999;
幅 : 187px;
背景 : url(. ./img/logo.gif);
位置: 絶対;
}
#scorePanel {
境界線 : 1px 実線
左 : 607px;
幅 : 187px;
高さ : 30px;
位置 : 絶対値;
#score {
境界線 : 1px
左 : 607px; >トップ : 240 ピクセル;
高さ : 30 ピクセル;
#timePanel {
ソリッド #999999; : 607px;
幅: 187px;
位置: 絶対;
#time {
ソリッド #999999 ;
左 : 607px;
幅 : 187px;
位置 : 絶対; : 1px ソリッド #999999;
左: 607px;
高さ: 30px;

コアの js 部分の実装コードを見てみましょう。js 部分は、game.js、map.js、および Piece.js という 3 つのソースファイルに分割されており、このファイルはクラスに対応しています。ゲームは、ゲームクラスを使用してマップおよび画像ピースオブジェクトを操作します:
game.js コードは次のとおりです:

コードをコピーします

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

// ゲームコントロールクラス
var Game = {
// ゲームの背景
gamePanel: null,
// スコア
スコア: 0,
// Time
time: 0,
// 画像マッピングテーブル
pieceMap: null,
// 画像リスト
pieceList: [],
// 画像リストには画像が含まれていません
pieceImgList: [],
// 画像乱数リスト
randomList: [],
// トラックリスト
trackList: [],
// ゲーム開始かどうか
isGameBigin : false,
// ゲームが終了したかどうか
isGameOver: false,
// ゲームがリセットされたかどうか
isGameReset: false,
// 画像要素がクリックされたかどうか初めて
isFirstClick : true,
// ゲームを開始します
start : function() {
document.getElementById("start").disabled = true; ("リセット").disabled = false ;
if (this.isGameReset) {
this.startTime(); else if ( this.isGameBegin) {
return ;
} else {
this.init();
}
},
reset : function() {
document.getElementById("start") .disabled = false;
document.getElementById("reset").disabled = true;
this.initPieces(); >this.initImgPieces();
this.time = 0;
this.score = 0; ").innerHTML = 0;
this.isGameReset = true;
this.isGameBegin = true;
},
// 初期化
init: function() {
if ( this.isGameBegin) {
return ;
}
this.pieceMap = new Map();
this.time = 0; );
this.gamePanel = document.getElementById("pieces");
this.initImgPieces();
this.isGameBegin = true;
// ランダムに画像を生成します。キャンバスに 150 枚の画像を追加します。
initPieces: function() {
var _this = this;
this.initRandomList(); // ランダムなリストの並べ替えを中断します。
this.messRandomList() ;
for (var i = 0; i var ピース = new Piece(this);
this.pieceList.push(ピース) ;
var x = ( i );
var y = Math.floor(i/17);
this.pieceMap.put(x "," y, Piece); (x, y);
this.gamePanel.appendChild(piece.dom);
if (x == 0 || x == 16 || y == 0 || y == 11) {
ピース.トラック = ドキュメント .createElement("div");
ピース.トラック.クラス名 = "トラック";
ピース.dom.appendChild(ピース.トラック);
ピース.isTracked = true ;
続行;
} else {
if (x == 1 || x == 15 || y == 1 || y == 10) {
piece.setAtEdge(true) ;
}
this.pieceImgList.push(piece);
}
}
},
// 画像を初期化します
initImgPieces: function() {
(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( ; i var ランダム = parseInt(Math.random()*22*10000, 10);
var 番号 = ランダム#; .randomList.push(number);
this.randomList.push(number);
}
},
//ランダムテーブルをシャッフルします
messRandomList: function() {
for (var i = 0; i var ランダム = parseInt(Math.random()*15*10000, 10);
var 番号 = ランダム 0; 🎜>var temp;
temp = this.randomList[i] = this.randomList[number];
this.randomList[number];
},
//開始タイミング
startTime : function() {
var _this = this;
if (this.isGameOver) {
return
;
this.time;
document.getElementById("time").innerHTML = this.time;
this.isGameBegin = true;
setTimeout(function() {_this.startTime();} , 1000);
}
},
// クリア
clear : function() {
for (var i = 0; i this.gamePanel.removeChild(this.pieceList[i].dom);
this.pieceList = [];
this.randomList = []; [];
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 バージョンのマッピング構造マップ.js ソースファイルは次のとおりです:

コードをコピー

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

 
var Map = function(){ 
this.data = []; 
} 
Map.prototype = { 
put : function(key, value) { 
 this.data[key] = 値; 
}, 
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; 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; 
} 
} 

上記はソースファイルのコードです。具体的な実装コードについては、CSDN の zhangjinpeng66 ダウンロードに注意してください。 Lianliankan ゲームの中核となる、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, ピース.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 時間検索を実行します。 

コードをコピー

コードは次のとおりです: // 角を検索 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()) { 
//アラート(" コーナー_2: " ピース.x "," this.y); 
this.game.trackList.push(corner_2); 
戻り false; }, 

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




コードをコピー 


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

// 2 回回して検索

isReach2: function(piece) { // x 軸に沿って前方検索しますfor (var i = this.x 1; 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 軸に沿って検索します。
 = 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 のリソースから特定のゲームのソース コードをダウンロードしてください。