jQueryキャラ絵パズルゲームコード
jsコード
<スクリプトタイプ="text/javascript">
$(関数(){
var tt=null;
//ゲームの完了時間とステップ数
var 時間 = 0;
var time=0;
// 前の画像配列を中断し、燃料補給の準備をします
var src= 配列();
src.push("images/201.png");
src.push("images/202.png");
src.push("images/203.png");
src.push("images/204.png");
src.push("images/205.png");
src.push("images/206.png");
src.push("images/207.png");
src.push("images/208.png");
src.push("images/209.png");
//ボタンイベントが発生します。 。 。ゲームを開始
してください。
$('#button').click(function(){
クリアインターバル(tt)
// 時間が0に戻ります
時間=0;
回=0;
// 時間を設定しに来てください。
tt=setInterval(shij,1000)
関数 shij(){
時間++;
$(".time>p>span").text(時間)
} }
// ランダムな順序で並べます
var srcUsing= new Array();
for(var p=0; p
}
var newArry= new Array();
for(var i=0;i<$("#box img").length;i++){
newArry.push(srcUsing.splice(Math.floor(Math.random()*srcUsing.length), 1));
for(var j=0;j
//空の画像を設定します。
var Arrps=document.getElementById("box").getElementsByTagName("img");
for(var i=0;i
If (this.getAttribute("src")=="images/201.png");
changeP(this,Arrps);
};
} }
})
// 場所を決定
関数changeP(ob,Arrps){
var Ni=0;
var Nj=0;
for(var i=0;i
// アラート(ob)
Ni=i;
}
If(Arrps[i].getAttribute("src")=="images/201.png")
{
Nj=i;
}
}
// 絶対値
if(Math.abs(Ni-Nj)==3)
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
回++;
ifright();
}else if((Ni-Nj)==1&&(Ni%3)!=0){
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
回++;
ifright();
}else if((Ni-Nj)==-1&&(Ni%3)!=2){
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
回++;
ifright();
$(".bu>p>span").text(回)
}
関数 ifright(){
var ps=document.getElementById("box");
var Arrps=ps.getElementsByTagName("img");
for(var i=0;i
}
alert("おめでとうございます。成功しました..."+"\n"+"used "+times+"step")
}
})
</スクリプト>
このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロード サイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn
関連記事
jQueryをベースにした絵引き戸アニメーション効果の実装例
29 Dec 2017
「スライディング ドア」ダイナミック エフェクトは「アコーディオン」エフェクトとも呼ばれます。ほとんどのエフェクトを実現するための考え方は基本的に同じです。1 つはオフセット位置を変更することによって画像を移動する方法です。もう 1 つは、背景イメージをトラバースし、イメージの幅を変更することによって変換を実現します。この記事では、アコーディオン効果とも呼ばれる「引き戸」アニメーション効果を実現するための 2 つの方法を主に説明します。この記事を通じて、具体的な実装方法を学びましょう。
16 May 2016
この記事では、jquery アニメーション効果の詳細な分析を提供する jquery アニメーション効果の学習ノートを共有し、フェードインおよびフェードアウト効果とスライディング効果の原理を説明します。jquery アニメーション効果をよく学びたい場合は、次のリンクを参照してください。この記事を辛抱強く読んでいただければ、予想外のことが見つかると思います。
HTML5の超リアルな雪景色エフェクト
18 Jan 2017
jqueryをベースにした超リアルな雪景色の特殊効果です。この特殊効果は、jquery コードを使用して html5 キャンバス要素を動的にプラグインし、キャンバス内に雪の特殊効果を作成します。
jQueryはAlipayホームページのフォーカス画像効果を模倣します
25 Apr 2018
今回は、jQueryのAlipayホームページのフォーカス画像効果をお届けします。jQueryのAlipayホームページのフォーカス画像効果の注意点は次のとおりです。見てみましょう。
jQueryは背景色のグラデーションアニメーション効果を操作します
19 Apr 2018
今回は jQuery 操作の背景色グラデーション アニメーション効果についてお届けします。 jQuery 操作の背景色グラデーション アニメーション効果の注意点は次のとおりです。
16 May 2016
Jquery ui css フレームワークは、jquery ui のスタイル フレームワークです。jquery テーマ ローラーを使用して、必要な CSS スタイル効果を生成できます。 jquery ui のいくつかのフレームワークを使用して、jquery ui css フレームワーク効果に基づいたプラグインを開発できます。
16 May 2016
animate() は、アニメーション効果を作成するために使用できる jquery のメソッドです。jquery の animate() メソッドは、そのページに優れた視覚効果を追加します。
16 May 2016
この記事では、jQuery の比較的単純なソフト キーボード特殊効果の実装方法を主に紹介します。jQuery のソフト キーボード特殊効果の具体的な方法と機能的効果を、必要な方は参考にしてください。
Hot tools Tags
Hot Tools
jQuery2019 バレンタインデー 告白 花火 アニメーション 特殊効果
Douyin で非常に人気のある jQuery バレンタインデーの告白花火アニメーション特殊効果で、プログラマーや技術オタクが愛する女の子に愛を表現するのに適しています。喜んでいるかどうかに関係なく、最終的には同意する必要があります。
Lauiui レスポンシブ アニメーション ログイン インターフェイス テンプレート
Lauiui レスポンシブ アニメーション ログイン インターフェイス テンプレート
520 バレンタインデーの告白 Web アニメーション特殊効果
jQuery バレンタインデーの告白アニメーション、520 告白背景アニメーション
クールシステムのログインページ
クールシステムのログインページ
HTML5テープミュージックプレーヤー - CASSETTE PLAYER
HTML5テープミュージックプレーヤー - CASSETTE PLAYER