jsはドラッグと衝突検出を実現する。
本論文の例では、jsが引張と衝突検出を実現する具体的なコードを共有しています。参考にしてください。具体的な内容は以下の通りです。
ドラッグします
原理分析
divの箱をドラッグするには、まずマウスを箱の上に移動し、マウスの左ボタンを押して目標の位置に移動し、マウスを放します。この過程の分析に対して、
3つのマウスイベントが必要です。マウスを押しながら:onmousedown 移動マウス:onmousemove マウスを離す:onmouseup ステップを実行
1、マウスを押した時:**マウスの現在位置の位置距離ページの左境界と上境界の距離を取って、それぞれ箱の距離ページの左境界と上境界の値を減らします。
マウスの距離の箱の左と上の境界の値を得ました。
2、**マウスが移動する時:**この時、マウス距離ページの左境界と上境界の値を再び取得し、更にそれらからステップ1で得られたマウス距離箱の左境界と上境界の値を減算します。
得られた値を再び箱に割り当てます。このように箱はマウスと静止して、ページの上で移動できます。
3、**がマウスを離すと、**がマウス移動イベントをクリアします。
コードを実現
原理分析
jsの中で衝突して検査していくつかの小さいゲームを作ることに応用して、例えば飛行機の大戦、れんがを打って、蛇などを食いしん坊して、それではどのように衝突の検査を実現しますか?
二つの長方形のブロックの間の衝突について、コードを直接に書く方法を考えたら、それらの間に接触があるかどうかを検査します。これは比較的難しいことです。考え方を変えてもいいです。
それらが衝突していない状況を探し出して、これらの情況を排除して、残りの情況は必然的に衝突が発生したのです。
以下の図のように、ブロックaとbの間に衝突が発生したかどうかを検出し、aとbの上、下のtop値、左右のleft値をそれぞれ取得することができます。以下の4つの場合は衝突が発生していません。
衝突しない4つの場合:
1、a左>b右
2、a上>b下
3、a右
4、a下a左:a.offset Left
a右:a.offset Left+a.offset Width;
a上:a.offset Top
a下:a.offset Top+a.offset Height;
b左:b.offset Left
b右:b.offset Left+b.offset Width;
b上:b.offset Top
b下:b.offset Top+b.offset Height;
上の四つの状況のいずれかが発生したら、衝突しません。
コードを実現
ドラッグします
原理分析
divの箱をドラッグするには、まずマウスを箱の上に移動し、マウスの左ボタンを押して目標の位置に移動し、マウスを放します。この過程の分析に対して、
3つのマウスイベントが必要です。
1、マウスを押した時:**マウスの現在位置の位置距離ページの左境界と上境界の距離を取って、それぞれ箱の距離ページの左境界と上境界の値を減らします。
マウスの距離の箱の左と上の境界の値を得ました。
2、**マウスが移動する時:**この時、マウス距離ページの左境界と上境界の値を再び取得し、更にそれらからステップ1で得られたマウス距離箱の左境界と上境界の値を減算します。
得られた値を再び箱に割り当てます。このように箱はマウスと静止して、ページの上で移動できます。
3、**がマウスを離すと、**がマウス移動イベントをクリアします。
コードを実現
var oDiv = document.getElementById('box2');
oDiv.onmousedown = function(ev){
var e = ev||window.event;
var offsetX = e.clientX - oDiv.offsetLeft;
var offsetY = e.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var e = ev||window.event;
var l =e.clientX-offsetX;
var t = e.clientY- offsetY;
if(l<=0){
l=0;
}
if(t<=0){
t=0;
}
var windowWidth =document.documentElement.clientWidth||document.body.clientWidth;
if(l>=windowWidth-oDiv.offsetWidth){
l=windowWidth-oDiv.offsetWidth;
}
var windowHeight = document.documentElement.clientHeight||document.body.clientHeight
if(t>=windowHeight-oDiv.offsetHeight){
t=windowHeight-oDiv.offsetHeight;
}
oDiv.style.left = l + "px";
oDiv.style.top = t + "px";
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
衝突検出原理分析
jsの中で衝突して検査していくつかの小さいゲームを作ることに応用して、例えば飛行機の大戦、れんがを打って、蛇などを食いしん坊して、それではどのように衝突の検査を実現しますか?
二つの長方形のブロックの間の衝突について、コードを直接に書く方法を考えたら、それらの間に接触があるかどうかを検査します。これは比較的難しいことです。考え方を変えてもいいです。
それらが衝突していない状況を探し出して、これらの情況を排除して、残りの情況は必然的に衝突が発生したのです。
以下の図のように、ブロックaとbの間に衝突が発生したかどうかを検出し、aとbの上、下のtop値、左右のleft値をそれぞれ取得することができます。以下の4つの場合は衝突が発生していません。
衝突しない4つの場合:
1、a左>b右
2、a上>b下
3、a右
4、a下a左:a.offset Left
a右:a.offset Left+a.offset Width;
a上:a.offset Top
a下:a.offset Top+a.offset Height;
b左:b.offset Left
b右:b.offset Left+b.offset Width;
b上:b.offset Top
b下:b.offset Top+b.offset Height;
上の四つの状況のいずれかが発生したら、衝突しません。
コードを実現
function knock(node1,node2){
var l1 = node1.offsetLeft;
var r1 = node1.offsetLeft + node1.offsetWidth;
var t1 = node1.offsetTop;
var b1 = node1.offsetTop+node1.offsetHeight;
var l2 = node2.offsetLeft;
var r2 = node2.offsetLeft + node2.offsetWidth;
var t2 = node2.offsetTop;
var b2 = node2.offsetTop+node2.offsetHeight;
if(l2>r1||r2<l1||t2>b1||b2<t1){
return false;
}else{
return true;
}
}
ドラッグと衝突の完全なコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 100px;height: 100px;position: absolute;
top: 200px;left: 250px;background-color: blueviolet;
}
#box2{
width: 100px;height: 100px;position: absolute;
top: 400px;left: 550px;background-color: salmon;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<script>
var box11 = document.getElementById("box1")
var box21 = document.getElementById("box2")
if(knock(box21,box11)){
box1.style.backgroundColor="blue";
}else{
box1.style.backgroundColor="grey";
}
function knock(node1,node2){
var l1 = node1.offsetLeft;
var r1 = node1.offsetLeft + node1.offsetWidth;
var t1 = node1.offsetTop;
var b1 = node1.offsetTop+node1.offsetHeight;
var l2 = node2.offsetLeft;
var r2 = node2.offsetLeft + node2.offsetWidth;
var t2 = node2.offsetTop;
var b2 = node2.offsetTop+node2.offsetHeight;
if(l2>r1||r2<l1||t2>b1||b2<t1){
return false;
}else{
return true;
}
}
var oDiv = document.getElementById('box2');
oDiv.onmousedown = function(ev){
var e = ev||window.event;
var offsetX = e.clientX - oDiv.offsetLeft;
var offsetY = e.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var e = ev||window.event;
var l =e.clientX-offsetX;
var t = e.clientY- offsetY;
if(knock(box21,box11)){
box1.style.backgroundColor="blue";
}else{
box1.style.backgroundColor="grey";
}
if(l<=0){
l=0;
}
if(t<=0){
t=0;
}
var windowWidth =document.documentElement.clientWidth||document.body.clientWidth;
if(l>=windowWidth-oDiv.offsetWidth){
l=windowWidth-oDiv.offsetWidth;
}
var windowHeight = document.documentElement.clientHeight||document.body.clientHeight
if(t>=windowHeight-oDiv.offsetHeight){
t=windowHeight-oDiv.offsetHeight;
}
oDiv.style.left = l + "px";
oDiv.style.top = t + "px";
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
</script>
</body>
</html>
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。