<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
background: #000000;
position: absolute;
left: 0px;
}
#box1 {
width: 100px;
height: 100px;
background: #FF0000;
position: absolute;
left: 500px;
top: 500px;
}
body {
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
function check_border_collision(el) {
var style = window.getComputedStyle(el);
var left = parseInt(style.left);
var top = parseInt(style.top);
var width = parseInt(style.width);
var height = parseInt(style.height);
if (left < 0) {
left = 0;
el.speedX *= -1;
}
if (left > window.innerWidth - width) {
left = window.innerWidth - width;
el.speedX *= -1;
}
if (top < 0) {
top = 0;
el.speedY *= -1;
}
if (top > window.innerHeight - height) {
top = window.innerHeight - height;
el.speedY *= -1;
}
el.style.left = left + "px";
el.style.top = top + "px";
}
function check_block_collision(block1, block2) {
var left1 = parseInt(window.getComputedStyle(block1).left);
var top1 = parseInt(window.getComputedStyle(block1).top);
var width1 = parseInt(window.getComputedStyle(block1).width);
var height1 = parseInt(window.getComputedStyle(block1).height);
//
var left2 = parseInt(window.getComputedStyle(block2).left);
var top2 = parseInt(window.getComputedStyle(block2).top);
var width2 = parseInt(window.getComputedStyle(block2).lwidth);
var height2 = parseInt(window.getComputedStyle(block2).height);
//
var center1 = {
x: left1 + width1 / 2,
y: top1 + height1 / 2
};
var center2 = {
x: left2 + width2 / 2,
y: top2 + height2 / 2
};
var diffx = Math.abs(center1.x - center2.x);
var diffy = Math.abs(center1.y - center2.y);
if (diffx < (width1 + width2) / 2 && diffy < (height1 + height2) / 2) {
return true;
}
return false;
}
window.onload = function() {
var speedX = 5;
var speedY = 3;
var oDiv = document.getElementById("box");
var oDiv1 = document.getElementById("box1");
oDiv.speedX = 5;
oDiv.speedY = 3;
oDiv1.speedX = 5;
oDiv1.speedY = 3;
function move(el) {
check_border_collision(el)
var tmpX, tmpY;
check_block_collision(oDiv, oDiv1);
if (check_block_collision(oDiv, oDiv1)) {
tmpX = oDiv.speedX;
tmpY = oDiv.speedY;
oDiv.speedX = oDiv1.speedX;;
oDiv.speedY = oDiv1.speedY;
oDiv1.speedX = tmpX;
oDiv1.speedY = tmpY;
}
var currentLeft = parseInt(window.getComputedStyle(el)["left"]);
var currentTop = parseInt(window.getComputedStyle(el).top);
var left = currentLeft + el.speedX;
var top = currentTop + el.speedY;
el.style.top = top + "px";
el.style.left = left + "px";
}
setInterval(function() {
move(oDiv)
move(oDiv1)
}, 20);
}
</script>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>
小弟想讓代碼中黑紅兩塊碰撞之后速度調換；功能并未實作，跪求各位
uj5u.com熱心網友回復：
已解決。低級錯誤轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/124086.html
標籤：JavaScript