Убрать квадрат при клике на него - HTML5 Canvas - Ответ 12190521

@8Observer8 · 06.03.2018, 22:54

Я сам тоже изучаю JavaScript и программирование в целом. Задание этой темы мне подходит, чтобы понять некоторые вещи, делая что-то на практике. Когда пытаешься что-то объяснить, то сам начинаешь лучше понимать теорию. Задание простое, но интересное.

Я считаю, что выполнил задание. Теперь квадраты появляются в месте клика левой кнопки мыши (ЛКМ) и исчезают если по ним кликнуть правой кнопкой мыши (ПКМ)

Демка в песочнице

Сначала квадраты появляются со случайных координатами, со случайным размерами и со случайными цветами (r, g, b). По клику ЛКМ по указанной курсором координате появляется квадрат со случайным размерами и со случайными цветами.

Краткое пояснение к коду. В коде присутствует класс Square (Квадрат), который находится в файле Square.js и объект-синглтон Scene, который находится в файле Scene.js. Есть один файл main.js, где происходит вызов метода инициализации Initialize объекта-синглтона Scene. В методе Initialize происходит создание квадратов (объектов класса Square)

Объект-синглтон создаётся таким образом. Те методы, которые возвращаются через return являются открытыми (public), а те, которые не возвращаются в return являются закрытыми (private). Закрытые методы дополнительно помечены нижним подчёркиванием, как, например, метод _Draw.

Javascript

var Scene = (function() {
    var _canvas = null;
    var _ctx = null;
    var _backgroundColor = "white";
 
    var squareArray = [];
 
    function Initialize(canvasID) {
        /* ... */
    }
 
    function _Draw() {
        _ctx.fillStyle = _backgroundColor;
        _ctx.fillRect(0, 0, _canvas.width, _canvas.height);
        for (var i = 0; i < squareArray.length; i++) {
            squareArray[i].Draw();
        }
    }
 
    return {
        Initialize: Initialize
    };
}());

Объект Scene будет только один, потому что Сцена по логике только одна в этой программе. Сцена - это то место, где создаются объекты (метод Initialize) и где они рисуются (метод Draw)

var squareArray = []; // Массив для хранения квадратов. При нажатии на ЛКМ в массив добавляется квадрат (объект класса Square). При нажатии на ПКМ - квадрат из массива удаляется.

У квадрата есть метод IsCollision(x, y), который возвращает true, если точка клика мыши (x, y) попала в квадрат и false, если точка клика мыши (x, y) не попала в квадрат.

index.html

PHP/HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Canvas API. Drawing two squares. OOP</title>
    <script src="Square.js"></script>
    <script src="Scene.js"></script>
    <script src="main.js"></script>
    <style>
        #renderCanvas {
            border: solid 1px;
        }
    </style>
</head>
 
<body>
    <canvas id="renderCanvas" width="400" height="400"></canvas>
</body>
 
</html>

main.js

Javascript

"use strict";
 
function main() {
    Scene.Initialize("renderCanvas");
}
window.onload = main;

Scene.js

Javascript

"use strict";
 
var Scene = (function() {
    var _canvas = null;
    var _ctx = null;
    var _backgroundColor = "white";
 
    var squareArray = [];
 
    function Initialize(canvasID) {
        _canvas = document.getElementById(canvasID);
        _ctx = _canvas.getContext("2d");
 
        for (var i = 0; i < 3; i++) {
            var x = _GetRandomInt(100, 300);
            var y = _GetRandomInt(100, 300);
            var r = _GetRandomInt(0, 255);
            var g = _GetRandomInt(0, 255);
            var b = _GetRandomInt(0, 255);
            var size = _GetRandomInt(40, 80);
            var square = new Square(_ctx, x, y, size, 'rgba(' + r + ', ' + g + ', ' + b + ', 255)');
            squareArray.push(square);
        }
 
        // Handler for left and right mouse button click
        window.onmousedown = function(evt) {
            var x = evt.clientX;
            var y = evt.clientY;
            var rect = evt.target.getBoundingClientRect();
            x = Math.floor(x - rect.left);
            y = Math.floor(y - rect.top);
 
            if (evt.button === 0) {
                _AddSquare(x, y);
            } else if (evt.button === 2) {
                _DeleteSquares(x, y);
            }
        };
 
        // Hide context menu by right mouse click
        window.oncontextmenu = function() {
            return false;
        };
 
        _Draw();
    }
 
    function _AddSquare(x, y) {
        var r = _GetRandomInt(0, 255);
        var g = _GetRandomInt(0, 255);
        var b = _GetRandomInt(0, 255);
        var size = _GetRandomInt(40, 80);
        var square = new Square(_ctx, x, y, size, 'rgba(' + r + ', ' + g + ', ' + b + ', 255)');
        squareArray.push(square);
        _Draw();
    }
 
    function _DeleteSquares(x, y) {
        for (var i = 0; i < squareArray.length; i++) {
            if (squareArray[i].IsCollision(x, y)) {
                squareArray.splice(i, 1);
            }
        }
        _Draw();
    }
 
    /**
     * Returns a random integer between min and max
     * Using Math.round() will give you a non-uniform distribution!
     */
    function _GetRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
 
    function _Draw() {
        _ctx.fillStyle = _backgroundColor;
        _ctx.fillRect(0, 0, _canvas.width, _canvas.height);
        for (var i = 0; i < squareArray.length; i++) {
            squareArray[i].Draw();
        }
    }
 
    return {
        Initialize: Initialize
    };
}());

Square.js

Javascript

"use strict";
 
function Square(ctx, x, y, size, color) {
    this._ctx = ctx;
    this._x = x;
    this._y = y;
    this._size = size;
    this._color = color;
}
 
Square.prototype.Draw = function() {
    this._ctx.fillStyle = this._color;
    this._ctx.fillRect(this._x, this._y, this._size, this._size);
}
 
Square.prototype.IsCollision = function(x, y) {
    return (this._x <= x && x <= this._x + this._size &&
        this._y <= y && y <= this._y + this._size);
};

Вернуться к обсуждению:
Убрать квадрат при клике на него HTML5 Canvas

Следующий ответ