二、Mycat安裝
阿新 • • 發佈:2021-07-15
初識運動
1.停不下來 給定時器新增timer 來判斷是否需要停止
2.到目的地,還能點選移動,把移動的程式碼放入else中
3.重複點選按鈕會加速運動 是因為點一次就會啟動一次定時器,多次就會啟動多次
保證只有一個定時器在啟動,啟動一次就關閉上一次啟動定時器
運動框架:
? 1 啟動就關閉定時器
? 2 if else
var odiv = document.getElementById(‘div1‘)
var speed = 5;
var timer = null;
oBtn.onclick = function () {
clearInterval(timer)
timer = setInterval(() => {
if (oDiv.offsetLeft >= 500) {
clearInterval(timer)
} else {
oDiv.style.left = oDiv.offsetLeft + speed + ‘px‘
}
}, 30);
緩衝運動
1,首先給物體定義一個速度,速度是物體與XY軸的距離除以8,在定時器以30mm,
2,如果物體到了,判斷物體的座標是否達到終點
3,如果是正向運動,速度大於0,因為計算機解析畫素點不能為小數,所以要向上取整,才能判斷物體是否達到終點,反之向下去整
function startMove(iTarget){
var oDiv1 =document.getElementById(‘div1‘)
clearInterval(timer)
timer = setInterval(()=>{
//速度和距離公式 因為speed會有小數,計算機只能識別1px,所以需要給speed向上取整
var speed = Math.ceil((iTarget -oDiv1.offsetLeft)/10)
if(oDiv1.offsetLeft == iTarget){
clearInterval(timer)
}else{
oDiv1.style.left =oDiv1.offsetLeft + speed +‘px‘
}
}, 30);
}
多物體運動
因為有多個物體,timer只能控制一個定時器,所以傳入兩個引數,分別控制自身的定時器,
// var timer= null ;
function startMove(node , iTarget){
clearInterval(node.timer)
node.timer= setInterval(()=>{
var speed = (iTarget - node.offsetWidth) /8
console.log(iTarget);
speed= speed>0 ? Math.ceil(speed) : Math.floor(speed)
if(node.offsetWidth == iTarget){
clearInterval(node.timer)
}else{
node.style.width = node.offsetWidth + speed +‘px‘;
}
},30)
}
碰撞
1.首先 兩個物體是否碰撞 我們要根據一個物體四個角是否碰到另一個物體的四個角, 所以我們判斷:永遠不碰到,要求是 2上碰不到1下,2下碰不到1上,2左碰不到1右,2右碰不到1左
//碰撞
function konck(node1, node2) {
//獲取第一個元素上下左右的XY座標
var l1 = node1.offsetLeft
// console.log(dl);
var r1 = node1.offsetLeft + node1.offsetWidth
var t1 = node1.offsetTop
var d1 = node1.offsetTop + node1.offsetHeight
//獲取第二個元素上下左右的XY座標
var l2 = node2.offsetLeft
var r2 = node2.offsetLeft + node1.offsetWidth
var t2 = node2.offsetTop
var d2 = node2.offsetTop + node1.offsetHeight
//判斷第二個元素是否會永遠不碰到,要求是 2上碰不到1下,2下碰不到1上,2左碰不到1右,2右碰不到1左
if (l2>r1 || r2 <l1 || t2>d1 || d2<t1 ) {
return false
} else {
return true
}
}
https://www.51220.cn 51220網站目錄;
拖拽
要想元素被滑鼠拖拽 ,
首先我們要獲取到這個物體的滑鼠在物體的座標位置 = (滑鼠的XY軸的座標 - 物體與XY軸的座標)
然後定義滑鼠事件,滑鼠移動的時候,物體是絕對定位,改變物體left和top 就是滑鼠的座標位置減去滑鼠在物體內部座標的位置
//拖拽
function trap(node) {
node.onmousedown = function (ev) {
//獲取滑鼠在物體內部的座標位置
var offsetX = ev.clientX -node.offsetLeft
var offsetY = ev.clientY - node.offsetTop
document.onmousemove = function (ev) {
//判斷碰撞
if (konck(div1, div2)) {
console.log(‘konck‘);
div1.style.backgroundColor = ‘black‘
} else {
div1.style.backgroundColor = ‘red‘
}
//滑鼠位置減去滑鼠在物體內部的位置
node.style.left = ev.clientX - offsetX + ‘px‘
node.style.top = ev.clientY - offsetY + ‘px‘
}
}
//移除滑鼠,取消onmousemove事件
document.onmouseup = function () {
document.onmousemove = null
}
}