HTML5 Javascript Canvas : Rectangular Collision

#javascript #webdev #canvas

canvas = document.querySelector('#canvas');
let c = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

let mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
}

let colors = [
    '#2185c5',
    '#7ECEFD',
    '#FFF6E5',
    '#FF7F66'
];

document.addEventListener("mousemove", function(event){
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});

function animate() {
    requestAnimationFrame(animate);
    c.fillStyle = '#1A1A23';
    c.fillRect(0, 0, canvas.width, canvas.height);

    let blueRectanglesX = canvas.width / 2 - 50;
    let blueRectanglesY = canvas.height / 2 - 50;
    if (mouse.x + 100 >= blueRectanglesX &&  // обнаружение пересечение слева
        mouse.x <= blueRectanglesX + 100 &&  // обнаружение пересечение справа
        mouse.y + 100 >= blueRectanglesY && // !* обнаружение пересечение сверх
        mouse.y <= blueRectanglesY + 100// !* обнаружение пересечение снизу
        ) {
        console.log('Пересечение');
    }

    // red
    c.fillStyle = '#E86262';
    c.fillRect(mouse.x, mouse.y, 100, 100);

    // blue
    c.fillStyle = '#92ABEA';
    c.fillRect(canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100);

}

animate();

Отслеживаем пересечение снизу и сверху

jsfiddle.net

function animate() {
    requestAnimationFrame(animate);
    c.fillStyle = '#1A1A23';
    c.fillRect(0, 0, canvas.width, canvas.height);

    if (mouse.x + 100 >= canvas.width / 2 - 50 &&  // обнаружение пересечение слева
        mouse.x <= canvas.width / 2 - 50 + 100 &&  // обнаружение пересечение справа
        mouse.y + 100 >= canvas.height / 2 - 50 && // !* обнаружение пересечение сверх
        mouse.y <= canvas.height / 2 - 50 + 100// !* обнаружение пересечение снизу
        ) {
        console.log('Пересечение');
    }

    // red
    c.fillStyle = '#E86262';
    c.fillRect(mouse.x, mouse.y, 100, 100);

    // blue
    c.fillStyle = '#92ABEA';
    c.fillRect(canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100);

}

Отслеживаем пересечение справа.

jsfiddle.net

function animate() {
    requestAnimationFrame(animate);
    c.fillStyle = '#1A1A23';
    c.fillRect(0, 0, canvas.width, canvas.height);

    if (mouse.x + 100 >= canvas.width / 2 - 50 &&  // обнаружение пересечение слева
        mouse.x <= canvas.width / 2 - 50 + 100 ) { // !* обнаружение пересечение справа
        console.log('Чпоньк');
    }

    // red
    c.fillStyle = '#E86262';
    c.fillRect(mouse.x, mouse.y, 100, 100);

    // blue
    c.fillStyle = '#92ABEA';
    c.fillRect(canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100);

}

Отслеживаем пересечение слева.
jsfiddle.net

function animate() {
    requestAnimationFrame(animate);
    c.fillStyle = '#1A1A23';
    c.fillRect(0, 0, canvas.width, canvas.height);

    if (mouse.x + 100 >= canvas.width / 2 - 50) { // !* обнаружение пересечение слева
        console.log('Чпоньк');
    }

    // red
    c.fillStyle = '#E86262';
    c.fillRect(mouse.x, mouse.y, 100, 100);

    // blue
    c.fillStyle = '#92ABEA';
    c.fillRect(canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100);

}

Отрисуем два квадрата

jsfiddle.net

canvas.js

canvas = document.querySelector('#canvas');
let c = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

let mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
}

let colors = [
    '#2185c5',
    '#7ECEFD',
    '#FFF6E5',
    '#FF7F66'
];

document.addEventListener("mousemove", function(event){
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});

function animate() {
    requestAnimationFrame(animate);
    c.fillStyle = '#1A1A23';
    c.fillRect(0, 0, canvas.width, canvas.height);

    c.fillStyle = '#E86262';
    c.fillRect(mouse.x, mouse.y, 100, 100);

    c.fillStyle = '#92ABEA';
    c.fillRect(canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100);

}

animate();

style.css

canvas {
    border: 1px solid #000;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script  src="canvas.js" ></script>
</body>
</html>

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more