gpt4 book ai didi

javascript - 您将如何使用 javascript 和 jQuery 检测下面这个 2d 游戏中的碰撞?

转载 作者:行者123 更新时间:2023-11-28 02:36:20 28 4
gpt4 key购买 nike

我做了一个简单的游戏,可以让你通过按箭头键来移动紫色盒子。紫色盒子位于蓝色周边内。我希望能够防止紫色盒子突破蓝色边界并留在里面,我知道这涉及碰撞,但我似乎不明白如何做到这一点。这是我到目前为止编写的代码:

        <!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:pink;
}
#bob
{
width:400px;
height:500px;
padding:10px;
border:5px solid blue;
margin:0px;
}
</style>
</head>
<body>


<div id="bob">
<div id="k" style="background- color:purple;width:40px;height:40px;position:absolute" onkeydown="keydownControl(this)"/>
</div>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<script>
$('html').keyup(function(e){
if(e.which==37)
{
$("#k").animate({left:"-=10px"},1);
}
if(e.which==39)
{
$("#k").animate({left:"+=10px"},1);
}
if(e.which==40)
{
$("#k").animate({top:"+=10px"},1);
}
if(e.which==38)
{
$("#k").animate({top:"-=10px"},1);
}
});
</script>

</body>
</html>

假设我正在移动紫色盒子,它碰巧接触到蓝色方 block 。如果发生这种情况,则必须停止朝该方向移动,直到不再与蓝色方 block 接触,从而防止其逃离蓝色方 block 。我该如何使用 JS 和 jQuery 来做到这一点?

最佳答案

查看 jquery animate 的 step 函数。您必须在动画的每个步骤中检查对象是否已到达边缘。做了一些非常相似的事情here

请参阅底部的“亲自尝试...”链接。

关于javascript - 您将如何使用 javascript 和 jQuery 检测下面这个 2d 游戏中的碰撞?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13431509/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com