运行效果

代码

<!DOCTYPE html>

<html>

<head>

    <title>蚂蚁爬杆实验</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

    <div style="margin: auto">

        <h1 align="center" style="margin-bottom: 50px">蚂蚁爬杆实验</h1>

        <div class="card">

            <h3>说明</h3>

            <ul>

                <li>蚂蚁从杆子左边爬到右边需要两分钟</li>

                <li>现在一共有20只蚂蚁</li>

                <li>每只蚂蚁出现位置随机</li>

                <li>每只蚂蚁初始移动方向随机</li>

                <li>两只蚂蚁相遇则折返</li>

                <li>问多长时间后杆子上没有蚂蚁</li>

            </ul>

        </div>

        <div class="card">

            <h3>参照杆</h3>

            <div class="box" id='box_reference'></div>

        </div>

        <div class="card">

            <h3>实验杆</h3>

            <div class="box" id='box'></div>

        </div>

        <div class="card">

            <h3>控制台</h3>

            <div>

                <div class="card-console">

                    <label>蚂蚁数量：<input type="text" id='ant_num' value="20"></label>

                    <label>移动步长(px)：<input type="text" id='speed' value="1"></label>

                    <label>移动时间间隔(ms)：<input type="text" id='time_interval' value="20"></label>

                </div>

                <div class="card-console">

                    <button class="btn-console" id='start'>暂停</button>

                    <button class="btn-console" id='restart'>重新开始</button>

                </div>

            </div>

        </div>

    </div>

<script type="text/javascript">

window.TIMER = 'no_timer'//-1代表没有定时器

window.SPEED = 3

window.COLORS = ['yellow', 'white', 'cyan', 'Red', '#FF00FF', '#00FF00', '#FFA500']

function compare(o1, o2){//特定的比较器，比较style中的left

    return o1.position().left - o2.position().left

}

$(document).ready(function(){

    let base_left = $('#box').position().left

    let div_len = parseInt($('#box').css('width'))

    let dom_str = '<span class="ant" id="ant_{id}" style="left:{left}px; background-color: {color};">{v}</span>'

    $('#start').click(function(){//启动暂停按钮何二为一了

        if($(this).text()=='继续'){//继续程序

            create_timer()

            $(this).text('暂停')

            return

        }

        delete_timer()

        $(this).text('继续')

    })

    $('#restart').click(function(){//启动定时器

        $('#start').text('暂停')

        init()

        delete_timer()

        create_timer()

    })

    function create_timer(){

        if(TIMER != 'no_timer')

            return

        TIMER = window.setInterval(ants_move, TIME_INTERVAL)//生成定时器

    }

    function delete_timer(){

        if(TIMER == 'no_timer')

            return

        window.clearInterval(TIMER)//清除定时器

        window.TIMER = 'no_timer'

    }

    function init(){

        let ant_num = parseInt($('#ant_num').val())

        let speed = parseInt($('#speed').val())

        window.SPEED = speed//因为碰撞检测有用到速度，为了方便就挂在window下了

        window.TIME_INTERVAL = parseInt($('#time_interval').val())

        create_ants(ant_num, speed)

    }

    init()

    create_timer()

    $(window).resize(function(){//窗口变化检测，因为水平居中，div相对像素点会变

        base_left = $('#box').position().left

    })

    function create_ant(id, left, v, color){//生成单只蚂蚁

        let temp_dom = dom_str.replace('{id}', id).replace('{left}', left).replace('{v}', v).replace('{color}', color)

        return temp_dom

    }

    function create_ants(n, speed){//生成蚂蚁

        let box_html = ''

        for(let i=0; i<n; i++){

            let temp_left = base_left + Math.random()*div_len//随机位置

            let v = speed

            if(Math.random()>0.5)//随机方向

                v = -v

            let color = COLORS[Math.floor(COLORS.length * Math.random())]

            box_html += create_ant(i, temp_left, v, color)

        }

        $('#box').html(box_html)//生成实验杆蚂蚁

        $('#box_reference').html(create_ant(999, base_left+0, speed, 'yellow'))//生成对照杆蚂蚁

    }

    function single_move(dom){//单个蚂蚁移动

        let v = parseInt(dom.text())

        let left = dom.position().left

        dom.css('left', left + v)

    }

    function ants_move(){//所有蚂蚁移动

        let ants = []

        $('#box>.ant').each(function(){//实验杆移动

            let dom = $(this)

            single_move(dom)

            destroy_dom(dom)

            ants.push(dom)

        })

        reference_ant = $('#box_reference>.ant:first')

        if(reference_ant.length > 0 ){//如果元素存在

            single_move(reference_ant)//对照杆蚂蚁移动

            destroy_dom(reference_ant)//爬出杆子清除

        }

        ants = ants.sort(compare)

        scan_array(ants)

    }

    function destroy_dom(dom){//删除不在杆上的蚂蚁

        let r = parseInt(dom.width())/2

        let left = dom.position().left

        if(left<base_left-r || left>base_left+div_len-r)

            dom.remove()

    }

    function scan_array(ants){//扫描数组

        for(let i=0; i<ants.length-1; i++){

            bump(ants[i], ants[i+1])

        }

    }

    function bump(ant1, ant2){//碰撞

        let left1 = parseInt(ant1.position().left)

        let left2 = parseInt(ant2.position().left)

        if(Math.abs(left1-left2) > SPEED)//如果两球相距大于速度，不会相撞

            return false

        let v1 = parseInt(ant1.text())

        let v2 = parseInt(ant2.text())

        if((v1 * v2) > 0)//如果移动方向一样，不会相撞

            return false

        if(((left1 - left2)/(v1 - v2)) > 0)//速度相向但位置相背

            return false

        ant1.text(-v1)

        ant2.text(-v2)

        // alert(1)

        return true

    }

})

