【前端笔记】jquery实现的动画小游戏

最新推荐文章于 2024-06-07 15:45:53 发布

QiBarbara

最新推荐文章于 2024-06-07 15:45:53 发布

阅读量774

点赞数

分类专栏：前端文章标签：前端排序游戏 jquery js

本文链接：https://blog.csdn.net/weixin_41606276/article/details/81544315

版权

前端专栏收录该内容

63 篇文章 0 订阅

订阅专栏

实现下图排序游戏（按从小到大顺序点击左右两端三角排序，首尾只能单向移动）

元素到达它的位置时候，左右两边的三角消失，且边距为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>

QiBarbara

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端笔记】jquery实现的动画小游戏

实现下图排序游戏（按从小到大顺序点击左右两端三角排序，首尾只能单向移动）元素到达它的位置时候，左右两边的三角消失，且边距为0.排序完成时设计如下的DOM结构&lt;body&gt; &lt;div&gt;&lt;p&gt;6&lt;/p&gt;&lt;span class="right"&gt;&lt;/span&gt;&lt;/div&g
复制链接

扫一扫

专栏目录