JSオブジェクト指向でジグソーパズルを実装する方法
この記事では、JS オブジェクト指向でジグソーパズルを実装する方法を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターと一緒に見に来てください
1. HTMLコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拼图小游戏</title>
<style>
body,td { margin:0; padding:0; }
#begin { display:block; margin:20px auto; }
table { margin:80px auto; background:#fff; border:10px solid pink; }
td { width:100px; height:100px; border:1px solid #ccc; cursor:pointer; background:url(img.jpg) no-repeat; }
</style>
<script src="js.js"></script>
<script>
window.onload = function(){
var thisGame = new PinTuGame('begin');
}
</script>
</head>
<body>
<button id="begin">开始</button>
</body>
</html>2. jsコード
function PinTuGame(id){
var that = this;
this.oBtn = document.getElementById(id);
this.oTable = document.createElement('table');
this.oTbody = document.createElement('tbody');
this.aTd = null;
this.aTdMsg = []; //用于存储每个图片的信息
this.num = 0; //用于判断拼图是否完成
this.oTable.cellSpacing = '0';
this.createElem(); //初始化游戏界面
this.oBtn.onclick = function(){
for(var i = 0; i<that.aTd.length; i++){
that.aTd[i].style.opacity = 1;
}
this.innerHTML = '重新开始';
that.aTd[that.aTd.length-1].style.opacity = 0;
var iAlpha = 100;
var sp = -10;
var timer = setInterval(function(){
iAlpha += sp;
that.oTbody.style.opacity = iAlpha / 100;
if(iAlpha <=0) { sp = -sp; that.randomElem();}
if(iAlpha > 100) {clearInterval(timer) };
},15);
that.beginGame();
}
}
PinTuGame.prototype = { //初始化游戏界面
createElem: function(){
for(var i =0; i<4; i++){
var oTr = document.createElement('tr');
for(var j =0; j<4; j++){
var oTd = document.createElement('td');
this.num ++;
var tdMsg = {
seq: this.num,
bgPosition: -100*j+'px '+ -100*i+'px'
};
this.aTdMsg.push(tdMsg);
oTr.appendChild(oTd);
}
this.oTbody.appendChild(oTr);
}
this.oTable.appendChild(this.oTbody);
document.body.appendChild(this.oTable);
this.aTd = this.oTbody.getElementsByTagName('td');
for(var i = 0; i<this.aTd.length; i++){
this.aTd[i].json = this.aTdMsg[i];
this.aTd[i].style.backgroundPosition = this.aTd[i].json.bgPosition;
}
},
randomElem: function(){ //随机排序图片
this.aTdMsg.sort(function (){
return Math.random()-0.5;
});
for(var i=0;i<this.aTd.length;i++){
this.aTd[i].json = this.aTdMsg[i];
this.aTd[i].style.backgroundPosition = this.aTd[i].json.bgPosition;
}
},
beginGame: function(){ //开始游戏
var that = this;
var rows = this.oTbody.rows;
for(var i =0; i<4; i++){
for(var j =0; j<4; j++){
rows[i].cells[j].Y = i;
rows[i].cells[j].X = j;
rows[i].cells[j].onclick = function(){
var arr = [ //获取该图片的上右下左，四个方向的坐标
[this.Y-1, this.X],
[this.Y, this.X+1],
[this.Y+1, this.X],
[this.Y, this.X-1]
];
for(var i = 0; i<arr.length; i++){
if( arr[i][0]<0 || arr[i][1]<0 || arr[i][0]>3 || arr[i][1]>3)continue;
if( rows[arr[i][0]].cells[ arr[i][1] ].style.opacity == '0' ){
rows[arr[i][0]].cells[ arr[i][1] ].style.opacity = 1;
this.style.opacity=0;
//与隐藏的td交换json对象
var thisJson = this.json;
this.json = rows[arr[i][0]].cells[ arr[i][1]].json;
rows[arr[i][0]].cells[arr[i][1]].json = thisJson;
//与隐藏的td交换bakcground-position
this.style.backgroundPosition=this.json.bgPosition;
rows[arr[i][0]].cells[arr[i][1]].style.backgroundPosition=rows[arr[i][0]].cells[arr[i][1]].json.bgPosition;
}
}
that.checkWin();
};
}
}
},
checkWin: function(){ //检测游戏是否完成
var aJson = [];
for(var i = 0; i<this.aTd.length; i++){
aJson.push(this.aTd[i].json.seq);
}
for(var i = 0; i<aJson.length-1; i++){
if(aJson[i]>aJson[i+1])return;
}
for(var i = 0; i<this.aTd.length; i++){
this.aTd[i].style.opacity = 1;
}
alert('恭喜，胜利啦！');
location.reload();
}
}2. ゲーム画像素材
以上がJSオブジェクト指向でジグソーパズルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7532
15
1379
52
82
11
21
84
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
Go でオブジェクト指向プログラミングを探索する
Apr 04, 2024 am 10:39 AM
Go 言語は、型定義とメソッドの関連付けを通じてオブジェクト指向プログラミングをサポートします。従来の継承はサポートされていませんが、合成を通じて実装されます。インターフェイスは型間の一貫性を提供し、抽象メソッドを定義できるようにします。実際の事例では、顧客操作の作成、取得、更新、削除など、OOP を使用して顧客情報を管理する方法を示します。
Go言語のオブジェクト指向機能の分析
Apr 04, 2024 am 11:18 AM
Go 言語は、オブジェクト指向プログラミング、構造体によるオブジェクトの定義、ポインター レシーバーを使用したメソッドの定義、インターフェイスによるポリモーフィズムの実装をサポートしています。オブジェクト指向の機能は、Go 言語でのコードの再利用、保守性、カプセル化を提供しますが、クラスや継承、メソッド シグネチャ キャストといった従来の概念が欠如しているなどの制限もあります。
PHP の高度な機能: オブジェクト指向プログラミングのベスト プラクティス
Jun 05, 2024 pm 09:39 PM
PHP における OOP のベスト プラクティスには、命名規則、インターフェイスと抽象クラス、継承とポリモーフィズム、依存関係の注入が含まれます。実際のケースには、ウェアハウス モードを使用してデータを管理する場合や、ストラテジー モードを使用して並べ替えを実装する場合などがあります。
Golang にはクラスのようなオブジェクト指向機能はありますか?
Mar 19, 2024 pm 02:51 PM
Golang (Go 言語) には伝統的な意味でのクラスの概念はありませんが、構造体と呼ばれるデータ型が提供され、これによってクラスと同様のオブジェクト指向機能を実現できます。この記事では、構造体を使用してオブジェクト指向機能を実装する方法を説明し、具体的なコード例を示します。構造体の定義と使用法 まず、構造体の定義と使用法を見てみましょう。 Golang では、type キーワードを通じて構造を定義し、必要に応じて使用できます。構造には属性を含めることができます
JavaScript で HTTP ステータス コードを簡単に取得する方法
Jan 05, 2024 pm 01:37 PM
JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが
Yitian Camera でジグソーパズルを行う方法? ジグソーパズルをセットアップする方法?
Mar 25, 2024 pm 12:50 PM
最新バージョンの Yitian Camera 2023 をダウンロードしてインストールします。誰にとっても必須のカメラ ツールです。カメラ機能は非常に高度です。いつでもどこでも写真を撮るのに非常に便利です。さまざまなスタイルのテーマの背景、絶妙なステッカーなど. は無料でダウンロードできます。使用してください、写真を撮る方法は非常に簡単です。ワンクリックの美化により、肌がより繊細になります。オンラインで毎日試すことができる、人気のある人気の写真スタイルがたくさんあります。人生で最も美しい瞬間を記録し続けるため、編集者はオンラインで Yitian カメラ パートナー向けにパズルをセットアップする方法の詳細を提供します。 1. 最初にソフトウェアインターフェイスに入り、[テンプレート]をクリックして入ります 2. インターフェイスに入り、[パズル]をクリックして入ります 3. 最後にインターフェイスに入り、[パズル]をクリックします
PHP オブジェクト指向プログラミングの深い理解: オブジェクト指向プログラミングのデバッグ手法
Jun 05, 2024 pm 08:50 PM
オブジェクトのステータスの追跡、ブレークポイントの設定、例外の追跡を習得し、xdebug 拡張機能を利用することで、PHP オブジェクト指向プログラミング コードを効果的にデバッグできます。 1. オブジェクトのステータスを追跡する: var_dump() と print_r() を使用して、オブジェクトの属性とメソッドの値を表示します。 2. ブレークポイントの設定: 開発環境にブレークポイントを設定すると、実行がブレークポイントに到達するとデバッガが一時停止するため、オブジェクトのステータスを簡単に確認できます。 3. 例外のトレース: try-catch ブロックと getTraceAsString() を使用して、例外発生時のスタック トレースとメッセージを取得します。 4. デバッガーを使用します。xdebug_var_dump() 関数は、コードの実行中に変数の内容を検査できます。
