【前端筆記】jquery實現的動畫小遊戲
阿新 • • 發佈：2019-01-26
實現下圖排序遊戲（按從小到大順序點選左右兩端三角排序，首尾只能單向移動）
元素到達它的位置時候，左右兩邊的三角消失，且邊距為0.
排序完成時
設計如下的DOM結構
<body> <div><p>6</p><span class="right"></span></div> <div><span class="left"></span><p>5</p><span class="right"></span></div> <div><span class="left"></span><p>4</p><span class="right"></span></div> <div><span class="left"></span><p>3</p><span class="right"></span></div> <div><span class="left"></span><p>2</p><span class="right"></span></div> <div><span class="left"></span><p>1</p></div> </body>
body{ padding: 50px; } div{ margin: 5px 0; float: left; } p{ float: left; margin: 0; padding: 0; width: 46px; height: 46px; border: 2px solid black; color: black; background-color: gold; float: left; text-align: center; font-size: 30px; } span{ width: 0px; height: 0px; display: block; float: left; } span.left{ border: 25px white solid; border-left-width: 7px; border-right-width: 7px; border-right-color: black; } span.right{ border: 25px white solid; border-left-width: 7px; border-left-width: 7px; border-left-color: black; }
我們用jquery實現這個遊戲，首先引入這個檔案‘node_modules/jquery/dist/jquery.js‘
然後通過交換相鄰的元素裡面的text()來實現互換
$('div').eq(rightIndex).children('p').text(leftNum); $('div').eq(leftIndex).children('p').text(rightNum); // console.log( $('div').eq(rightIndex).children('p').text()) if ( $('div').eq(rightIndex).children('p').text()-1==rightIndex) { $('div').eq(rightIndex).children('span').removeClass('right') $('div').eq(rightIndex).children('span').removeClass('left') } if ($('div').eq(leftIndex).children('p').text()-1==leftIndex) { $('div').eq(leftIndex).children('span').removeClass('right') $('div').eq(leftIndex).children('span').removeClass('left') }else{ if (leftIndex!=0) { $('div').eq(leftIndex).children('span').eq(0).addClass('left') $('div').eq(leftIndex).children('span').eq(1).addClass('right') }else{ $('div').eq(leftIndex).children('span').eq(0).addClass('right') } }
具體程式碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../../jquery/node_modules/jquery/dist/jquery.js"></script>
<style>
body{
padding: 50px;
}
div{
margin: 5px 0;
float: left;
}
p{
float: left;
margin: 0;
padding: 0;
width: 46px;
height: 46px;
border: 2px solid black;
color: black;
background-color: gold;
float: left;
text-align: center;
font-size: 30px;
}
span{
width: 0px;
height: 0px;
display: block;
float: left;
}
span.left{
border: 25px white solid;
border-left-width: 7px;
border-right-width: 7px;
border-right-color: black;
}
span.right{
border: 25px white solid;
border-left-width: 7px;
border-left-width: 7px;
border-left-color: black;
}
</style>
</head>
<body>
<div><p>6</p><span class="right"></span></div>
<div><span class="left"></span><p>5</p><span class="right"></span></div>
<div><span class="left"></span><p>4</p><span class="right"></span></div>
<div><span class="left"></span><p>3</p><span class="right"></span></div>
<div><span class="left"></span><p>2</p><span class="right"></span></div>
<div><span class="left"></span><p>1</p></div>
</body>
<script>
$(document).ready(function(){
$('.left').click(function(){
var rightIndex=$(this).parent().index();
var leftIndex=rightIndex-1
var rightNum=$('div').eq(rightIndex).children('p').text();
var leftNum=$('div').eq(leftIndex).children('p').text();
console.log(rightIndex+':'+leftIndex)
console.log(rightNum+":"+leftNum)
//數字交換位置
$('div').eq(rightIndex).children('p').text(leftNum);
$('div').eq(leftIndex).children('p').text(rightNum);
// console.log( $('div').eq(rightIndex).children('p').text())
if ( $('div').eq(rightIndex).children('p').text()-1==rightIndex) {
$('div').eq(rightIndex).children('span').removeClass('right')
$('div').eq(rightIndex).children('span').removeClass('left')
}
if ($('div').eq(leftIndex).children('p').text()-1==leftIndex) {
$('div').eq(leftIndex).children('span').removeClass('right')
$('div').eq(leftIndex).children('span').removeClass('left')
}else{
if (leftIndex!=0) {
$('div').eq(leftIndex).children('span').eq(0).addClass('left')
$('div').eq(leftIndex).children('span').eq(1).addClass('right')
}else{
$('div').eq(leftIndex).children('span').eq(0).addClass('right')
}
}
})
$('.right').click(function(){
var leftIndex=$(this).parent().index();
var rightIndex=leftIndex+1
var leftNum=$('div').eq(leftIndex).children('p').text();
var rightNum=$('div').eq(rightIndex).children('p').text();
console.log(leftIndex+':'+rightIndex)
console.log(leftNum+":"+rightNum)
//數字交換位置
$('div').eq(leftIndex).children('p').text(rightNum);
$('div').eq(rightIndex).children('p').text(leftNum);
// console.log( $('div').eq(rightIndex).children('p').text())
if ( $('div').eq(leftIndex).children('p').text()-1==leftIndex) {
$('div').eq(leftIndex).children('span').removeClass('right')
$('div').eq(leftIndex).children('span').removeClass('left')
}
if ($('div').eq(rightIndex).children('p').text()-1==rightIndex) {
$('div').eq(rightIndex).children('span').removeClass('right')
$('div').eq(rightIndex).children('span').removeClass('left')
}else{
if (rightIndex!=5) {
$('div').eq(rightIndex).children('span').eq(0).addClass('left')
$('div').eq(rightIndex).children('span').eq(1).addClass('right')
}else{
$('div').eq(rightIndex).children('span').eq(0).addClass('left')
}
}
})
})
</script>
</html>