非html5を使用してjsボードLianliankanゲームのサンプルコードを実装する

以下の図に示すように、Lianliankan ゲームの JS バージョンを実装する方法を共有しましょう:

まず、index.html ファイル内の HTML レイアウトを確認します:

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

連聯館

スコア div>

>Time

;

div>

< /body>

css フォルダー内のindex.css ファイルは次のとおりです。コードをコピーします

コードは次のとおりです。 🎜>色 : グレー;

}

#whole {

ボーダー : 1px double #999999;

ボーダー幅 : 5px; ;
高さ : 505px ;
位置 :

} マージン : 1px 1px 1px 幅 : 602px ; 高さ : 502px ; 背景 : url(../img/background.gif)

位置 : 絶対;

#個🎜>
マージン : 35px;
ボーダー : 1px ソリッド
幅 : 546px;
位置 : 相対; 🎜>
#pieces {

幅 : 32px;
高さ : 36px;
カーソル : ポインタ : 左; >
}

#pcs .track {

幅 : 32px;
高さ : 36px;
float : left;
}

#pcs .track2 {

幅 : 32px;
高さ : 36px;
浮動小数点 : 左; : 赤;

}

マージントップ : 60px;
ボーダー : 1px 実線
左 : 607px; >幅: 187 ピクセル;
高さ: 73 ピクセル;
位置: 絶対;スコアパネル {

ボーダー : 1px ソリッド #999999;
上 : 200px;
高さ : 30px;

}

#score {

ボーダー : 1px 実線 #999999;
左 : 607px;
幅 : 187px;
高さ : 30px;
位置 : 絶対;

}

境界線 : 1px 実線
左 : 607px;
トップ: 300px;
高さ: 30px;

}

境界線: 1px 実線 #999999;
左: 607px;
幅: 187px;
位置: 絶対; 🎜>
#button {

ボーダー : 1px ソリッド #999999;
上 : 400px;
高さ : 30px; 🎜>position :Absolute;

}

コアの js 部分の実装コードを見てみましょう。js 部分は 3 つのソースファイル (ゲーム) に分かれています。 js、map.js、ピース各 .js ソースファイルはクラスに対応します。このゲームは、ゲームクラスを使用してマップおよびピクチャピースオブジェクトを操作します。

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

コードをコピー

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

// ゲームコントロールクラス
var Game = {

// ゲームの背景
gamePanel: null,

// スコア
スコア: 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.startTime();

>} else if (this.isGameBegin) {

return;

} else {

return;
}

},

reset : function() {

document.getElementById("start").disabled = false; "リセット").disabled = true;

this.initPieces();
this.time = 0; >document.getElementById("time").innerHTML = 0;

this.score = 0;
document.getElementById("score").innerHTML = 0; isGameReset = true;
this.isGameBegin = true;

},

// 初期化
init : function() {

if (this.isGameBegin ) {

return;

}

this.pieceMap = new Map();

var _this = this; .time = 0;
this.gamePanel = document.getElementById("pieces");

this.initPieces(); initImgPieces();

this.isGameBegin = true;

},

// ランダムに生成された 150 枚の画像をキャンバスに追加します
initPieces: function() {

var _this = this;

this.initRandomList();

//ランダムリストの並べ替えを中断します

for (var i = 0; i < 204; i ) {

var Piece = new Piece(this);

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 ) {

ピース.トラック = document.createElement("div");
ピース.track.className = "トラック";
ピース.dom.appendChild(🎜); >piece.isTracked = true;

続行;

if (x == 1 || x == 1 || y == 1 || y == 10) {

ピース.setAtEdge(true);

this.pieceImgList.push(ピース); >
}

},

//写真を初期化します
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 番号 = ランダム#;
this.randomList.push(数値);

},

// ランダムテーブルを中断します
messRandomList : function() {

for (var i = 0; i < this.randomList.length; i ) {

varランダム = parseInt(Math.random()* 15*10000, 10);
var 番号 = ランダム 0;
temp = this.randomList[i]; this.randomList[i] = this.randomList[number];

}

// 開始タイミング
startTime : function() {

var _this = this;

if (this.isGameOver) {

return

} else; {

this.time ;
document.getElementById("time").innerHTML = this.time;
this.isGameBegin = true; ();}, 1000);

}

},

// Clear
clear : function() {

for (var i = 0; i

this.pieceList[i].dom); >this.pieceList = [];
this.pieceImgList = [];

this.isGameBegin = false; 🎜>
}

}

window.onload = function() {

document.getElementById("start").disabled = false; .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) { 

これを返します 
}, 

削除: 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; ; 

// 画像要素 
this.img = null; 

// 画像要素のソース 

// トラック要素
this.track = null; 

// トラックとして使用できるかどうか
this.isTracked = false; 

// チェックマーク要素
 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: 関数() { 

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

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

}, 

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

}, 

// 選択されたオブジェクトの内部関数
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 
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.onClicked = false; 

 🎜>
} 

true を返します。

} else { 

続行; 

} 

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(ピース)) { 

this.linkTrack(ピース); 
} 

if (this.isReach(ピース) || this.isReach2 (ピース)) { 

this.linkTrack(ピース); 

return 
 }, 

// 隣接しているかどうか 
isNear : function(ピース) { 

var a = (Math.abs(ピース.x - this. x) == 1) && (ピース.y == this.y) 
|| (Math.abs(ピース.y - this.y) == 1) && (ピース.x == this.x) ; 

return 
}, 

// 直線 
isStraightReach : function(piece) { 
//alert("isStraightReach"); 
if (this.isNear(piece)) { 

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 "," Piece.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 
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 <12; 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, Piece.y) 1; 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)); 

 
} else { 

a = false; 

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 つの画像が接続条件を満たしているかどうかを判断するための最も単純なステップを実装します。迂回検索を実行します。 




コードをコピー

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

// 角を検索 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; 

検索関数内で直接検索関数が呼び出されます。最も複雑な 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 = []; 

休憩; 

} 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 を返します。 
}、

 この関数の点から始まる図は、それぞれ中心方向 x 軸、y 軸方向に展開されます。中zhangjinpeng66の资源里下載。

非html5を使用してjsボードLianliankanゲームのサンプルコードを実装する_JavaScriptスキル