javascript冲突检测(CSS转换)

我正在构建一个简单的游戏。有3种冠状病毒随机移动，一个英雄试图避免击中它们。到目前为止，我有冠状病毒随机移动，但很难检测到碰撞。我使用CSS转换来移动冠状病毒。如果英雄在病毒移动到一个随机点时感染了病毒，我希望游戏结束。

HTML

<!DOCTYPE html>
<html>
<head>
<title>Corona invaders</title>
<link rel="stylesheet" type = "text/css" href="style.css">
</head>
<body>
<div id="background">
<div id="henry"></div>
<div id="corona"></div>
<div id="corona1"></div>
<div id="corona2"></div>
</div>
<div id='start'>
<button id='btn-start'>Start</button>
</div>
<script src="index.js"></script>
</body>
</html>

CSS

#background {
background-image: url('assets/background.jpg');
height: 700px;
width: 1400px;
}
#henry {
background-image: url(assets/henry.png);
height: 50px;
width: 50px;
position: absolute;
top: 500px;
left: 700px;
}
#corona {
background-image: url(assets/corona.png);
height: 91px;
width: 91px;
position: absolute;
transition: top 2s ease, left 2s ease;
}
#corona1 {
background-image: url(assets/corona.png);
height: 91px;
width: 91px;
position: absolute;
transition: top 2s ease, left 2s linear;
}
#corona2 {
background-image: url(assets/corona.png);
height: 91px;
width: 91px;
position: absolute;
transition: top 2s ease, left 2s ease;
}

Javascript

var henryLocation = {
top: 700,
left: 700
}
document.onkeydown = function (evt) {
// console.log(evt)
if (evt.keyCode === 38 && henryLocation.top > 10) {
henryLocation.top = henryLocation.top - 25
} else if (evt.keyCode === 40 && henryLocation.top < 700) {
henryLocation.top = henryLocation.top + 25
} else if (evt.keyCode === 37 && henryLocation.left > 10) {
henryLocation.left = henryLocation.left - 25
} else if (evt.keyCode === 39 && henryLocation.left < 1360) {
henryLocation.left = henryLocation.left + 25
}
moveHenry()
}
function moveHenry () {
document.getElementById('henry').style.top = henryLocation.top + 'px'
document.getElementById('henry').style.left = henryLocation.left + 'px'
}
const startBtn = document.getElementById('btn-start')
startBtn.addEventListener("click", theGame, false)
function theGame () {
const startGame = setInterval(moveCorona, 1300)

function moveCorona () {
const theCorona = document.getElementById('corona')
const theCorona1 = document.getElementById('corona1')
const theCorona2 = document.getElementById('corona2')
const w = 1300, h = 600
theCorona.style.top = Math.floor(Math.random() * h) + 'px'
theCorona.style.left = Math.floor(Math.random() * w) + 'px'
theCorona1.style.top = Math.floor(Math.random() * h) + 'px'
theCorona1.style.left = Math.floor(Math.random() * w) + 'px'
theCorona2.style.top = Math.floor(Math.random() * h) + 'px'
theCorona2.style.left = Math.floor(Math.random() * w) + 'px'

function collisionDetect () {
const theCorona = document.getElementById('corona')
const theCorona1 = document.getElementById('corona1')
const theCorona2 = document.getElementById('corona2')

if (
henryLocation.top <= theCorona.style.top + 91 &&
henryLocation.top >= theCorona.style.top &&
henryLocation.left <= theCorona.style.left + 91 &&
henryLocation.left >= theCorona.style.left
) {
alert('finish')
}
}
}
}


function gameLoop () {
setTimeout(gameLoop, 1000)
// moveHenry()
}
gameLoop()

提前谢谢！

我们可以使用getBoundingClientRect((来获取div的位置和大小，您可以在这里阅读。。。

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

我们这样使用它。。。

var H=henry.getBoundingClientRect();
var C=corona.getBoundingClientRect();

现在，它分别返回以下组件。。。

H.left
H.top
H.width
H.height
C.left
C.top
C.width
C.height

在这里，我尝试碰撞逻辑。。。

if(((H.left>=C.left)&&(H.left<=(C.left+C.width))&&(H.top>=C.top)&&(H.top<=(C.top+C.height))){
// We have a collision
}

注意：我在脑子里打下了逻辑，所以可能会有一个boo-boo，但你会发现碰撞的漂移。

相关内容

最新更新

热门标签：