首先看一下html的布局方式在index.html文件中:
[html]
分 数
0
时 间
0
css文件夹下のindex.css文件如下:
[css]
body {
font-size : 16px;
font-weight : 太字;
色: グレー;
}
#whole {
border : 1px double #999999;
border-width : 5px;
幅: 800px;
高さ: 505px;
位置 : 相対的。
}
#gamePanel {
margin: 1px 1px 1px 1px;
幅: 602px;
高さ: 502px;
背景: url(../img/background.gif) 繰り返し;
位置 : 絶対的。
}
#個 {
margin-top : 35px;
境界線: 1px 実線 #999999;
幅: 546px;
高さ: 434px;
位置: 相対的。
}
#個 .piece {
width : 32px;
高さ: 36px;
位置 : 相対的。
カーソル : ポインタ;
float : 左;
}
#個 .track {
width : 32px;
高さ: 36px;
位置 : 相対的。
float : 左;
}
#個 .track2 {
width : 32px;
高さ: 36px;
位置 : 相対的。
float : 左;
背景: 赤;
}
#gameLogo {
margin-top : 60px;
境界線: 1px 実線 #999999;
左: 607px;
幅: 187px;
高さ: 73px;
背景 : url(../img/logo.gif);
位置: 絶対的。
}
#scorePanel {
境界線 : 1px 実線 #999999;
左: 607px;
トップ: 200ピクセル;
幅: 187px;
高さ: 30px;
位置 : 絶対的。
}
#score {
境界線 : 1px 実線 #999999;
左: 607px;
トップ: 240ピクセル;
幅: 187px;
高さ: 30px;
位置 : 絶対的。
}
#timePanel {
境界線 : 1px 実線 #999999;
左: 607px;
トップ: 300ピクセル;
幅: 187px;
高さ: 30px;
位置 : 絶対的。
}
#time {
境界線 : 1px 実線 #999999;
左: 607px;
トップ: 340ピクセル;
幅: 187px;
高さ: 30px;
位置 : 絶対的。
}
#button {
境界線 : 1px 実線 #999999;
左: 607px;
トップ: 400ピクセル;
幅: 187px;
height : 30px;
Position :Absolute;
コアの js 部分の実装コードを見てみましょう。 .js、map.js、および Piece.js のソース ファイルはクラスに対応します。このゲームは、ゲーム クラスを使用してマップと画像のピース オブジェクトを操作します。
game.js コードは次のとおりです。 javascript]
// ゲーム コントロール クラス
var Game = {
// ゲームの背景
gamePanel: null,
// スコア
スコア: 0、
// 時間
time: 0,
// 画像マッピングテーブル
PieceMap: null,
// 画像リスト
PieceList: [],
pieceimglist: [],
// 画像はランダムです番号ランダムリスト:[]、
//軌跡リスト
トラックリスト:[]、
//ゲームが開始されるかどうか初めてクリックします
rset:function(){document.getElementById( "start")。 "リセット")。
this.initImgPieces();
document.getElementById("time").innerHTML = 0; ;
Document.getElementById("スコア")
this.isGameReset =
// 初期化 init : function() { if (this .isGameBegin) {️
var _this; this.time = 0; これ。 gamePanel = document.getElementById("ピース"); (); this.initImgPieces(); This.isGameBegin = true },机付き // ランダムに生成された 150 枚の画像をキャンバスに追加します
Initpieces: Function () {
var _This = This.IntrandomList()
var x = (i%17); var y = Math.floor(i/17); Piece.setPosition(x, y) ; if(x == 0 || x == y == 0 || y == 11) ; ) { e Piece.Setatedge (true); } this.pieceimglist.push (piece)// 画像を初期化する
initImgPieces : function() {
ImgList[ i].initImg();
This.pieceImgList[i].img.src = "img/pieces/"+this.randomList[i]+".gif"
This.pieceImgList[i].setImgSrc(this.pieceImgList[i].img. src){int. random() *10000、10); this.randomlist.push(number); temp = this.randomList [i];
this.randomList[i] = this.randomList[数値];
var _this = これ; } else { innerHTML = this.time; .isGameBegin = true; setTimeout(function() {_this.startTime();}, 1000) } ;クリア クリア : function() { for (変数 i = 0; < this.pieceList.length i ++) { i] .dom);this.pieceImgList = [];
this.isGameOver = true; GameBegin = false; ("開始").無効 = false
;document.getElementById("reset").disabled = true;
}
// ゲーム開始入口
function Start() {
Game.start();
} //ゲームリセットエントリ function Reset() { Game.reset(); カスタマイズされた js バージョンマッピング構造体map.jsのソースファイルは次のとおりです: [javascript] var Map = function(){ this.data = []; } M ap.prototype = { put : function(key, value) { through ’ ’ s ’ using ’ s ’ ‐ ‐ ‐ ‐ ‐ function(key, value) { return this.data[key] },isEmpty : function() { return this.data .length == 0; }, size: function() { } return this.data.length } } photos クラスピース.js のソースファイルは次のとおりです: [javascript] var Piece = function(game) {
// ゲームobject this.game = game; // エッジ要素かどうか this.isEdge = false; // エッジ要素の隣にあるかどうか this.atEdge = false ; // 画像要素 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;
} Piece.prototype = {
// 初期化 init : function( ) { This.dom = document.createElement("div"); This.dom.className = " Piece"; 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 = "トラック";
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.flashId = setInterval(function() {_this.setSelected();}, 500)
},
// 点滅を停止
stopFlash: function() {
clearInterval() this.flashId);
if (this.flashCount % 2 == 1) {
//this.dom.appendChild(this.img) , 对 // オブジェクト内部関数 ; onclick:function(){{}} var _this = this.img.onclick = function()if(_this.onclicked ) { 戻る }} (_this.checkpiece ()) { 戻る; _this.flash ( ); _this.onClicked = true;// クリックされた画像があるかどうかを確認します
checkPiece : function() {
i = 0; this.game.pieceList.length; {
)) {
//alert("同じ画像" ); [i]);
ピースリスト[i].stopFlash();
a.game.pieceList [i] ;- this.x) == 1) && (piece.y == this.y)
|| (Math.abs(ピース.y - this.y) == 1) && (ピース.x ==これ; 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));
続けます。
} 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 //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 を返します。 ️ && Corner_2.isPass()) { //alert("corner_2: " + Piece .x + "," + this.y); this.game.trackList.push(corner_2); true を返します。 } false を返します。 }, // 直接または途中一次弯搜索 isReach : function(piece) { var a = this.isSストレートリーチ(ピース); 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(fee)&& this.game.piecemap.get(i + "、" + this。 y).isPass()) { this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y)); true を返します。 ️ 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(fee)&& 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(fee)&& 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(); Piece.initTrack(); this.changeScore(); this.showTrack(ピース); }, // 显示足迹 showTrack : function(piece) { this.game.trackList.push(ピース); this.track.className = "track2"; for (var i = 0; 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[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;