DEV Community 👩‍💻👨‍💻

Spsoi
Spsoi

Posted on

HTML5 Javascript Canvas : Rectangular Collision

Финал
jsfiddle.net

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();
Enter fullscreen mode Exit fullscreen mode

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

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);

}
Enter fullscreen mode Exit fullscreen mode

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

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);

}
Enter fullscreen mode Exit fullscreen mode

Отслеживаем пересечение слева.
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);

}
Enter fullscreen mode Exit fullscreen mode

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

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();
Enter fullscreen mode Exit fullscreen mode

style.css

canvas {
    border: 1px solid #000;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

The Complete Guide to Full Stack Web3 Development

The most important tools, protocols, and frameworks for building full stack web3 apps, and most importantly - how to put everything together to lay the groundwork for building out any of your own ideas in the future.