<!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>
