Javascript 对象在碰撞时粘在 div 对象上-6ren

Javascript 对象在碰撞时粘在 div 对象上

转载作者：行者123 更新时间：2023-12-01 15:17:02

我正在尝试制作一个小游戏，用户可以单击页面上的某个位置，圆圈将跟随指针的位置，然后用户可以从那里拖动鼠标使圆圈像弹弓一样移动。我希望圆圈能够从墙上反弹。

然而，似乎在圆与墙壁碰撞时，圆似乎“粘”在墙上而不是立即弹回。我认为这可能是由于舍入误差导致圆圈改变方向太快？顶墙的碰撞还没有实现，因为我认为我没有正确声明顶墙 div 对象。

let windowHeight = window.innerHeight;
let windowWidth = window.innerWidth;
//console.log(`Window height: ${windowHeight}, Window width: ${windowWidth}`);

var $ = document.querySelector.bind(document);
var $on = document.addEventListener.bind(document);

var mouseX, mouseY;
$on('mousedown', function (e){
    mouseX = e.clientX || e.pageX;
    mouseY = e.clientY || e.pageY;

    initialX = mouseX;
    initialY = mouseY;
   //console.log('mousedown');
});

$on('mouseup', function (e){
    //var d = Math.hypot(e.clientX - mouseX, e.clientY - mouseY);
    var movebyX = (Math.abs(e.clientX - mouseX));
    var movebyY = (Math.abs(e.clientY - mouseY));
    // Move puck in opposite direction
    if (e.clientX > mouseX){
        mouseX -= movebyX;
    }
    else if(e.clientX < mouseX){
        mouseX += movebyX;
    }
    
    if (e.clientY > mouseY){
        mouseY -= movebyY;
    }
    else if(e.clientY < mouseY){
        mouseY += movebyY;
    }
    
    //console.log('mouseup');
});


var circle = $('#circle');


var top = $('#top');
var bottom = $('#bottom');
var left = $('#left');
var right = $('#right');
var top = $('#top');


var x = void 0,
    y = void 0,
    dx = void 0;
    dy = void 0;
    v0x = void 0;
    v0y = void 0;
    accelScalar = 0.3;
    key = -1;
    velocityScalar = 0.05;
    teleport = 0.1;
    isCollide = false;
    swap = false;
    initialX = void 0;
    initialY = void 0;

var followMouse = function followMouse(){
    key = requestAnimationFrame(followMouse);
    //tester();
    if(!x || !y){
        x = mouseX;
        y = mouseY;
    }
    else {
        makeMove(findVelocity().dx,findVelocity().dy);
    }
              
    };

function tester() {
    console.log(top.getBoundingClientRect());
}



function findVelocity(){
    v0x = (mouseX - x) * velocityScalar
    v0y = (mouseY - y) * velocityScalar
    return {
        dx: v0x * accelScalar,
        dy: v0y * accelScalar,
    };
}


function makeMove(vx,vy){
    //console.log(`x: ${x}, mouseX: ${mouseX}, vx: ${vx}`);
    
    // teleport, avoid asymptote
    if(Math.abs(vx) + Math.abs(vy) < teleport) {
        x = mouseX;
        y = mouseY;
        vx = 0;
        vy = 0;
   }
   
    // update position if collision

    if (x-41 < (left.getBoundingClientRect().x)){
        vx = -vx
        vy = -vy
    }
    if (x+41 > (right.getBoundingClientRect().x)){
        vx = -vx
        vy = -vy
    }
    if (y+41 > (bottom.getBoundingClientRect().y)){
        vx = -vx
        vy = -vy
    }
    x += vx;
    y += vy;
    // show circle position
    circle.style.left = (x-20) + 'px';
    circle.style.top = (y-20) + 'px';
}

followMouse();

html, body {
    margin: 0;
    height: 100%;
    background: #161616;


}

.wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}