</script>

<style type="text/css">

    body{

        display: flex;

        align-items: center;

    }

    .box{

        height: 20px;

        width: 1000px;

        background-color: black;

    }

    .ant{

        position: absolute;

        height: 20px;

        width: 20px;

        border-radius: 10px;

        font-size: 10px;

        text-align: center;

    }

    .card{

        background: #8be88038;

        padding: 10px;

        margin: 10px;

        border-radius: 10px;

        box-shadow: 0px 0px 2px #000;

    }

    .card-console{

        margin: 10px

    }

    .btn-console{

        width: 100px;

        height: 30px;

        border: 0px;

        background: black;

        border-radius: 5px;

        color: white;

        font-weight: bold;

        cursor: pointer;

    }

</style>

</body>

</html>

关键点

1. 生成随机圆球（蚂蚁）

2. js操作dom移动

3. js根据某一数据排序（因为相撞只可能发生在相邻两个球中，排序减少计算量）

4. 删除超出边界的dom节点
5. js引用传递

蚂蚁爬杆问题js实现的更多相关文章

  1. 蚂蚁爬杆问题 UVA 10881

    算法入门经典训练指南上的题. 这里有必要讲一下蚂蚁爬杆问题:每只蚂蚁都有一个初始方向,相撞会转向,关键就是相撞的处理,由于速度并不会改变,两只蚂蚁相撞,可以看做,两只蚂蚁穿过对方,继续沿原方向前进,经 ...

  2. LightOJ 1323 Billiard Balls（找规律（蚂蚁爬木棍））

    题目链接:https://vjudge.net/contest/28079#problem/M 题目大意: 一个边界长为L宽为W的平面同时发射n个台球,运动K秒,台球碰到桌面及两(多)个台球相撞情况如 ...

  3. 爬虫 selenium+Xpath 爬取动态js页面元素内容

    介绍 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作,比如 ...

  4. Python反爬：利用js逆向和woff文件爬取猫眼电影评分信息

    首先:看看运行结果效果如何! 1. 实现思路 小编基本实现思路如下: 利用js逆向模拟请求得到电影评分的页面(就是猫眼电影的评分信息并不是我们上述看到的那个页面上,应该它的实现是在一个页面上插入另外一 ...

  5. CATALOGUE 目录

    1 语言基础 1.1 c/c++ [转]C/C++ 存储类型 作用域 连接类型 [转]C/C++内存划分 [转]C/C++除法实现方式及负数取模详解 [转]为什么C++编译器不能支持对模板的分离式编译 ...

  6. 整理自百度知道提问的几道Java编程题

    蚂蚁爬杆 问题描述: 有一根27厘米的细木杆,在第3厘米.7厘米.11厘米.17厘米.23厘米这五个位置上各有一只蚂蚁.木杆很细,不能同时通过一只蚂蚁.开始时,蚂蚁的头朝左还是朝右是任意的,它们只会朝 ...

  7. 9月最新184道阿里、百度、腾讯、头条Java面试题合集

    阿里面试题 1. 如何实现一个高效的单向链表逆序输出? 2. 已知sqrt(2)约等于1.414,要求不用数学库,求sqrt(2)精确到小数点后10位 3. 给定一个二叉搜索树(BST),找到树中第 ...

  8. c++后台开发面试常见知识点总结（五）场景设计

    搜索引擎的实现,会用到哪些重要的数据结构 设计实现一个HTTP代理服务器 / web服务器 / FTP服务器/ 设计实现cache缓存web服务器的网页访问记录 把一个文件快速下发到100w个服务器 ...

  9. 爬虫05 /js加密/js逆向、常用抓包工具、移动端数据爬取

    爬虫05 /js加密/js逆向.常用抓包工具.移动端数据爬取 目录 爬虫05 /js加密/js逆向.常用抓包工具.移动端数据爬取 1. js加密.js逆向:案例1 2. js加密.js逆向:案例2 3 ...

随机推荐

  1. python使用rabbitMQ介绍一（生产-消费者模式）

    1 模式介绍 生产者-消费者模式是最简单的使用模式. 一个生产者P,给队列发送消息,一个消费者C来取队列的消息. 这里的队列长度不限,生产者和消费者都不用考虑队列的长度. 队列的模型图: 2 示例代码 ...

  2. thinkphp5.1验证器场景验证中传参的方法。

    一个场景:用户保存自己的昵称,如果已经有其他用户用了这个昵称则不允许保存,但是要排除当前用户自己,因为如果用户未作修改,新昵称和老昵称一样,是可以保存的. 因为昵称定义了唯一规则: 'name' =& ...

  3. IIS发布的网站，内网和外网不能访问的解决办法

    A.关闭防火墙.控制面板-Windows防火墙-打开或关闭Windows防火墙(不推荐) B.打开:控制面板-Windows防火墙-高级设置-入站规则,在入站规则窗口中找到”BranchCache内容 ...

  4. JavaScript match()方法和正则表达式match()

    先介绍参数为普通字符串的使用方式,此时match方法的返回值是存放首次匹配内容的数组.如果没有找到匹配结果,返回null.语法结构: 1 str.match(searchvalue)参数解析:(1). ...

  5. AOP 还在配置吗改用打标签模式吧！

    为什么我喜欢打标签来配置AOP 1. 配置多很混乱,代码里面很难分辨出来哪些是AOP容器(比如属性注入) 2. 对于代码生成器生成的代码里面还需要手动加到配置里面 3. 连java spring现在都 ...

  6. maven导入外部jar包的方法

    maven的导入外部jar包的方法(前提还有外部jar包) 1.问题: 在maven添加依赖包时,添加不成功,可以选择通过外部命令导入到仓库里. 2.命令:(在Dos命令行) mvn install: ...

  7. 初识Haskell

    在COMP30026 Models of Computation中接触了新的编程语言Haskell,一个之前听都没有听过的语言,在此记录关于Haskell的一些最基本概念. 1.Haskell是一个函 ...

  8. 软工+C(4): Alpha/Beta换人

    // 上一篇:超链接 // 下一篇:工具和结构化 注:在一次软件工程讨论课程进度设计的过程中,出现了这个关于 Alpha/Beta换人机制的讨论,这个机制在不同学校有不同的实施,本篇积累各方观点,持续 ...

  9. 数据库常用的事务隔离级别和原理？&&mysql-Innodb事务隔离级别-repeatable read详解

    转载地址:https://baijiahao.baidu.com/s?id=1611918898724887602&wfr=spider&for=pc https://blog.csd ...

  10. 虚拟机ubuntu设置静态IP与主机、外网互ping配置流程

    方案一.VMnet8(NAT模式) 1.选择自定义模式,VMnet8(NAT模式) 2.进入虚拟机,设置静态IP之前确认三者可互ping通,命令ifconfig,查看当前的IP 3.主机通过命令ipc ...