js碰撞

两个div从不同方向、用不等的速度移动。

html:

<div id="box1" style="width: 100px;height: 100px;background: darkolivegreen;position: absolute;left: 50px;"></div>
<div id="box2" style="width: 100px;height: 100px;background: seagreen;position: absolute;left: 800px;top: 150px;"></div>

javascript:

 var lastTime = Date.now();
    var boxSpeed1 = 100;
    var boxSpeed2 = 150;
    var box1 = document.getElementById(‘box1‘);
    var box2 = document.getElementById(‘box2‘);

    function main(){
        var nowTime = Date.now();
        var dt = (nowTime - lastTime) / 1000;
        box1.style.left = parseInt(box1.style.left) + boxSpeed1 * dt + ‘px‘;
        box2.style.left = parseInt(box2.style.left) - boxSpeed2 * dt + ‘px‘;
        lastTime = nowTime;
        setTimeout(main,1000/60);
    }
    main();

两个div从不同方向、用不等的速度移动,判断两个div碰撞,这经常用在游戏敌机与本机碰撞爆咋或者子弹打到敌机爆炸。

 html:

<div id="box1" style="width: 100px;height: 100px;background: darkolivegreen;position: absolute;left: 50px;"></div>
<div id="box2" style="width: 100px;height: 100px;background: seagreen;position: absolute;left: 800px;"></div>

javascript:

 var lastTime = Date.now();
    var boxSpeed1 = 100;   //从左边走的div速度
    var boxSpeed2 = 150;   //从右边走的div速度
    var box1 = document.getElementById(‘box1‘);
    var box2 = document.getElementById(‘box2‘);

    function main(){
        var nowTime = Date.now();
        var dt = (nowTime - lastTime) / 1000;

        var recA = getDemosion(box1);
        var recB = getDemosion(box2);

        var flag =  cili(recA,recB);
        if(flag){
            alert(‘爆炸‘);
            return;
        }
        else{
            box1.style.left = parseInt(box1.style.left) + boxSpeed1 * dt + ‘px‘;
            box2.style.left = parseInt(box2.style.left) - boxSpeed2 * dt + ‘px‘;
        }
        lastTime = nowTime;
        setTimeout(main,1000/60);
    }
    main();

    function getDemosion(element){
        return {
            x:element.offsetLeft,
            y:element.offsetTop,

            width:element.offsetWidth,
            height:element.offsetHeight
        }
    }

    function cili(rectA,rectB){
        return !(
                rectA.x + rectA.width < rectB.x  ||
                rectB.x + rectB.width < rectB.x  ||
                rectA.y + rectA.height < rectA.y ||
                rectB.y + rectB.height < rectB.y
                )

    }

 

时间: 2024-10-10 02:32:05

js碰撞的相关文章

js 碰撞 + 重力 运动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>碰撞+重力运动</title>

js 碰撞运动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>碰撞运动</title> &l

简单的碰撞运动

需要的js //碰撞运动 //对运动的方向以及临界值的处理 function bumpMove(obj) { clearInterval(obj.timer); var speedX = 10; var speedY = 10; timer = setInterval(function() { var L = obj.offsetLeft + speedX; var T = obj.offsetTop + speedY; if(T > document.documentElement.clien

原生js canvas 碰撞游戏的开发笔记2

随着碰撞游戏一的开发成功! 我们的ae小伙子也大胆尝试很多新方案h5.. 所以就诞生了下面个比较变态的游戏. 先体验下吧 类似坦克大战 开发的过程异常的艰辛 不过也很好玩 修正了很多一的错误 和改良了一些思路 1. 原先的canvas的_this存在的全局污染 改良后避免了99% 为了获取windowtouch属性 还是有1%的 希望在三修正 2. 所有的递归函数变缓动函数requestAnimationFrame 增强性能 使动画更流畅 3. 数据和图像分离的更彻底 结构更清晰 对象的创建 对

nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Windows程序员的事实). 操作系统 API.操作系统发展到今日,几乎桌面应用的所有功能,都是基于系统API构建的.调用API和语言及技术无关,哪怕是使用汇编.例如(代码来源于网络,本地重新编译): ;我的第一个win32汇编程序 ;一个经典的hello world !程序 ;>>>>&

原生js canvas 碰撞游戏的开发笔记

-----------------------------------------------福利--------------------------------------------- -----------------------------------------------分割线--------------------------------------------- 今天 我们研究下碰撞游戏 什么是碰撞游戏? 当然是东西碰到在一起啦 用前端逻辑来说 就是2个物品互相碰撞产生的事件 问

js:简单的盒子碰撞

一,通过计算两个盒子的四条边来判断盒子是否碰撞, <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <base href="<%=basePath%>"> <style type="text/css"> *{ ma

Matter.js设置碰撞规则

Matter是一套不错的js物理引擎,LayaAir内置后,变得更加好用 Matter相互碰撞提供了collisionFilter属性,支持三种属性,分别是 groupcategorymask 使用三种属性,就能设计出很复杂的碰撞关系 其中规则如下:第一种情况 在两个group相等的前提下如果任意group大于零,则两者始终碰撞,比如大家都是1,这大家相互直接始终碰撞如果任意group小于0,比如大家都是-1,则大家永远也不碰撞除上述两种情况,则根据category和mask进行判定 第二张情况

原生js实现一个DIV的碰撞反弹运动

 原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;} div{height:100px;width:100px;back