运行效果

代码

<!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. C盘突然报警，空间不足，显示成红色了

    1.清理系统垃圾文件 将如下命令保存到一个bat文件中,执行,删除垃圾文件 @echo off net share c$ /del net share d$ /del net share e$ /de ...

  2. PMM Client 安装异常报错

    1.PMM架构 如下图所示 2.Client主要组件 PMM Client是安装在你要监视的MySQL或MongoDB主机上的一组代理组件.组件收集关于一般系统和数据库性能的各种数据,并将该数据发送到 ...

  3. NT路径，DOS路径和Device路径互相转换

    项目中遇到的比较奇葩的问题,从网上找到一份源码,https://blog.csdn.net/qq125096885/article/details/70766206 稍微整理了下,VS可以直接编译 # ...

  4. LinuxMint（Ubuntu）安装文泉驿家族黑体字

    文泉驿黑体字家族在Ubuntu上很有用,可以解决系统字体发虚的问题. 通过下面的三条命令安装: sudo apt-get install ttf-wqy-microhei #文泉驿-微米黑 sudo ...

  5. Jsp的基本知识

    jsp页面的基本组成部分:指令,表达式,小脚本,声明,注释,静态内容. 指令元素有三种: 1.page:eg <%@ page 属性名="属性值" 属性名="属性值 ...

  6. 基于IPv6的数据包分析(第三组)

    一.实验拓扑 二.配置过程 本处提供R1.R2.R4的详细配置过程(包含静态路由的配置) 1)      R1: R1(config)#int e1/0 R1(config-if)#ipv6 addr ...

  7. css基本介绍

    目录 CSS初识 构造规则 注意 样式表的定义和使用 行内式(内联样式) 内部样式表 外部样式表(外链式) 选择器 标签选择器(元素选择器) 类选择器 id选择器 通配符选择器 伪类选择器 链接伪类选 ...

  8. MVC 全局过滤器

    1. 新创建一个类 CheckLogin2. 在类中加入以下代码 public class CheckLogin : ActionFilterAttribute { public override v ...

  9. Windows elasticsearch1.5.1安装

    http.cors.enabled: true http.cors.allow-origin: /.*/ network.host: 192.168.2.200 http.port: cluster. ...

  10. 汉诺塔I && II

    汉诺塔I 题目链接:https://www.nowcoder.com/questionTerminal/7d6cab7d435048c4b05251bf44e9f185 题目大意: 略 分析: 利用汉 ...