@keyframes animation {
    0% {
        transform: scale(0.9)
    }
    25% {
        transform: scale(1.1)
    }
    50% {
        transform: scale(0.9)
    }
    75% {
        transform: scale(1.1)
    }
    100% {
        transform: scale(0.9)
    }
}

#circle {
    
    width: 50px;
    height: 50px;
    background: none;
    border: 5px solid aqua;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -10px 0 0 -10px;
    pointer-events: none;
    /*animation: animation 5s infinite
    
    */
}

#top, #bottom, #left, #right {
	background: #a5ebff;
	position: fixed;
	}
	#left, #right {
		top: 0; bottom: 0;
		width: 10px;
		}
		#left { left: 0; }
		#right { right: 0; }
		
	#top, #bottom {
		left: 0; right: 0;
		height: 10px;
		}
		#top { top: 0; }
		#bottom { bottom: 0; }

<!DOCTYPE html>
<html>
    <head>
        <title> Test Project </title>
        <link rel = "stylesheet" href = "main.css">
        
    </head>

    <body>
        <div class = "wrap">
            <div id = "circle"></div>
        </div>
        
        <div id="left"></div>
        <div id="right"></div>
        <div id="top"></div>
        <div id="bottom"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type = "text/javascript" src = "./main.js"> </script>
    </body>
</html>

最佳答案

两个问题:

top是顶层框架的保留变量。与尝试访问 ID 为 top 的元素发生冲突, (你应该避免依赖，使用 getElementById 代替)

仅仅反转速度是行不通的，因为您正在使用最后一次鼠标单击的位置计算每帧的速度(这是您的缓动位置的工作方式，即当它接近 mouseX/Y 时通过衰减速度来工作)。
完成这项工作的最简单方法是使用鼠标在边框外单击之间的距离在边框内设置一个新的鼠标单击位置，偏移距离。 (基本上与使用边框作为轴来反转位置具有相同的效果。在这种情况下，它还会在它反转的轴上增加一半的圆宽度。使用硬编码数字，但如果想要作为从实际计算的改进尺寸也可以。)

let windowHeight = window.innerHeight;
let windowWidth = window.innerWidth;
//console.log(`Window height: ${windowHeight}, Window width: ${windowWidth}`);

var $ = document.querySelector.bind(document);
var $on = document.addEventListener.bind(document);

var mouseX, mouseY;
$on('mousedown', function (e){
    mouseX = e.clientX || e.pageX;
    mouseY = e.clientY || e.pageY;

    initialX = mouseX;
    initialY = mouseY;
   //console.log('mousedown');
});

$on('mouseup', function (e){
    //var d = Math.hypot(e.clientX - mouseX, e.clientY - mouseY);
    var movebyX = (Math.abs(e.clientX - mouseX));
    var movebyY = (Math.abs(e.clientY - mouseY));
    // Move puck in opposite direction
    if (e.clientX > mouseX){
        mouseX -= movebyX;
    }
    else if(e.clientX < mouseX){
        mouseX += movebyX;
    }
    
    if (e.clientY > mouseY){
        mouseY -= movebyY;
    }
    else if(e.clientY < mouseY){
        mouseY += movebyY;
    }
    
    //console.log('mouseup');
});


var circle = $('#circle');


var top = $('#top');
var bottom = $('#bottom');
var left = $('#left');
var right = $('#right');
var top = $('#top');


var x = void 0,
    y = void 0,
    dx = void 0;
    dy = void 0;
    v0x = void 0;
    v0y = void 0;
    accelScalar = 0.3;
    key = -1;
    velocityScalar = 0.05;
    teleport = 0.1;
    isCollide = false;
    swap = false;
    initialX = void 0;
    initialY = void 0;

var followMouse = function followMouse(){
    key = requestAnimationFrame(followMouse);
    //tester();
    if(!x || !y){
        x = mouseX;
        y = mouseY;
    }
    else {
        makeMove(findVelocity().dx,findVelocity().dy);
    }
              
    };

function tester() {
    console.log(top.getBoundingClientRect());
}



