1 [@Justinasのコードを使用した後]
<div>
<span class="r1 c1 d1" data-weight="3"></span>
<span class="r1 c2" data-weight="2"></span>
<span class="r1 c3 d2" data-weight="3"></span>
</div>
<div>
<span class="r2 c1" data-weight="2"></span>
<span class="r2 c2 d1 d2" data-weight="4"></span>
<span class="r2 c3" data-weight="2"></span>
</div>
<div>
<span class="r3 c1 d2" data-weight="3"></span>
<span class="r3 c2" data-weight="2"></span>
<span class="r3 c3 d1" data-weight="3"></span>
</div>
だから、それらは私が得たスパンとdivです、私はTic Tac Toeゲーム（コンピューター対プレーヤー）を作っています、そしてそれは私がコンピューターを打ち負かすことができないように働くはずです。データの重み属性を配置して、正確なスパンがどれだけの価値があるかを示します。攻撃機能に問題があります-最初に最も価値のあるスパン（中央の行と列、次に対角線、そして写真に追加された他のすべての/詳細2）でプレーヤーを攻撃するようにする必要があります本当に方法がわかりませんこれらすべてのデータの重みを取得し、実際に降順で並べ替えて、利用可能なすべての中で最も価値のあるスパンを選択する関数を作成します...ありがとうございます。
データの重みではなく、出現順にすべてのスパンで攻撃する関数の前に作成しました。
function attack() {
var span = ['.r1 c1 d1', '.r2 c1', '.r3 c1 d2', '.r1 c2', '.r2 c2 d1 d2', '.r3 c2', '.r1 c3 d2', '.r2 c3', '.r3 c3 d1'];
var weight = $('[data-weight]');
var tempLoop = true;
$.each(weight, function (k, span){
var weight= $(weight).data('weight');
$(span).each(function () {
if (tempLoop) {
if (isNaN($(this).data("full"))) {
$(this).data("full", 1)
.data("value", -1)
.html("<i class=\"fa fa-times\"></i>");
console.log("attack");
tempLoop = false;
}
}
});
})
}
.sort()関数を使用して.data('weight')2つの要素を比較します。要素を重みで並べ替えるか、ループするか、重みが最も高い要素を最初に選択します。最初にそのセルを攻撃するために相対的な重みを適用します
$(document).ready(function() {
$('.table span')
.sort(function(a, b) {
return $(b).data('weight') - $(a).data('weight');
})
.each(function(k, i) {
var $this = $(this);
setTimeout(function () {
$this.text(k + '/' + $this.data('weight'));
}, k * 200);
});
});.table {
width: 300px;
height: 300px;
}
.table div {
height: 100px;
}
.table span {
box-sizing: border-box;
border: 1px solid white;
background: #555;
width: 33.333%;
height: 100%;
float: left;
display: inline-block;
color: white;
text-align: center;
line-height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
{attack-order / cell-weight}
<hr/>
<div class="table">
<div>
<span class="r1 c1 d1" data-weight="3"></span>
<span class="r1 c2" data-weight="2"></span>
<span class="r1 c3 d2" data-weight="3"></span>
</div>
<div>
<span class="r2 c1" data-weight="2"></span>
<span class="r2 c2 d1 d2" data-weight="4"></span>
<span class="r2 c3" data-weight="2"></span>
</div>
<div>
<span class="r3 c1 d2" data-weight="3"></span>
<span class="r3 c2" data-weight="2"></span>
<span class="r3 c3 d1" data-weight="3"></span>
</div>
</div>ゲームの例
$(document).ready(function() {
computerMove();
$('.table span:not(.full)').click(function() {
$(this).addClass('full player');
computerMove();
checkWinner();
});
});
function computerMove() {
$('.table span:not(.full)')
.sort(function(a, b) {
return $(b).data('weight') - $(a).data('weight');
})
.first()
.addClass('full computer');
}
function checkWinner() {
if ($('.table span:not(.full)').length == 0) {
// Do your logic of winning here:
var hasWon = Math.random() > 0.5;
if (hasWon) {
alert('You have won');
} else {
alert('You have lost');
}
} else {
return undefined;
}
}
function restartGame() {
$('.table span').removeClass('full');
computerMove();
}.table {
width: 300px;
height: 300px;
}
.table div {
height: 100px;
}
.table span {
box-sizing: border-box;
border: 1px solid white;
background: #555;
width: 33.333%;
height: 100%;
float: left;
display: inline-block;
color: white;
text-align: center;
line-height: 100px;
}
.table span.full {
background: white;
border-color: black;
}
.table span:not(.full):hover {
background-color: #666;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
{attack-order / cell-weight}
<hr/>
<div class="table">
<div>
<span class="r1 c1 d1" data-weight="3"></span>
<span class="r1 c2" data-weight="2"></span>
<span class="r1 c3 d2" data-weight="3"></span>
</div>
<div>
<span class="r2 c1" data-weight="2"></span>
<span class="r2 c2 d1 d2" data-weight="4"></span>
<span class="r2 c3" data-weight="2"></span>
</div>
<div>
<span class="r3 c1 d2" data-weight="3"></span>
<span class="r3 c2" data-weight="2"></span>
<span class="r3 c3 d1" data-weight="3"></span>
</div>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加