ネイティブ JavaScript で連聯館ゲームを実装

首先看一下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;