function findVelocity(){
    v0x = (mouseX - x) * velocityScalar
    v0y = (mouseY - y) * velocityScalar
    return {
        dx: v0x * accelScalar,
        dy: v0y * accelScalar,
    };
}


function makeMove(vx,vy){
    //console.log(`x: ${x}, mouseX: ${mouseX}, vx: ${vx}`);
    
    // teleport, avoid asymptote
    if(Math.abs(vx) + Math.abs(vy) < teleport) {
        x = mouseX;
        y = mouseY;
        vx = 0;
        vy = 0;
   }
   
    // update position if collision

    if (x-41 < (left.getBoundingClientRect().x)){
        mouseX = Math.abs(mouseX - x) + 41
    }
    if (x+31 > (right.getBoundingClientRect().x)){
        mouseX = right.getBoundingClientRect().x - Math.abs(mouseX - x) - 31
    }
    var top = document.getElementById('top')
    if (y-41 < (top.getBoundingClientRect().y)){
        mouseY = Math.abs(mouseY - y) + 41
    }
    if (y+31 > (bottom.getBoundingClientRect().y)){
        mouseY = bottom.getBoundingClientRect().y - Math.abs(mouseY - y) - 31
    }
    x += vx;
    y += vy;
    // show circle position
    circle.style.left = (x-20) + 'px';
    circle.style.top = (y-20) + 'px';
}

followMouse();

html, body {
    margin: 0;
    height: 100%;
    background: #161616;


}

.wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}

@keyframes animation {
    0% {
        transform: scale(0.9)
    }
    25% {
        transform: scale(1.1)
    }
    50% {
        transform: scale(0.9)
    }
    75% {
        transform: scale(1.1)
    }
    100% {
        transform: scale(0.9)
    }
}

#circle {
    
    width: 50px;
    height: 50px;
    background: none;
    border: 5px solid aqua;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -10px 0 0 -10px;
    pointer-events: none;
    /*animation: animation 5s infinite
    
    */
}

#top, #bottom, #left, #right {
	background: #a5ebff;
	position: fixed;
	}
	#left, #right {
		top: 0; bottom: 0;
		width: 10px;
		}
		#left { left: 0; }
		#right { right: 0; }
		
	#top, #bottom {
		left: 0; right: 0;
		height: 10px;
		}
		#top { top: 0; }
		#bottom { bottom: 0; }

<!DOCTYPE html>
<html>
    <head>
        <title> Test Project </title>
        <link rel = "stylesheet" href = "main.css">
        
    </head>

    <body>
        <div class = "wrap">
            <div id = "circle"></div>
        </div>
        
        <div id="left"></div>
        <div id="right"></div>
        <div id="top"></div>
        <div id="bottom"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type = "text/javascript" src = "./main.js"> </script>
    </body>
</html>

关于Javascript 对象在碰撞时粘在 div 对象上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62312161/

文章推荐： java - 小程序不会脱离服务器运行

文章推荐： java - 有没有办法存储多个 JID？

文章推荐： java - 第一个android项目构建错误

文章推荐： javascript - 使用 Redux 时 react native 文本输入闪烁

