JavaScriptを使用して、div要素を作成し、一連のクラスを含む配列から特定のクラスを割り当て、ランダムメソッドを使用してランダムな順序でHTML要素にクラスを割り当てます。次に、ボタンクリックイベントなどのイベントに基づいて、HTML要素が持つクラスのセットから特定のクラスを削除し、特定のクラスを追加します。
問題は、削除する必要のある正確なクラス名がわからないことですが、クラスがそのようなもので始まるように、私はそれについてほとんど知りません。そのため、特定のHTML要素を選択し、クリックイベントのボタンなどのイベントでそのHTML要素から特定のクラスを削除できるjQueryまたはJavaScriptコードが必要になります。
この問題を解決するためにJavaScriptでonclickボタン処理関数にいくつかのコードを書きました。
var position=["tile-position-1-1", "tile-position-2-1", "tile-position-3-1", "tile-position-4-1",
"tile-position-1-2", "tile-position-2-2", "tile-position-3-2", "tile-position-4-2",
"tile-position-1-3", "tile-position-2-3", "tile-position-3-3", "tile-position-4-3",
"tile-position-1-4", "tile-position-2-4", "tile-position-3-4", "tile-position-4-4"];
$("#start").on("click", function(){
var ele='<div class="tile tile-2 '+position[Math.floor(Math.random()*16)]+' tile-new">'+
'<div class="tile-inner">2</div></div>'+
'<div class="tile tile-2 '+position[Math.floor(Math.random()*16)]+' tile-new">'+
'<div class="tile-inner">2</div></div>';
$('.tile-container').append(ele);
});
$("#left").on("click", function(){
var arr=[];
arr=$(".tile-container").find('*').filter(function(){
return $(this).attr("class").match(/tile-position\-*/);
});
for(i=0;i<4;i++)
for(j=0;j<4;j++){
arr.removeClass(`tile-position-${i+1}-${j+1}`)
}
arr.addClass('tile-position-1-4');
$('.tile-container')
var ele1='<div class="tile tile-2 '+position[Math.floor(Math.random()*16)]+' tile-new"><div class="tile-inner">2</div>';
$(".tile-container").append(ele1);
});
html, body {
margin: 0;
padding: 0; }
.btn-container{
margin-top: 30px;
position: fixed;
left: 50%;
transform: translateX(-50%);
}
button{
color: #0099CC;
background: #0099CC;
border: 2px solid black;
border-radius: 6px;
color: black;
padding: 10px 20px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.container{
width: 500px ;
margin: 0 auto;
}
.game-container {
margin-top: 40px;
position: relative;
padding: 15px;
background: #345;
border-radius: 2px;
width: 500px;
height: 500px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.grid-container {
position: absolute;
z-index: 1; }
.grid-row {
margin-bottom: 15px;
}
.grid-row:after {
content: "";
display: block;
clear: both;
}
.grid-cell {
width: 106.25px;
height: 106.25px;
margin-right: 15px;
float: left;
background: #0099CC;
}
.tile-container {
position: absolute;
z-index: 2; }
.tile, .tile .tile-inner {
width: 107px;
height: 107px;
line-height: 107px; }
.tile.tile-position-1-1 {
transform: translate(0px, 0px); }
.tile.tile-position-1-2 {
transform: translate(0px, 121px); }
.tile.tile-position-1-3 {
transform: translate(0px, 242px); }
.tile.tile-position-1-4 {
transform: translate(0px, 363px); }
.tile.tile-position-2-1 {
transform: translate(121px, 0px); }
.tile.tile-position-2-2 {
transform: translate(121px, 121px); }
.tile.tile-position-2-3 {
transform: translate(121px, 242px); }
.tile.tile-position-2-4 {
transform: translate(121px, 363px); }
.tile.tile-position-3-1 {
transform: translate(242px, 0px); }
.tile.tile-position-3-2 {
transform: translate(242px, 121px); }
.tile.tile-position-3-3 {
transform: translate(242px, 242px); }
.tile.tile-position-3-4 {
transform: translate(242px, 363px); }
.tile.tile-position-4-1 {
transform: translate(363px, 0px); }
.tile.tile-position-4-2 {
transform: translate(363px, 121px); }
.tile.tile-position-4-3 {
transform: translate(363px, 242px); }
.tile.tile-position-4-4 {
transform: translate(363px, 363px); }
.tile {
position: absolute;
-webkit-transition: 100ms ease-in-out;
-moz-transition: 100ms ease-in-out;
transition: 100ms ease-in-out;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform; }
.tile .tile-inner {
border-radius: 3px;
background: #eee4da;
text-align: center;
font-weight: bold;
z-index: 10;
font-size: 55px; }
<html>
<head>
<title>2048</title>
<link href="mil.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="game-container">
<div class="grid-container">
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
</div>
<div class="tile-container">
</div>
</div>
</div>
<div class="btn-container">
<button id="left" type="button" >LEFT</button>
<button id="right" type="button" >RIGHT</button>
<button id="up" type="button" >UP</button>
<button id="down" type="button" >DOWN</button>
<button id="start" type="button" >START</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="mil.js"></script>
</body>
</html>
回答 1 件
関連記事
- acf出力のリストから特定の要素を抽出します
- Javascriptは、条件を一致させることにより、アイテムの出現を削除します
- Javascriptで要素の高さを動的に設定する
- javascriptは配列をフラット化し、reduceを使用して重複を削除します
- javascriptの配列値の最後から\ rを削除します
- JQueryで2つの要素のテキストを比較する方法は?
- その要素によってウェブサイトから空白を削除する方法
- h1要素のテキストはjavascriptを使用して変更されていませんが、コンソールで変更されています
- 特定の属性を持つhtml要素をキャッチします
- Pythonのリストからすべてのn番目の要素を削除します
関連した質問
- Webの要素が突然消える
- ブートストラップリスト-グループ:アイテムを複製することは可能ですか?
- チェックボックスとそれに対応するリストタグを削除します
- ホバーまたはクリックして、それぞれの画像を表示します
- 私はajaxとjqueryを初めて使用するので、コードの何が問題なのかわかりません
- javascriptまたはjqueryを使用したJSONへのHTML非フォームデータ
- JavaScript/HTML/CSS/JQueryを介したフィルター可能なギャラリーが機能しない
- 非同期を使用してMathJaxでテキストをプレビューする
- 動的に作成されたID(親要素に基づくIDを使用)でクリックイベントをトリガーする
- 選択オプションから値を送信
以下の関数は、クラス名が指定されたフレーズで始まるすべての要素を検索し、クラスリストからそのクラスを削除します。