jscanvas两个矩形碰撞

Html

Css

canvas {
	border:1px solid black;
}

var myCanvas = document.getElementById("cont");
var txt = myCanvas.getContext("2d")
var cw = myCanvas.width;
var ch = myCanvas.height;
var Rect = function(x, y, rwidth, rheight, color, speedx, speedy) {
    this.x = x;
    this.y = y;
    this.rwidth = rwidth;
    this.rheight = rheight;
    this.color = color;
    this.speedx = speedx; //x方向的速度
    this.speedy = speedy; //y方向的速度

//增加球绘制的方法
    this.draw = function() {
        txt.fillRect(this.x, this.y, this.rwidth, this.rheight);
        txt.fillStyle = this.color;
        txt.fill();
    }

//增加一个让球运动的方法
    this.move = function() {
        this.x += this.speedx;
        this.y += this.speedy;

//边界值判断
        if (this.x <= 0 || this.x >= cw - this.rwidth) {
            this.speedx *= -1;
        }
        if (this.y <= 0 || this.y >= ch - this.rheight) {
            this.speedy *= -1;
        }
    }
}
var rect1 = new Rect(20, 50, 20, 20, "red", 5, 2);
var rect2 = new Rect(80, 20, 40, 40, "green", 4, 1);

function peng(rect1, rect2) {
    //矩形1的信息
    var x1 = rect1.x,
        y1 = rect1.y,
        width1 = rect1.rwidth,
        height1 = rect1.rheight;

//矩形2的信息
    var x2 = rect2.x,
        y2 = rect2.y,
        width2 = rect2.rwidth;
    height2 = rect2.rheight;
    //如果两个球距离越近,circle越来越小,rtotal不变
    if (x1 + width1 >= x2 && x2 + width2 >= x1 && y2 + height2 >= y1 && y1 + height1 >= y2) {

return true;
    }
}

//动画
function animate() {
    txt.clearRect(0, 0, cw, ch);

if (peng(rect1, rect2)) {
        rect1.speedx *= -1;
        rect1.speedy *= -1;
        rect2.speedx *= -1;
        rect2.speedy *= -1;
    }

rect1.draw();
    rect1.move();
    rect2.draw();
    rect2.move();

window.requestAnimationFrame(animate);
}
animate();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jscanvas两个矩形碰撞



代码描述：canvas JS 实现的两个矩形碰撞

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

yululu

相关代码

jscanvas两个矩形碰撞

最新