jQuery 碰撞
我正在用 jQuery Collision 编写这个游戏，它使用键盘按键来移动 div，当一个 div 接触另一个 div 时，它应该防止重叠。我到底该怎么做？ HTML ----
Java 2D 碰撞
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: Java 2D Collision? 嘿，大家好，我有另一篇关于这个问题的帖子刚刚消失了，所以我想我会尝试得到一些关
Java 2D 碰撞？
嘿伙计们，我正在制作一个 2D java 游戏，我正在尝试找出如何制作一个好的碰撞代码。我目前正在使用以下代码: public void checkCollision() { Rect
java - 碰撞 - 识别物体何时停止碰撞
我的意思是，当我与实体的侧面碰撞并想要跳跃时，我无法向右/向左移动，因为当我与右侧/左侧的实体碰撞时，我有一个标志可以防止这种情况发生，例如所以: 这是我用来检测碰撞的代码: public void
python - Sprite 碰撞
所以我正在运行 collide_mask 检查，以删除与玩家 Sprite 碰撞时的生物实例。它工作得很好。 pygame.sprite.spritecollide(player, mobs, Tru
2D 碰撞 - 检测侧面
我正在研究我的砖 block splinter 机，并制作一个适当的碰撞系统，以便使球逻辑地切换方向，我必须检测球与砖 block 的哪一侧碰撞。这是我当前的脚本: int sprite_collid
swift - 碰撞 --> 不要与颜色开关等任何东西发生碰撞
我做了一个类似颜色切换的游戏。唯一的问题是玩家与每种颜色发生碰撞...... 这是我从github上获取的代码: https://github.com/prometheon/MLNimbleNinja
javascript - Canvas 碰撞？
测试我的游戏，当用户和怪物发生碰撞时，我希望弹出警报但没有成功: function die() { for (var i = 0; i < monster.length; i++) { i
c++ - vector 碰撞
我对 vector 很陌生，这是我第一次真正使用它们进行碰撞检查。这是我的项目，我对如何实现碰撞感到困惑。我目前的碰撞检查和响应代码似乎是……糟糕的设计。这是我的代码: for(auto it =
javascript - Canvas 碰撞
我是 javascript 的新手，正在尝试找出如何与球和木板发生碰撞，这将停止游戏并提醒玩家“你输了”。但我只想让红球击中木板，让蓝球不接触地继续前进。这是我正在处理的代码。 (我不介意你是否可以帮
Android OnClickListener 碰撞？
很抱歉提出奇怪的问题，我还是 Android 编程的新手。我有以下代码: import android.content.DialogInterface.OnClickListener; import
iphone - UIPanGestureRecognizer 碰撞
我有 6 个 UIImageView，每个都连接到 UIPanGestureRecognizer，它们都连接到相同的方法。方法是: - (IBAction)handlePan:(UIPanGestur
python - 使用视锥体检查边界框相交/碰撞
我想根据某些对象的轴对齐边界框检查视锥体，以粗略检查这些对象是否在视野中。速度不是什么大问题。最佳答案我发现构建视锥体的世界空间模型并检查与它的 bbox 碰撞是错误的方法。一个更简单的方法是以
ios - Spritekit 碰撞
我项目中的所有这些代码都运行良好，但我遇到了一些问题。当飞机接触到屏幕的边界时，它会在接触后开始旋转。我不知道如何让它在碰到屏幕边界时不旋转。只有在我使用时才会出现这个问题: plane.physic
ios - 获取已删除实体的关系。 (碰撞)
在应用程序启动时，我在后台线程中删除旧的 CoreData 行，下面是我的代码。我的问题类似于城市街道问题。所以，我有两个实体，Street 和 City，我有一个关系 City > Street，因
ios - *碰撞*通过位掩码
我试图不接触穴居人和其他带有碰撞位掩码的图像，但我的穴居人击中了一切。 func addCaveManBitMasks(){ caveManNode.physicsBody?.category
javascript - HTML5 - 碰撞
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
python - PyGame 碰撞？
如何在 PyGame 中找到字符和图像之间的碰撞？我已经从图像中绘制了一个玩家，并从瓷砖中绘制了墙壁，那么我如何检测这些碰撞？最佳答案如果你使用pygame Rect类来表示对象的边界，您可以使用
c - ftok() 碰撞
我正在使用 ftok() 为 C 应用程序使用的共享内存段生成标识符。我有问题，在一个盒子上我与 root 使用的标识符发生冲突。在这种情况下，我可以通过破解代码来修复它，但我想要一个更强大的解决方案
javascript - 与物体(墙壁)碰撞
这个问题在这里已经有了答案: JavaScript: Collision detection (10 个回答) 10 个月前关闭。检测 2 个物体(墙壁)碰撞的好方法。是的，不仅仅是检测，还有进一步

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript 对象在碰撞时粘在 div 对象上