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

ネイティブ JavaScript バージョンの Lianliankan ゲームを皆さんにお勧めします。ソース コードのダウンロード、ホームページは以下のとおりです:

まず、インデックスの 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 のリソースから特定のゲームのソース コードをダウンロードしてください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jquery ajaxポスト送信データが文字化けする_jquery次の記事：jquery ajaxポスト送信データが文字化けする_jquery

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved