JavaScript で 9 グリッドのモバイル パズル ゲームを実装
|
この記事では、Jiugonggeモバイルパズルゲームを実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 効果画像:
コードと詳細なロジック:
<!doctypehtml>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<title>9マスパズル</title>
<スタイル>
*{
パディング: 0;
マージン: 0;
境界線: 0;
}
/* * はワイルドカードで、すべての要素からデフォルトのスタイルを削除します。一部のブラウザではデフォルトでスタイルが追加され、レイアウトに問題が発生する可能性があるためです。*/
体{
幅: 100%;
高さ: 100%;
}
/* ブラウザの画面サイズに自動的に適応するように、本文の高さと幅を 100% に設定します */
＃容器{
位置: 相対的;
幅: 620ピクセル;
高さ: 450px;
マージン: 0 自動;
上マージン: 100px;
境界線の半径: 1px;
}
/* これはすべての要素を囲む DIV です。幅 620 ピクセル、高さ 450 ピクセルに設定します。このサイズは大きく設定できますが、小さく設定することはできません。少なくともすべての要素を内部に収めることができる必要があります。*/
＃ゲーム{
位置: 絶対;
幅: 450ピクセル;
高さ: 450px;
境界線の半径: 5px;
表示: インラインブロック;
背景色: #ffe171;
ボックスシャドウ: 0 0 10px #ffe171;
}
/* これはゲーム領域の DIV です。サイズは計算され、小さな四角形のサイズに応じて異なります。ここでは、小さな正方形のサイズを 150px 150px に設定しているので、サイズは 150px*3、つまり 450px になります */
#ゲーム div{
位置: 絶対;
幅: 149ピクセル;
高さ: 149px;
ボックスの影: 1px 1px 2px #777;
背景色: #20a6fa;
色: 白;
テキスト配置: 中央;
フォントサイズ: 150px;
行の高さ: 150px;
カーソル: ポインタ;
-webkit-transition: 0.3s;/*ブラウザプレフィックス、他のブラウザ chrome と互換性あり*/
-moz-transition: 0.3秒;/*firefox*/
-ms-transition: 0.3s;/*つまり*/
-o-トランジション: 0.3s;/*オペラ*/
遷移: 0.3秒;
}
/* これは小さな四角形のサイズです。位置を変更しても他の要素の位置に影響が及ばないように絶対的に配置されます。幅と高さはどちらも149pxです。 box-shadow: 1px 1px 2px #777; も設定していることに注意してください。
境界線の影もあるので、149px に境界線の 1px を加えて、合計幅は 150px になります。下のトランジション: 0.3s はトランジション時間を設定します。これは CSS3 プロパティで、プロパティを変更してトランジション アニメーションを表示します。そのため、四角形の位置を変更するとアニメーションが表示されます。アニメーション関数を自分で記述する必要はありません。これは面倒な作業です */
#ゲーム div:hover{
色: #ffe171;
}
/*四角形のマウスホバーアニメーションを設定します。マウスが要素の上に移動すると、ここでの属性が上記の属性に置き換わります。マウスを離すと、元の状態に戻ります。ここではフォントの色を変更します*/
＃コントロール{
幅: 150ピクセル;
高さ: 450px;
表示: インラインブロック;
フロート: 右;
}
/*コントロール領域、display:inline-block は要素にブロック要素の特性を持たせ、サイズを変更できるようにします。また、インライン要素の特性も持つため、行のスペースを占有しません。float:right は要素を右にフロートさせます*/
#制御行スパン{
高さ: 25px;
フォントサイズ: 20px;
色: #222;
上マージン: 10px;
}
/*コントロールエリアのボタンの共通スタイルを設定します*/
＃始める{
表示: インラインブロック;
フォントサイズ: 28px;
幅: 100ピクセル;
高さ: 28px;
背景色: #20a6fa;
色: #ffe171;
テキストシャドウ: 1px 1px 2px #ffe171;
境界線の半径: 5px;
ボックスの影: 2px 2px 5px #4c98f5;
テキスト配置: 中央;
カーソル: ポインタ;
}
/*スタートボタンのプロパティを設定します。カーソル: ポインター属性は、マウスが要素上を移動したときにマウスの形状を変えます。ポインターは手の形です*/
#リセット{
表示: インラインブロック;
フォントサイズ: 28px;
幅: 100ピクセル;
高さ: 28px;
背景色: #20a6fa;
色: #ffe171;
テキストシャドウ: 1px 1px 2px #ffe171;/*フォントシャドウ*/
border-radius: 5px;/*角丸属性*/
box-shadow: 2px 2px 5px #4c98f5;/*ボックスシャドウ*/
text-align: center;/*テキストを中央揃え*/
カーソル: ポインタ;
}
/*リセットボタンのプロパティを設定する*/
#d1{
左: 0px;
}
#d2{
左: 150px;
}
#d3{
左: 300ピクセル;
}
#d4{
上: 150px;
}
#d5{
上: 150px;
左: 150px;
}
#d6{
上: 150px;
左: 300ピクセル;
}
#d7{
上: 300px;
}
#d8{
左: 150px;
上: 300px;
}
/*これは、各小マスの位置をあらかじめ順番に並べておくためです*/
</スタイル>
</head>
<本文>
<div id="コンテナ">
<!-- 最も外側の DIV は内部の構造を格納するために使用されます -->
<div id="ゲーム">
<!--ゲーム領域、大きな DIV ブロック-->
<div id="d1" onclick="move(1)">1</div>
<!-- 小さな DIV、つまり 8 つの小さな四角形。クリックすると、move() 関数が実行され、パラメータは表示された数字なので、どのマスがクリックされたかがわかります -->
<div id="d2" onclick="move(2)">2</div>
<div id="d3" onclick="move(3)">3</div>
<div id="d4" onclick="move(4)">4</div>
<div id="d5" onclick="move(5)">5</div>
<div id="d6" onclick="move(6)">6</div>
<div id="d7" onclick="move(7)">7</div>
<div id="d8" onclick="move(8)">8</div>
</div>
<div id="コントロール">
<!--ゲームコントロールエリア-->
<p>
<rowspan id="timeText">合計時間</rowspan>
<rowspan id="タイマー"></rowspan>
</p>
<!--ゲーム時間領域を表示-->
<p>
<rowspan id="start" onclick="start()">開始</rowspan>
<rowspan id="reset" onclick="reset()">再起動</rowspan>
</p>
<!--コントロール ボタン領域を表示-->
</div>
</div>
<スクリプト>
var time=0; //タイミング時間を保存します var pause=true; //一時停止フラグを設定します。trueは一時停止を意味します var set_timer; //タイミング関数を設定します var d=new Array(10); //現在大きなDIVにインストールされている小さなDIVの数を保存します var d_direct=new Array(
[0], //ロジックをシンプルにするため、最初の要素は使用しません。インデックス 1 から開始します [2,4], //大きな DIV 番号 1 の DIV が配置できる位置。たとえば、最初のブロックは位置 2,4 に移動できます [1,3,5],
[2,6]、
[1,5,7],
[2,4,6,8],
[3,5,9],
[4,8]、
[5,7,9],
[6,8]
); // 大きなDIV番号の移動可能な位置番号を保存します var d_posXY=new Array(
[0], // 同様に、最初の要素 [0,0] は使用しません。 // 最初の要素は左を表し、2 番目の要素は上を表します。たとえば、最初のブロックの位置は let: 0px、top: 0px です。
[150,0],
[300,0],
[0,150],
[150,150],
[300,150],
[0,300],
[150,300],
[300,300]
); // 大きな DIV 番号の位置 d[1]=1;d[2]=2;d[3]=3;d[4]=4;d[5]=5;d[6]=6;d[7]=7;d[8]=8;d[9]=0; // デフォルトの順序はソートされています。9 番目のブロックには大きな DIV がないので、0 です。0 は空白ブロックを表すために使用します。 function move(id){
// 移動関数についてはすでに説明しました var i=1;
(i=1; i<10; ++i)の場合{
if(d[i] == id)
壊す;
}
// この for ループは、大きな DIV 内の小さな DIV の位置を見つけるためのものです。var target_d=0;
// 小さな DIV が配置できる場所の番号を保存します。0 は移動できないことを意味します。target_d=whereCanTo(i);
// 小さな DIV がどこに移動できるかを調べるために使用されます。0 を返す場合は、移動できないことを意味します。移動できる場合は、移動できる位置番号を返します if( target_d != 0){
d[i] = 0;
// 現在の小さな DIV が移動されたため、現在の大きな DIV には小さな DIV がないため、現在の大きな DIV 番号を 0 に設定します。d[target_d]=id;
// クリックされた小さな DIV の番号をターゲットの大きな DIV に設定します。 document.getElementById("d"+id).style.left=d_posXY[target_d][0]+"px";
document.getElementById("d"+id).style.top=d_posXY[target_d][1]+"px";
//最後にクリックした小さな DIV の位置を設定し、対象の大きな DIV の位置に移動します}
//target_d が 0 でない場合は移動可能であることを意味し、target_d は小さな DIV が移動する大きな DIV の位置番号です。var Finish_flag=true;
//ゲーム完了フラグを設定します。true は完了を意味します for(var k=1; k<9; ++k){
d[k] != kの場合{
終了フラグ=false;
壊す;
// 大きな DIV に保存された数字が自身の数字と異なる場合は、すべてが順番に並んでいないことを意味するため、これを false に設定してループから抜け出し、後で再度判断する必要はありません。1 つでも一致しない限り、ゲームは完了しません。}
}
// 1 から始めて、各大きな DIV に保存されている数値を走査し、完了したかどうかを判断します。if (finish_flag==true) {
if(!一時停止)
始める（）;
alert("おめでとうございます");
}
// true の場合、ゲームが終了したことを意味します。現在一時停止されていない場合は、一時停止メソッドが呼び出され、ゲームを終了するためのプロンプト ボックスがポップアップ表示されます。
//start() は開始と一時停止を同時に行う関数です。一時停止中の場合は呼び出し後に開始します。開始済みの場合は呼び出し後に一時停止します。}
関数 whereCanTo(cur_div){
// 移動可能かどうかを判断する関数。パラメータは、小さい DIV の番号ではなく、大きい DIV の番号です。小さい DIV の番号は、移動できる場所とは関係がないためです。小さい DIV は移動できます。var j=0;
var move_flag = false;
j=0; j<d_direct[cur_div].length; ++j){
//すべての可能な場所をループします if( d[ d_direct[cur_div][j] ] == 0 ){
移動フラグ=true;
壊す;
}
// ターゲット値が 0 の場合、ターゲット位置に小さな DIV が存在しないことを意味します。その場合は移動でき、ループは終了します}
移動フラグが true の場合
d_direct[cur_div][j]を返します。
}それ以外{
0を返します。
}
// 移動できる場合は、ターゲット位置の番号を返し、そうでない場合は、移動できないことを示す 0 を返します}
// タイミング関数、1秒ごとに実行される function timer(){
time+=1;//1秒プラス1、単位は秒です。var min=parseInt(time/60);//秒を分に変換します。1分は60秒なので、商は分です。var sec=time%60;//余りは秒です。document.getElementById("timer").innerHTML=min+"分"+sec+"秒";//次に時間を更新して表示します。}
//一時停止機能を開始する function start(){
if(一時停止){
document.getElementById("start").innerHTML="Pause"; //ボタンのテキストを一時停止に設定します pause=false; //一時停止はfalseに設定することを意味します
set_timer=setInterval(timer,1000);// 計時を開始// 現在一時停止中の場合は開始}else{
ドキュメントの要素を取得します。
一時停止=true;
間隔をクリアします(set_timer);
}
}
//リセット関数 function reset(){
time=0; // 時間を0に設定する
random_d(); //ブロックをランダムにシャッフルします if(pause) //一時停止の場合は、タイミングを開始します start();
}
//ブロックをランダムにシャッフルします。9 番目のブロックから始めて、ランダムに数字を生成し、2 つのブロックを入れ替えるというアイデアです。function random_d(){
for(var i=9; i>1; --i){
var to=parseInt(Math.random()*(i-1)+1); // 1 から i までの範囲の乱数を生成します。この ID の DIV がないため、範囲を超えることはできません。
d[i]!=0の場合{
document.getElementById("d"+d[i]).style.left=d_posXY[to][0]+"px";
document.getElementById("d"+d[i]).style.top=d_posXY[to][1]+"px";
}
//現在のDIV位置をランダムに生成されたDIV位置に設定するif(d[to]!=0){
document.getElementById("d"+d[to]).style.left=d_posXY[i][0]+"px";
document.getElementById("d"+d[to]).style.top=d_posXY[i][1]+"px";
}
//ランダムに生成された DIV の位置を現在の DIV の位置に設定します var tem = d[to];
d[to]=d[i];
d[i] = 要素;
//次に、2 つの DIV に保存された数値を交換します}
}
// 初期化関数。ページが読み込まれたときにリセット関数を呼び出して最初からやり直します。window.onload=function(){
リセット();
}
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
推薦する
Centos 6.9 に MySQL をインストールするための詳細なチュートリアル
1. MySQLがインストールされているかどうかを確認します。次のコードで確認できます。 [root...
Vue3でアイコンを使用する2つの例
目次1. SVGを使用する2. fontAwesomeを使用する3 ソース4 結論テクノロジースタッ...
Nginxのアクセスボリューム制御の詳細な説明
目的リクエスト アクセス ボリュームを制御するための Nginx ngx_http_limit_co...
CentOS プラットフォーム上で LAMP 環境を素早く構築する方法
この記事では、例を使用して、CentOS プラットフォーム上で LAMP 環境を迅速に構築する方法に...
CentOS7 での mysql 5.7.23 のバイナリ インストール
インターネット上のインストール情報は不均一で、落とし穴だらけです。インストールにはかなりの労力がかか...
Nginx 正規表現の詳細な説明
Nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバーであり、IM...
MYSQL での Truncate の使用法の詳細な説明
この記事のガイド: テーブル内のデータを削除するには、削除と切り捨ての 2 つの方法があります。TR...
MAC での MYSQL5.7.17 接続失敗の問題と解決策
MYSQL5.7.17 が MAC で接続できない問題。SQLBench_community 6.3...
製品を選択した後、右下隅に√記号を表示するための純粋なCSS
おすすめの記事: CSS 疑似クラスの右下隅をクリックすると、選択を示すチェックマークが表示されます...
Docker-compose チュートリアルのインストールとクイックスタート
目次1. Compose の紹介2. ComposeとDockerの互換性3. Dockerをインス...
MySQL学習データベース検索文DQL小百章
目次1. データの簡単な取得2. データの並べ替えと取得2.1. 基本構文2.2. ソート方向を指定...
Alibaba Cloud によって追加されたセキュリティ グループ ポートと、追加後にアクセスできない問題のトラブルシューティング
目的： 1. Alibaba Cloud Serverを介してサーバーの外部ネットワークをマッピング...
ウェブページサイズに関する調査
<br />統計によると、Web ページの平均サイズは 2003 年以降 3 倍に増加し...
HTML フォームタグチュートリアル (2):
このチュートリアルでは、ウェブデザインにおけるFORMフォームタグのさまざまな属性の応用を紹介します...
Linux環境にDocker環境をインストールする（落とし穴なし）
目次インストールの前提条件ステップ1: システムの残りを確認してクリアし、Dockerの依存関係をイ...